Vue数据及事件绑定
1.数据绑定
Vue最显著的特点就是响应式和数据驱动，也就是将Model和View进行单向绑定或者双向绑定
1.1 数据绑定的方法
1.1.1 单向绑定
单向绑定 ：把Model绑定到View后，当用js代码更新Model时，View就会自动更新; 因此我们不需要进行额外的DOM操作，只需要对Model操作就能实现视图的联动更新
几个单向绑定的例子
- 插值绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>插值绑定 demo</title> <script src="../../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app"> {{num}} </div> <script type="text/javascript"> var vm=new Vue({ el:"#app", data:{ num:111, } }) </script> </body> </html> 复制代码
我创建了一个Vue实例，并在实例中指定data，这里的data就是指定Model，{{num}}就是View，当我在控制台改变num的值时，View也会随之发生改变，这就是单向绑定
- v-bind 绑定
HTML的某些属性可以支持单向绑定，只需要加上v-bind指令，属性值就会和Vue实例的Model进行绑定；之后我们可以操作Model来实现DOM的联动更新。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-bind绑定 demo</title> <script src="../../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script> <style> .red{ background-color: red; } .blue{ background-color: blue; } </style> </head> <body> <div id="app"> <p v-bind:class="color">{{value}}</p> </div> <script type="text/javascript"> var vm=new Vue({ el:"#app", data:{ value:'shelgi', color:'blue' } }) </script> </body> </html>
1.1.2 双向绑定
双向绑定：是指HTML标签数据绑定到Vue对象，另外反方向数据也是绑定的。简单来说，双向绑定就是把Model绑定到View的同时也将View绑定到Model上，这样js更新Model时，View会自动更新；更新View时，Model的数据也会自动更新。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>双向绑定 demo</title> <script src="../../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app"> <p><input v-model="name">{{name}}</p> </div> <script type="text/javascript"> var vm=new Vue({ el:"#app", data:{ name:'111' } }) </script> </body> </html>
2. 计算属性
Vue提供的计算属性允许开发者编写一些方法，协助进行绑定数据的操作。模板内表达式包含复杂逻辑时，应使用计算属性。只要计算属性使用的数据不发生改变，计算属性就不会执行，而是直接使用缓存。
3. 表单控件绑定
我们通常使用v-model对text、radio、checkbox、select等表单组件进行双向绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-model demo</title> <script src="../../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app"> <select v-model="choice"> <option value="iphone">iphone</option> <option value="ipad">ipad</option> <option value="ipad mini">ipad mini</option> </select> <br/> <span>你选择的是:{{choice}}</span> </div> <script type="text/javascript"> var vm=new Vue({ el:"#app", data:{ choice:"请选择" } }) </script> </body> </html>
有时需要控制同步时机，或者转换类型，就可以通过添加修饰指令
- lazy：改为在change事件中去同步
- debounce：设置一个最小的时延，完成xxxms内，vm.msg才会被更新
- number：将值转为数值类型
4. 事件绑定
v-on指令用来监听DOM事件，通常在模板内直接使用
v-on绑定实例选项属性methods中的方法作为事件的处理器，如果不带括号就是函数名，带括号的就是内联处理器
更多的可以想象成向函数中传入一个参数
5. 修饰符
修饰符可以分为两种：事件修饰符和键值修饰符
5.1 事件修饰符
事件修饰符：在事件处理程序中调用event.preventDeafault()或event.stopPropagation()，是非常常见的；在方法中只处理纯粹的数据逻辑，而不去处理DOM事件细节
.stop.prevent.capture.self.once.passive
<!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 --> <div v-on:click.capture="doThis">...</div> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div> 复制代码
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
2.1.4 新增
<!-- 点击事件将只会触发一次 --> <a v-on:click.once="doThis"></a> 复制代码
不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。如果你还没有阅读关于组件的文档，现在大可不必担心。
2.3.0 新增
Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> <!-- 而不会等待 `onScroll` 完成 --> <!-- 这其中包含 `event.preventDefault()` 的情况 --> <div v-on:scroll.passive="onScroll">...</div> 复制代码
这个 .passive 修饰符尤其能够提升移动端的性能。
不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。
5.2 键值修饰符
在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --> <input v-on:keyup.enter="submit"> 复制代码
你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。
<input v-on:keyup.page-down="onPageDown"> 复制代码
在上述示例中，处理函数只会在 $event.key 等于 PageDown 时被调用。
5.3 按键码
keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。
使用 keyCode attribute 也是允许的：
<input v-on:keyup.13="submit"> 复制代码
为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：
.enter.tab.delete(捕获“删除”和“退格”键).esc.space.up.down.left.right
有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，这些内置的别名应该是首选。
你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：
// 可以使用 `v-on:keyup.f1` Vue.config.keyCodes.f1 = 112 复制代码
6. 与传统事件绑定的区别
- 无需手动管理，ViewModel被销毁时，所有的事件处理器都会自动被删除，重新获取DOM绑定事件；
- 解耦，ViewModel代码是纯粹的逻辑代码，与DOM无关
- Vue.extend()，可以重复使用子组件
7. class与style的绑定
7.1 class的绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 100px; height: 100px; } .class1{ background-color: #ff0; } .class2{ background-color: #f00; } </style> <script src="../../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app" v-bind:class="[choice1,choice2]" v-on:click="change"> </div> <script type="text/javascript"> var vm=new Vue({ el:"#app", data:{ choice1:'class1', choice2:'' }, methods:{ change() { this.choice1=this.choice1==''?'class1':''; this.choice2=this.choice2==''?'class2':''; } } }) </script> </body> </html>
7.2 css的绑定
v-bind:style 的对象语法可以实现对内联样式的绑定，但是其实是一个js对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绑定内联样式 demo</title> <script src="../../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app"> <div v-bind:style="css">{{msg}}</div> </div> <script type="text/javascript"> var vm=new Vue({ el:"#app", data:{ msg:'shelgi', css:{ color:'orange', fontsize:'10px', } } }) </script> </body> </html> 复制代码
