Vue的数据绑定、Vue的事件绑定、Class和Style的绑定
一、Vue的数据绑定
1. 单向数据绑定:将Model绑定到View上,当通过JavaScript代码改变了Model时,View就会自动刷新。不需要进行额外的DOM操作就可以实现视图和模型的联动
a. 数据只保存一份
b. data—->DOM
(1)插值表达式:{{ 表达式 }},将表达式的值在View中显示出来
(2)v-bind:将标签的属性绑定到指定的变量上。简写方式: 属性名=“变量名”
2. 双向数据绑定:是Vue的核心特征之一。将Model绑定到View上,同时将View和Model进行绑定。即当Model的数据发生改变时,View会自动更新;当View的数据发生改变时,Model的数据也会更新。
强调:在Vue中只有表单元素才能实现双向绑定(input、textarea、select),实现指令是v-model
(1)文本框(text’的绑定:和普通的变量进行绑定
(2)复选框(checkbox)的绑定:绑定的变量必须是数组
(3)单选框(radio)的绑定:绑定普通的变量
(4)下拉列表(select)的绑定:当下拉列表为单选时,绑定的变量为普通变量;当下拉列表为多选时,绑定的变量自动转换为数组
3. 值绑定的时机(数据同步的时机):v-model指令可以实现Model和View的数据同步
(1).lazy(懒加载):在input失去焦点或按下回车键时才进行更新
<label>用户名:<input type="text" v-model.lazy="userName"></label>
(2).number:将输入的数据转换成Number类型。在input中输入的虽然是数字,但实际是string,为了将字符串转换为数字,加上该修饰符实现自动转换
<label>年龄:<input type="number" v-model.number="userAge"></label><p>年龄:{{userAge}},数据类型:{{typeof(userAge)}}</p>
(3).trim:会自动过滤掉输入的首尾空格
<label>用户名:<input type="text" v-model.trim="userName"></label>
二、Vue的事件绑定
通过v-on指令绑定,v-on:原生的事件名(@原生事件名)
1. 方法处理器方式:v-on:原生事件名 = 函数名
<script src="../js/vue.js"></script><body><div id="app"><p>{{msg}}</p><!-- <button @click="changeMsg">修改</button> --><button v-on:click="changeMsg()">修改</button></div><script>const vm = new Vue({el:'#app',data:{msg:'Hello World!'},methods:{changeMsg(){this.msg='曲江池' }}})</script>
</body>
2. 内联语句处理器方式:本质是内联了javascript语句
<script src="../js/vue.js"></script><body><div id="app"><p>{{msg}}</p><button v-on:click="changeMsg('大雁塔')">修改</button></div><script>const vm = new Vue({el:'#app',data:{msg:'Hello World!'},methods:{changeMsg(info){this.msg=info }}})</script>
</body>
3. 在内联语句中访问原生的DOM事件
<script src="../js/vue.js"></script><body><div id="app"><p>{{msg}}</p><!-- <button v-on:click="changeMsg('大雁塔')">修改</button> --><br><br><a href="http://www.baidu.com" v-on:click="say($event)">百度一下</a></div><script>const vm = new Vue({el:'#app',data:{msg:'Hello World!'},methods:{changeMsg(){this.msg='曲江池' },// say(event){// event.preventDefault()// },say:function(event){event.preventDefault()}}})</script>
</body>
4. 事件绑定中的修饰符
(1).prevent :调用preventDefault()。阻止链接打开URL
<a href="http://www.bilibili.com" v-on:click.prevent>bilibili</a>
(2).stop :调用stopPropagation()。阻止事件传播(阻止事件冒泡)
(3)键值修饰符:在监听键盘事件时,需要知道键的keyCode,记忆不方便,可以通过修饰符来记录键值
enter、tab、delete、esc、space、up、down、left、right
<script src="../js/vue.js"></script><body><div id="app"><button v-on:keyup.up="say">提交</button></div><script>const vm = new Vue({el:'#app',data:{msg:'键盘修饰符',},methods:{say(){alert(this.msg)}}})</script>
</body>
三、Class和Style的绑定
1. 对象语法:给v-bind:class传递一个对象,来动态地改变class属性值
<script src="../js/vue.js"></script><style>div {width: 100px;height: 100px;}.class1 {background-color: #ff0;}.class2 {background-color: #f00;}
</style><body><div id="app" v-bind:class="colorName" v-on:click="changeColor"></div><script>const vm = new Vue({el: '#app',data:{colorName:{class1:true,class2:false}},methods: {changeColor() {this.colorName.class1 = !this.colorName.class1this.colorName.class2 = !this.colorName.class2}}})</script>
</body>
2. 数组语法:可以把一个数组传给v-bind:class,以应用一个class列表
<script src="../js/vue.js"></script><style>div {width: 100px;height: 100px;}.class1 {background-color: #ff0;}.class2 {background-color: #f00;}
</style><body><div id="app" v-bind:class="[c1,c2]" v-on:click="changeColor"></div><script>const vm = new Vue({el: '#app',data: {c1: 'class1',c2: '',},methods: {changeColor() {this.c1 = (this.c1 == '' ? 'class1' : '')this.c2 = (this.c2 == '' ? 'class2' : '')}}})</script>
</body>
3. 内联样式绑定:直接绑定style(v-bind:style)
(1)对象表示法
<script src="../js/vue.js"></script><style>div {width: 100px;height: 100px;}.class1 {background-color: #ff0;}.class2 {background-color: #f00;}
</style><body><div id="app" v-bind:class="[c1,c2]" v-on:click="changeColor"><div v-bind:style="{color:fontColor,fontSize:mySize}">白桦林</div></div><script>const vm = new Vue({el: '#app',data: {c1: 'class1',c2: '',fontColor:'blue',mySize:'18px'},methods: {changeColor() {this.c1 = (this.c1 == '' ? 'class1' : '')this.c2 = (this.c2 == '' ? 'class2' : '')}}})</script>
</body>
(2)数组表示法
<script src="../js/vue.js"></script><style>div {width: 100px;height: 100px;}.class1 {background-color: #ff0;}.class2 {background-color: #f00;}
</style><body><div id="app" v-bind:class="[c1,c2]" v-on:click="changeColor"><div v-bind:style="[colorStyle,fontStyle]">白桦林</div></div><script>const vm = new Vue({el: '#app',data: {c1: 'class1',c2: '',colorStyle:{color:'red'},fontStyle:{fontSize:'32px'}},methods: {changeColor() {this.c1 = (this.c1 == '' ? 'class1' : '')this.c2 = (this.c2 == '' ? 'class2' : '')}}})</script>
</body>
Vue的数据绑定、Vue的事件绑定、Class和Style的绑定相关推荐
- Vue的数据绑定 事件 键盘 ,以及创建项目改端口号
一.Vue的数据绑定 1.单向数据绑定:将Model绑定到View上,当通过JavaScript代码改变了Model时,View就会自动刷新.不需要进行额外的DOM 操作就可以实现视图和模型的联动 ...
- vue 实例数据绑定 指令 事件
vue.js的模式 mvvm 模式视图层与数据层的双向绑定 环境搭建 其一引用 <script src="https://cdn.jsdelivr.net/npm/vue/dist/v ...
- 二、Vue基础语法学习笔记——事件监听v-on、条件判断(v-if、v-else-if、v-else、v-show)、循环遍历(v-for遍历数组对象,key属性、检测数组更新)、图书案例、双向绑定
四.事件监听 在前端开发中,我们需要经常和用于交互. 这个时候,我们就必须监听用户发生的时间,比如点击.拖拽.键盘事件等等 在Vue中如何监听事件呢?使用v-on指令 v-on介绍 作用:绑定事件监听 ...
- 08.vue.js实战笔记(计算属性、v-bind及class和style的绑定、内置指令、方法与事件)
1.计算属性 所有的计算属性都以函数的形式写在vue实例的computed选项内,最终返回计算后的结果 <!DOCTYPE html> <html lang="en&quo ...
- vue双向数据绑定v-model绑定单选框,复选框,下拉框
v-model使用 1. 简单的demo 2. 三种框的绑定 注意它是自动帮你确认值的!!!无需关心过程,把json数据一丢到data中,自动选中. 1. 简单的demo 实现一边在输入框输入,一边显 ...
- vue双向数据绑定原理分析--Mr.Ember
vue双向数据绑定原理分析 摘要 vue常用,但原理常常不理解,下面我们来具体分析下vue的双向数据绑定原理. (1)创建一个vue对象,实现一个数据监听器observer,对所有数据对象属性进行监听 ...
- vue 双向数据绑定的实现学习(一)
前言:本系列学习笔记从以下几个点展开 什么是双向数据绑定 双向数据绑定的好处 怎么实现双向数据绑定 实现双向数据数据绑定需要哪些知识点 数据劫持 发布订阅模式 先看看我们要实现的目标是什么,如下动图: ...
- “别具一格”的vue双向数据绑定原理
背景和一点点看法 见网上许多文章讲vue双向数据绑定一开口就大谈 Object.defineProperty 和 proxy.其实不然.这是vue中响应式的"基石". vue 中有 ...
- 前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)
前端面试题 HTML5 相关面试题 CSS3 相关面试题 盒子模型 盒子水平垂直居中的方案 经典布局方案 圣杯布局 双飞翼布局 flex布局 定位方式布局 css实现三角形 JS 相关面试题 8种数据 ...
最新文章
- 最新的10个优质Python开源项目
- 我的BLOG:阅读目录
- 有“声”以来,语音如何识别?
- MySQL的timestamp类型自动更新问题
- Mapgis与Arcgis数据互转中出现的问题
- SpringBoot异常处理以及对数据正确性的检查
- 数据科学和人工智能技术笔记 十三、树和森林
- 2017 部门文化宣贯会议内容
- 【Java】Java与数字证书
- Win 10 1月 12 日 停用 flash解决办法
- 一键获取喜马拉雅音频文件(Python3爬虫)
- 花生壳内网穿透操作文档
- pythonend输出最后没有逗号_python不换行之end=与逗号的意思及用途
- 影视影评类微信公众号图文排版有哪些技巧?
- mysqldump全量恢复_【MySQL】全量+增量的备份/恢复
- python教程(从入门到巅峰)1
- Python快速入门(八)面向对象1:类、对象和封装
- svn常用命令以及冲突解决
- 斧子演示:如何取消导出高清视频的限制
- 为什么叫Windows 7?