感觉写博客好麻烦的.... 有的很小的知识点，我看的时候是记在笔记本上的，但是现在要再用博客写一遍，就会整理很久，就想着干脆简单一点写一点笼统的。以及一些需要时间思考的代码，写出逻辑
监听属性
用$watch响应数据变化 学vue最大的感觉就是感觉很多指令啊属性啊跟监听是一样的意思，都能实时的感受到数据，交互性能真的很好，但是久了会有点难区分区别, 先看下面这个例子，是菜鸟给的第一个最简单的例子
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> 6 <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> 7 </head> 8 <body> 9 <div id = "app"> 10 <p style = "font-size:25px;">计数器: {{ counter }}</p> 11 <button @click = "counter++" style = "font-size:25px;">点我</button> 12 </div> 13 <script type = "text/javascript"> 14 var vm = new Vue({ 15 el: '#app', 16 data: { 17 counter: 1 18 } 19 }); 20 vm.$watch('counter', function(nval, oval) { 21 alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!'); 22 }); 23 </script> 24 </body> 25 </html>
在button按钮给了一个click事件绑的counter++ ，即直接点击就counter++，这个时候 counter的监听 那些指令就做不到了，因为它不是在js逻辑里加一，而是在button直接++了，所以可以用watch来响应数据变化前与变化后。（这里的代码形式是 vm.$watch(){} ）
因为对这种监听还不是很能理解，看到菜鸟的一个demo是这样的：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> 6 <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> 7 </head> 8 <body> 9 <div id = "computed_props"> 10 千米 : <input type = "text" v-model = "kilometers"> 11 米 : <input type = "text" v-model = "meters"> 12 </div> 13 <p id="info"></p> 14 <script type = "text/javascript"> 15 var vm = new Vue({ 16 el: '#computed_props', 17 data: { 18 kilometers : 0, 19 meters:0 20 }, 21 methods: { 22 }, 23 computed :{ 24 }, 25 watch : { 26 kilometers:function(val) { 27 this.kilometers = val; 28 this.meters = val * 1000; 29 }, 30 meters : function (val) { 31 this.kilometers = val/ 1000; 32 this.meters = val; 33 } 34 } 35 }); 36 // $watch 是一个实例方法 37 vm.$watch('kilometers', function (newValue, oldValue) { 38 // 这个回调将在 vm.kilometers 改变后调用 39 document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue; 40 }) 41 </script> 42 </body> 43 </html>
然后我想了一下，我觉得v-model也可以做到，就自己写了一个一样功能的demo：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> 6 <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> 7 </head> 8 <body> 9 <div id = "computed_props"> 10 千米 : <input type = "text" v-model = "kilometers" v-on:input="ki"> 11 米 : <input type = "text" v-model = "meters" v-on:input="me"> 12 </div> 13 14 <script type="text/javascript"> 15 var vm = new Vue({ 16 el:'#computed_props', 17 data:{ 18 kilometers:0, 19 meters:0 20 }, 21 methods:{ 22 ki: function(){ 23 this.meters = this.kilometers*1000 24 }, 25 me: function(){ 26 this.kilometers = this.meters/1000 27 } 28 } 29 }) 30 </script> 31 </body> 32 </html>
首先 v-on 一开始感觉只见到了跟click搭配，但是我这里是想当我在input框里输值的时候触发事件，所以查了一下，可以v-on:input ， 如果我是在千米那里触发事件，那我就处理meter的值，对米的触发同理
watch监听的区别就是，我监听它，并且保持了他们之间的数量关系，就不需要我触发事件这种事情，它会时刻监听，不需要特别的去处理数据，且watch是有两个参数的，就可以得到之前的值和后来改变之后的值。所以如果这种情况要用v-model的话，应该处理的就很复杂，因为改变之前还需要存起来..之类的。
ps: 非vue的时候，有一个是oninput 跟click一个意思，就是输入的时候触发事件，但是在vue里这样写是没有作用的，且@oninput v-on:oninput 都是不可以的
看了一下别人的博客，讲一下自己对于watch method co的区别的理解和别人的博客理解（捂脸...又照搬，看着口语化的部分就是我写的可能）
- computed：计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
- methods：methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
- watch：是一种更通用的方式来观察和响应 Vue 实例上的数据变动。一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。
computed 计算属性，是页面加载之后就可以执行的，赋值什么的（给我一种onload函数的感觉，我也不是很清楚）
methods 是要触发才执行的一些函数 如上述代码里的
watch就是响应数据变化，对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。
所以他们的执行顺序为：默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再watch。（因为这个时候早就加载完了）
最相似的就是watch和computed，他们两个对数据都挺敏感，当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。
computed 计算属性只有在相关的数据发生变化时才会改变要计算的属性，当相关数据没有变化是，它会读取缓存。而不必想 motheds方法 和 watch 方法是的每次都去执行函数。 所以有一些数据响应还是用computed会更好（人家博客的例子）
样式绑定
class属性绑定：（其实在上一篇里提到了一个demo v-bind的那个）
v-bind:class 设置对象，可以动态的切换class true就绑定这个选择器，用这种样式
也可以在对象中传入更多属性用来动态切换多个 class 。跟绑定一个有一点点区别，贴上代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> 6 <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> 7 <style> 8 .active { 9 width: 100px; 10 height: 100px; 11 background: green; 12 } 13 .text-danger { 14 background: red; 15 } 16 </style> 17 </head> 18 <body> 19 <div id="app"> 20 <div class="static" v-bind:class="{ 'active': isActive,'text-danger': hasError }"> 21 </div> 23 </div> 24 25 <script> 26 new Vue({ 27 el: '#app', 28 data: { 29 isActive: true, 30 hasError: true 31 } 32 }) 33 </script> 34 </body> 35 </html>
第20行是想对两个选择器都切换，如果都是true就相当于
1 <div class="static active text-danger"></div
的意思，但是active可以加引号，也可以不加，经过实践，后面的那个选择器必须得加引号。
也可以直接绑定数据里的一个对象：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> 6 <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> 7 <style> 8 .active { 9 width: 100px; 10 height: 100px; 11 background: green; 12 } 13 .text-danger { 14 background: red; 15 } 16 </style> 17 </head> 18 <body> 19 <div id="app"> 20 <div v-bind:class="classObject"></div> 21 </div> 22 23 <script> 24 new Vue({ 25 el: '#app', 26 data: { 27 classObject: { 28 active: true, 29 'text-danger': true 30 } 31 } 32 }) 33 </script> 34 </body> 35 </html>
我乍一看的时候，突然有点看不太懂。现在这个意思就是我直接绑了个classObject（说到了这个，之前看书的时候想起来有个地方驼峰写法会自动转化为），然后把之前那两个选择器放在data下面classObject里
也可以在这里绑定返回对象的计算属性，进阶版demo：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> 6 <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> 7 <style> 8 .active { 9 width: 100px; 10 height: 100px; 11 background: green; 12 } 13 .text-danger { 14 background: red; 15 } 16 </style> 17 </head> 18 <body> 19 <div id="app"> 20 <div v-bind:class="classObject"></div> 21 </div> 22 23 <script> 24 new Vue({ 25 el: '#app', 26 data: { 27 isActive: true, 28 error: null 29 }, 30 computed: { 31 classObject: function () { 32 return { 33 active: this.isActive && !this.error, 34 'text-danger': this.error && this.error.type === 'fatal', 35 } 36 } 37 } 38 }) 39 </script> 40 </body> 41 </html>
==用于一般比较，===用于严格比较，==在比较的时候可以转换数据类型，===严格比较，只要类型不匹配就返回flase。
可以看到这里，data里没有我所要的选择器，只有一些判断用的值（我不知道怎么描述）然后我通过return的时候计算属性，（即 this.谁谁巴拉巴拉） 然后给选择器真或假，至于绑定还是用的classObject 返回对象的计算属性。 （说它是常用且强大的计算模式，我暂时想不到它可以干嘛用，还没想到他有啥很好的地方）
可以把一个数组传给 v-bind:class 这个很容易理解，activeClass, errorClass所对应的类名在data里会赋值的，就不涉及true false 直接类
1 <div v-bind:class="[activeClass, errorClass]"></div>
三元来做这个切换也可以
1 <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>//errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类
可以在 v-bind:style 直接设置样式（内联）
1 <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
也可以直接绑定到一个样式对象，v-bind:style 也可以使用数组将多个样式对象应用到一个元素上
注意：当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。