Vue快速入門
阿新 • • 發佈：2018-05-02
插入 同時 api 實例 HA 自定義指令 雙向數據綁定 amp 元素 Vue.js是當下很火的一個JavaScript MVVM庫，它是以數據驅動和組件化的思想構建的。相比於Angular.js，Vue.js提供了更加簡潔、更易於理解的API，使得我們能夠快速地上手並使用
Vue.js。
如果你之前已經習慣了用jQuery操作DOM，學習Vue.js時請先拋開手動操作DOM的思維，因為Vue.js是數據驅動的，你無需手動操作DOM。它通過一些特殊的HTML語法，將DOM和數據綁定起來。一旦你創建了綁定，DOM將和數據保持同步，每當變更了數據，DOM也會相應地更新。
當然了，在使用Vue.js時，你也可以結合其他庫一起使用，比如jQuery。
MVVM模式
下圖不僅概括了MVVM模式（Model-View-ViewModel），還描述了在Vue.js中ViewModel是如何和View以及Model進行交互的。
反過來，如果改變message的值，文本框的值也會被更新，我們可以在Chrome控制臺進行嘗試。
- 定義View
- 定義Model
- 創建一個Vue實例或"ViewModel"，它用於連接View和Model
雙向綁定示例
反過來，如果改變message的值，文本框的值也會被更新，我們可以在Chrome控制臺進行嘗試。
Vue實例的data屬性指向exampleData，它是一個引用類型，改變了exampleData對象的屬性，同時也會影響Vue實例的data屬性。
Vue.js的常用指令
上面用到的v-model是Vue.js常用的一個指令，那麽指令是什麽呢？ Vue.js的指令是以v-開頭的，它們作用於HTML元素，指令提供了一些特殊的特性，將指令綁定在元素上時，指令會為綁定的目標元素添加一些特殊的行為，我們可以將指令看作特殊的HTML特性（attribute）。 Vue.js提供了一些常用的內置指令，接下來我們將介紹以下幾個內置指令：- v-if指令
- v-show指令
- v-else指令
- v-for指令
- v-bind指令
- v-on指令
v-if指令
v-if是條件渲染指令，它根據表達式的真假來刪除和插入元素，它的基本語法如下：v-if="expression"
expression是一個返回bool值的表達式，表達式可以是一個bool屬性，也可以是一個返回bool的運算式。例如：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <h1>Hello, Vue.js!</h1> <h1 v-if="yes">Yes!</h1> <h1 v-if="no">No!</h1> <h1 v-if="age >= 25">Age: {{ age }}</h1> <h1 v-if="name.indexOf(‘jack‘) >= 0">Name: {{ name }}</h1> </div> </body> <script src="js/vue.js"></script> <script> var vm = new Vue({ el: ‘#app‘, data: { yes: true, no: false, age: 28, name: ‘keepfool‘ } }) </script></html>
註意：yes, no, age, name這4個變量都來源於Vue實例選項對象的data屬性。
- 數據的yes屬性為true，所以"Yes!"會被輸出；
- 數據的no屬性為false，所以"No!"不會被輸出；
- 運算式age >= 25返回true，所以"Age: 28"會被輸出；
- 運算式name.indexOf(‘jack‘) >= 0返回false，所以"Name: keepfool"不會被輸出。
為了再次驗證這一點，可以在Chrome控制臺更改age屬性，使得表達式age >= 25的值為false，可以看到<h1>Age: 28</h1>元素被刪除了。
Vue快速入門