一、計算屬性
當我們使用模板語言的時候，模板語言中可能會使用邏輯語句（函數調用等），如果業務比較復雜，我們的計算語句也會比較復雜，例如：
<div id="example"> {{ message.split('').reverse().join('') }} </div>
如上所示，在模板語言中計算message的翻轉字符串。
我們可以使用計算屬性，將計算翻轉字符串的邏輯寫到計算屬性中：
var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 計算屬性的 getter reversedMessage: function () { // `this` 指向 vm 實例 return this.message.split('').reverse().join('') } } })
這樣，我們使用模板語言，就可以直接插入reversedMessage：
<div id="example"> <p>message: "{{ message }}"</p> <p>reversed message: "{{ reversedMessage }}"</p> </div>
二、偵聽器
偵聽器是用來偵聽某個屬性是否被改變的。例如修改message：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Watch</title> </head> <body> <div id="app"> <p>{{ message }}</p> <button @click="clickHandler">修改</button> </div> <script src="static/vue.js"></script> <script> new Vue({ el: "#app", data() { return { message: "leo" } }, methods: { clickHandler() { this.message = 'Alex'; } }, watch: { 'message': function (value) { //todo... alert("message被修改了"); } } }) </script> </body> </html>
當我們點擊修改按鈕的時候，message從"leo"被修改為"Alex"，此時該修改操作會被watch偵聽器所發現，並在修改之前（執行clickHandler之前）執行我們所指定的匿名函數，在頁面上彈出alert框。
三、v-model雙向數據綁定
v-model實現雙向數據綁定的意思是，我們可以在一些輸入標簽（text輸入框、textarea、select、checkbox等）使用v-model，使其值與某個vue屬性綁定。
當我們在輸入框中輸入字符時，vue對應的屬性值也同步變化。這就是數據雙向綁定。
1.手工實現簡單的雙向綁定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>雙向綁定</title> </head> <body> <div id="app"> <input type="text" @input="changeHandler" :value="message"> <br> {{message}} <button @click="clickHandler">leo</button> </div> <script src="static/vue.js"></script> <script> new Vue({ el: "#app", data() { return { message: "" } }, methods:{ clickHandler(){ this.message = "leo"; }, changeHandler(e){ this.message = e.target.value; } } }) </script> </body> </html>
當我們修改text輸入框的值時，觸發oninput事件，changeHandler函數被執行，將輸入框中的值賦值給message。
然后使用v-bind:value來綁定value和message的值，完成另一個方向的綁定。（這里使用v-bind，而不是真正的手工實現。真正的實現，應該要借助於偵聽器，偵聽message值的變化，並賦值給text標簽的value）
2.v-model雙向綁定簡單例子
標簽-->屬性的綁定方向：
簡單例子：
<body> <div id="app"> <input type="text" v-model="message"> <p>{{message}}</p> </div> <script src="static/vue.js"></script> <script> new Vue({ el: "#app", data() { return { message: "" } } }) </script> </body>
我們給text輸入框綁定了message屬性，message的初始值是空字符串，實現效果：
3.v-model簡單例子2
屬性-->標簽的綁定方向：
當我們直接在某個事件函數中修改message屬性的值，輸入框中的值也會對應發生同步變化：
<body> <div id="app"> <input type="text" v-model="message"> <br> <button @click="changeValue">將message的值修改為"hello world"</button> </div> <script src="static/vue.js"></script> <script> new Vue({ el: "#app", data() { return { message: "" } }, methods:{ changeValue(){ this.message = "hello world"; } } }) </script> </body>
實現效果：
當我們點擊"將message的值修改為'hello world'"按鈕是，text中的值也改變了。
4.各種表單輸入標簽的雙向綁定
主要是注意每種輸入標簽綁定的值的類型，例如bool、列表、字符串。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>雙向綁定</title> </head> <body> <div id="app"> <div> <!-- text輸入框 --> <input type="text" v-model="message"> </div> <div> <!-- textarea輸入框 --> <textarea v-model="message" placeholder="add multiple lines"></textarea> </div> {{message}} <hr> <div> <!-- 單個復選框 --> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> </div> <hr> <div id='example-3'> <!-- 多個復選框 --> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames }}</span> </div> <hr> <div id="example-4"> <!-- 單選按鈕 --> <input type="radio" id="one" value="One" v-model="picked"> <label for="one">One</label> <br> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Two</label> <br> <span>Picked: {{ picked }}</span> </div> <hr> <div id="example-5"> <!-- select 單選 --> <select v-model="selected"> <option disabled value="">請選擇</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> </div> <hr> <div id="example-6"> <!-- select多選 --> <select v-model="multiselected" multiple style="width: 50px;"> <option>A</option> <option>B</option> <option>C</option> </select> <br> <span>Selected: {{ multiselected }}</span> </div> <hr> </div> <script src="static/vue.js"></script> <script> new Vue({ el: "#app", data() { return { message: "", // text和textarea文本輸入框 checked: false, // 單個復選框 checkedNames: [], //多個復選框 picked: '', // 單選按鈕 selected: '', // select，單選時 multiselected: [] // select，多選時 } }, methods: {} }) </script> </body> </html>
實現效果：
5.v-for實現動態選項
<body> <div id="app"> <select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> </select> <span>Selected: {{ selected }}</span> </div> <script src="static/vue.js"></script> <script> new Vue({ el: "#app", data() { return { selected: 'A', options:[ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ] } } }) </script> </body>
select標簽中的option是使用v-for遍歷options列表屬性動態生成的。
6.v-model與v-bind配合實現動態值綁定
<body> <div id="app"> <input id='rad1' type="radio" v-model="pick" v-bind:value="a"> <label for="rad1">Leo</label> <input id='rad2' type="radio" v-model="pick" v-bind:value="b"> <label for="rad2">Alex</label> <br> pick:{{pick}} </div> <script src="static/vue.js"></script> <script> new Vue({ el: "#app", data() { return { pick: '', a: {name: 'leo'}, b: {name: 'alex'} } } }) </script> </body>
實現結果：
我們發現，v-model雙向綁定的屬性pick的值是來自value屬性的，value屬性由和a、b綁定，a、b可能是字符串、布爾值、或者對象等任意類型。
在5.中，也是這種用法，而且5.中使用的是循環獲取動態值來產生動態選項。
四、v-model修飾符
1.lazy
lazy修飾符的作用是當我們進行了雙向綁定后，在我們輸入的使用，不對綁定的屬性賦值，而是等我們輸入完后使用回車，或光標切換到其他標簽時，值才會賦予綁定的屬性：
<body> <div id="app"> <input type="text" v-model.lazy="message"/> <br> message:{{message}} <br> <input type="text"/> </div> <script src="static/vue.js"></script> <script> new Vue({ el: "#app", data() { return { message:"" } } }) </script> </body>
實現效果：
2.number
number修飾符是讓輸入框中只有輸入數字才有效（輸入e3或e-3這種科學計數法可以）。
<body> <div id="app"> <input type="text" v-model.number="number"/> <br> message:{{number}} <br> <input type="text"/> </div> <script src="static/vue.js"></script> <script> new Vue({ el: "#app", data() { return { number:0 } } }) </script> </body>
實現效果：
3.trim
trim修飾符是清除輸入數據前面和后面的空格。
<body> <div id="app"> <input type="text" v-model.trim="trimedstring"/> <br> trimedstring:{{trimedstring}} <br> <input type="text"/> </div> <script src="static/vue.js"></script> <script> new Vue({ el: "#app", data() { return { trimedstring:'' } } }) </script> </body>
實現效果：
注意，字符串中間有空格的話，不管有多少個，都只保存一個空格。前面的空格會被直接去掉。
☜(ˆ▽ˆ)