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