watch 监听器：
watch 用于监听单一属性（可以是多个单一属性）。
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <span>{{ msg }}</span> <br> <button @click="msg = 'NEO'">修改</button> </div> </body> <script src="./vue.js"></script> <script> new Vue({ el: "#app", data(){ return { msg:"neo" } }, // watch 监听器对应的是一个 对象；watch 可以监听多个单个的属性（如： msg） watch: { msg: function(vals){ // msg 就是 Vue data 中的 msg， 其对应的是一个 函数，函数有一个参数 console.log(vals) // NEO // 写自己的监听逻辑 if (vals == "NEO"){ this.msg = "大NEO" } } } }) </script> </html>
watch 官方文档：
https://cn.vuejs.org/v2/guide/computed.html#%E4%BE%A6%E5%90%AC%E5%99%A8
计算属性：
计算属性可用于监听多个属性
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <!-- 直接调用 计算属性中的 key --> <p>{{ myMsg }}</p> <button @click="clickHander">修改</button> </div> </body> <script src="./vue.js"></script> <script> new Vue({ el: "#app", data(){ return { msg: "neo", age: 30 } }, methods: { clickHander(){ // 此时 this 指向的是 当前对象，即 Vue 对象 this.msg = "大大NEO", this.age = 18 } }, // computed 计算属性， 对应的是一个对象； 计算属性默认只有 getter 方法 computed:{ myMsg: function(){ // 计算属性能够监听多个属性，如下，监听了 msg 和 age console.log(this) // 此时 this 指向的是 当前对象，即 Vue 对象 // 写自己的业务逻辑 return `我的名字是“${this.msg}”，年龄是“${this.age}”` } } // 定时器 和 ajax 等（你用别人的函数 ）中要用 箭头函数， setInterval(function(){}, sec) 这是一个闭包，会改变其中匿名函数中 this 的指向，所以此时要用 箭头函数把 this 的指向变为 Vue 对象； 如上 methods 和 computed 中的函数 function(){}， 其中 this 本来就是指向当前对象，即 Vue 对象 // 计算属性的方法既可以在 指令系统 中用，也可以在模板语法中用 }) </script> </html>
官网文档： https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7
表单输入绑定
数据双向绑定：数据到 vue 的过程， vue 到数据的过程
v-model 只能用在像 input textarea 和 select 这样的表单控件中
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <!-- 在页面刚渲染的时候， input 和 p 标签中的 msg 都从 Vue 的 data 中取值；当 input 输入框中的内容改变时， v-model 也修改了 Vue data 中的 msg的值，然后 p 标签中的 msg 又从 Vue data 中获取到了新的值；即 数据 => Vue => 数据， 双向绑定--> <input type="text" v-model="msg"> <p>{{ msg }}</p> </div> <script src="./vue.js"></script> <script> new Vue({ el: "#app", data(){ return { msg: "neo" } } }) </script> </body> </html>
浏览器效果示例：
数据双向绑定的实现：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <!-- oninput 是 js 中的用于监听 input 输入框的事件 --> <input type="text" :value="msg" @input="changeHandler"> <p>{{ msg }}</p> </div> <script src="./vue.js"></script> <script> new Vue({ el: "#app", data(){ return { msg: "neo" } }, methods:{ changeHandler(event){ this.msg = event.target.value // event.target.value : input 输入框中的值 } } }) </script> </body> </html>
官方文档：
https://cn.vuejs.org/v2/guide/forms.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95