一、初步了解
Vue.js是一套構建用戶界面的漸進式框架，它只關注視圖層， 采用自底向上增量開發的設計。
Vue 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件，相當於JavaScript MVVM庫，它是以數據驅動和組件化的思想構建的。
ViewModel是Vue.js的核心，它是一個Vue實例。Vue實例是作用於某一個HTML元素上的，這個元素可以是HTML的body元素，也可以是指定了id的某個元素。
使用Vue的過程就是定義MVVM各個組成部分的過程的過程。
- 定義View
- 定義Model
- 創建一個Vue實例或"ViewModel"，它用於連接View和Model
在創建Vue實例時，需要傳入一個選項對象，選項對象可以包含數據、掛載元素、方法、模生命周期鈎子等等。
例1：
<div id="vue_det"> <h1>姓名 : {{name}}</h1> <h1>愛好 : {{hobby}}</h1> <h1>{{details()}}</h1> </div> <script type="text/javascript"> var vm = new Vue({ el: '#vue_det', data: { name: "糖果波", hobby: "吃喝玩樂", alexa: "10000" }, methods: { details: function() { return this.name+ "喜歡"+this.hobby; } } }) vm.alexa= "1234" document.write(vm.alexa) </script>
獲得以下結果：
例2:
<div id="app"> {{5+5}}<br> //結果10 {{ ok ? 'YES' : 'NO' }}<br> //結果YES {{ message.split('').reverse().join('') }} //結果BOONUR </div> <script> new Vue({ el: '#app', data: { ok: true, message: 'RUNOOB' } }) </script>
二、data值改變
Vue實例的data屬性指向exampleData，它是一個引用類型，改變了exampleData對象的屬性，同時也會影響Vue實例的data屬性。
當下面實例中變量data 進行改變時，定義實例中的data也會改變；當實例中的data改變時，變量data也會隨之改變。
<div id="vue_det"> <h1>site : {{site}}</h1> <h1>url : {{url}}</h1> <h1>Alexa : {{alexa}}</h1> </div> <script type="text/javascript"> // 我們的數據對象 var data = { site: "教程", url: "www.baidu.com", alexa: 10000} var vm = new Vue({ el: '#vue_det', data: data }) // 它們引用相同的對象！ document.write(vm.site === data.site) // true document.write("<br>") // 設置屬性也會影響到原始數據 vm.site = "aa" document.write(data.site + "<br>") // Runoob // ……反之亦然 data.alexa = 1234 document.write(vm.alexa) // 1234 </script>
得到如下結果：
三、指令
（1）v-bind
v-bind主要是綁定html標簽中的一個或多個屬性，例如 href，class，name，可以在其名稱后面帶一個參數，中間放一個冒號隔開。例：
<a v-bind:href="url">小飛飛的博客</a> //注意這里面的url不能直接寫網址！，只能寫變量傳參數才可以 //錯誤示范：v-bind:href="http://blog.csdn.net/qq_37983691" <script> new Vue({ data:{ url:"http://blog.csdn.net/qq_37983691" } }) <script>
對於綁定class只能用如下綁定方式：
第一個參數class的名稱，第二個是一個boolean值，就是true，false, 如果是true的話這個綁定的class才生效啊！
v-bind:class=”{className:boolean}”
//錯誤的綁定方式：v-bind:class=”sb”，v-bind:class=”{bigSb}”
以下例子是class綁定及監聽事件改變屬性。
<style> .aa { background: #444; color: #eee; } </style> <body> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id="app"> <label for="r1">修改顏色</label> <input type="checkbox" v-model="class1" id="r1"> <button v-on:click="changeColor">點擊</button> <br> <br> <div v-bind:class="{'aa': class1}"> v-bind:class 指令 </div> </div> <script> new Vue({ el: '#app', data: { class1: false }, methods: { changeColor: function () { if (this.class1 == true) { this.class1 = false } else { this.class1 = true } } } }); </script> </body>
得到如下結果:
另一種class綁定方法：
<div v-bind:class="classObject"></div> <script> new Vue({ el: '#app', data: { classObject: { active: true, 'text-danger': false } } }); </script>
綁定多個class:
<div v-bind:class="[activeClass, errorClass]"></div> <script> new Vue({ el: '#app', data: { activeClass: 'active', errorClass: 'text-danger' } } }); </script>
綁定id:
<div id="app"> <div v-bind:id="'list-' + id">List</div> //id為"list-1" </div> <script> new Vue({ el: '#app', data: { id : 1 } }) </script>
綁定style:
<div id="app"> <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> </div> <script> new Vue({ el: '#app', data: { activeColor: 'red', fontSize: 30 } }) </script>
<div id="app"> <div v-bind:style="styleObject"></div> </div> <script> new Vue({ el: '#app', data: { styleObject: { color: 'red', fontSize: '13px' } } }) </script>
（2）v-model
v-model用於表單數據的雙向綁定，v-model只能用在：<input> <select> <textarea> <components> <checkbox> <radio>等表單數據中；
在下面實例中，如果<p>中文本進行變化，<input>中的文本也會隨之變化；反之亦然。
以下是單選框和復選框雙向綁定的應用：
<div id="app"> <p>單個復選框：</p> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> <p>多個復選框：</p> <input type="checkbox" id="tang" value="糖" v-model="checkedNames"> <label for="tang">糖</label> <input type="checkbox" id="guo" value="果" v-model="checkedNames"> <label for="guo">果</label> <input type="checkbox" id="bo" value="波" v-model="checkedNames"> <label for="bo">波</label> <br> <span>選擇的值為: {{ checkedNames }}</span> </div> <script> new Vue({ el: '#app', data: { checked : false, checkedNames: [] } }) </script>
得到如下結果：
以下是input框與文本框雙向綁定的應用：
<div id="app"> <h1>input 元素：</h1> <p>{{ message }}</p> <input type="text" v-model="message"/> <h1>textarea 元素：</h1> <p style="white-space: pre">{{ message2 }}</p> <textarea v-model="message2" placeholder="多行文本輸入……" style="width:300px;"></textarea> </div> <script type="text/javascript"> new Vue({ el: '#app', data: { message: '糖果波', message2: 'Vue.js教程\r\nhttps://vuejs.bootcss.com/support-vuejs/' } }) </script>
得到如下結果：
（3）v-html
v-html用來輸出 html 代碼。
<div id="app"> <div v-html="message"></div> </div> <script> new Vue({ el: '#app', data: { message: '<h1>糖果波</h1>' } }) </script>
（4）條件判斷指令v-if、v-else、v-else-if、v-show
注意：v-else 、v-else-if 必須跟在 v-if 或者 v-else-if之后。
①v-if
v-if根據條件的true或false來判斷元素是否插入
<div id="app"> <p v-if="seen">未插入的存在</p> <template v-if="ok"> <h1>糖果波</h1> <h2>潤潤家的糖果波</h2> </template> </div> <script> new Vue({ el: '#app', data: { seen: false, ok: true } }) </script>
②v-else
下面的例子給一個隨機數，判斷是否大於0.5，大於輸出Yes，否則輸出No。
<div id="app"> <div v-if="Math.random() > 0.5">Yes</div> <div v-else>No</div> </div> <script> new Vue({ el: '#app' }) </script>
③v-else-if
v-else-if 在 2.1.0 新增，用作 v-if 的 else-if 塊。可以鏈式的多次使用：
<div id="app"> <div v-if="name === '糖'"> 糖 </div> <div v-else-if="name === '果'"> 果 </div> <div v-else-if="name === '波'"> 波 </div> <div v-else> 潤潤家的糖果波 </div> </div> <script> new Vue({ el: '#app', data: { name: '波' } }) </script>
④v-show
v-show根據條件的true或false來判斷元素是否可見
<div id="app"> <p v-if="seen">看不見的存在</p> <template v-if="ok"> <h1>糖果波</h1> <h2>潤潤家的糖果波</h2> </template> </div> <script> new Vue({ el: '#app', data: { seen: false, ok: true } }) </script>
注意：
1、v-show 不支持 <template> 元素，也不支持 v-else。
2、v-if用來判斷元素是否插入DOM中；v-show已經在DOM中，只是用來判斷元素是否可見，相當於CSS中的display屬性。
3、不推薦同時使用 v-if 和 v-for。當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先級。
（5）v-for 循環
v-for 指令根據一組數組的選項列表進行渲染。v-for 指令需要使用 item in items 形式的特殊語法，items 是源數據數組並且 item 是數組元素迭代的別名。
<div id="app"> <ol> <li v-for="site in sites"> {{ site.name }} </li> </ol> </div> <script> new Vue({ el: '#app', data: { sites: [ { name: '張三' }, { name: '李四' }, { name: '王五' } ] } }) </script>
模板中使用：
<div id="app"> <ul> <template v-for="site in sites"> <li>{{ site.name }}</li> <li>--------------</li> </template> </ul> </div> <script> new Vue({ el: '#app', data: { sites: [ { name: '張三' }, { name: '李四' }, { name: '王五' } ] } }) </script>
可以使用多個key 或 index作為參數：
<div id="app"> <ul> <li v-for="(value, key, index) in object"> {{ index }}. {{ key }} : {{ value }} </li> </ul> </div> <script> new Vue({ el: '#app', data: { object: { name: '糖果波', sex: '女', job: 'GIS軟件工程師' } } }) </script>
通過V-for建立表格：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 建立表格</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> //在線調用菜鳥教程的Vue.js </head> <body> <div id="app"> <table> <thead> <tr> <th>Name</th> <th>Age</th> <th>Sex</th> </tr> </thead> <tbody> <tr v-for="person in people"> <td>{{ person.name }}</td> <td>{{ person.age }}</td> <td>{{ person.sex }}</td> </tr> </tbody> </table> </div> <script> var vm = new Vue({ el: '#app', data: { people: [{ name: 'Jack', age: 30, sex: 'Male' }, { name: 'Bill', age: 26, sex: 'Male' }, { name: 'Tracy', age: 22, sex: 'Female' }, { name: 'Chris', age: 36, sex: 'Male' }] } }) </script> </body> </html>
整數的循環：
<div id="app"> <ul> <li v-for="n in 10"> {{ n }} </li> </ul> </div> <script> new Vue({ el: '#app' }) </script>
（6）v-on 事件監聽
v-on 指令可以進行事件監聽
下面的例子用來監聽click事件次數並增加屬性值：
<div id="app"> <button v-on:click="counter += 1">點擊按鈕</button> <p>這個按鈕被點擊了 {{ counter }} 次。</p> </div> <script> new Vue({ el: '#app', data: { counter: 0 } }) </script>
其中methods中寫用來接收事件處理方法，可以寫入js語句：
<div id="app"> <button v-on:click="say('糖果波')">Say Name</button> <button v-on:click="say('你好')">Say hi</button> </div> <script> new Vue({ el: '#app', methods: { say: function (message) { alert(message) } } }) </script>
其他事件修飾符：
<!-- 阻止單擊事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重載頁面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修飾符可以串聯 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修飾符 --> <form v-on:submit.prevent></form> <!-- 添加事件偵聽器時使用事件捕獲模式 --> <div v-on:click.capture="doThis">...</div> <!-- 只當事件在該元素本身（而不是子元素）觸發時觸發回調 --> <div v-on:click.self="doThat">...</div> <!-- click 事件只能點擊一次，2.1.4版本新增 --> <a v-on:click.once="doThis"></a>
其他按鍵修飾符：
<!-- 只有在 keyCode 是 13 時調用 vm.submit() --> <input v-on:keyup.13="submit"> <!-- 常用鍵盤按鍵別名 --> <input v-on:keyup.enter="submit"> <!-- 鍵盤enter鍵 --> <input v-on:keyup.tab="submit"> <input v-on:keyup.delete ="submit"> <!-- 鍵盤delete鍵和退格鍵 --> <input v-on:keyup.esc="submit"> <input v-on:keyup.space="submit"> <input v-on:keyup.up="submit"> <input v-on:keyup.down="submit"> <input v-on:keyup.left="submit"> <input v-on:keyup.right="submit"> <input v-on:keyup.ctrl="submit"> <input v-on:keyup.alt="submit"> <input v-on:keyup.shift="submit"> <input v-on:keyup.meta="submit">
四、縮寫
只有v-bind和v-on有縮寫
<!-- v-bind --> <!-- 完整語法 --> <a v-bind:href="url"></a> <!-- 縮寫 --> <a :href="url"></a> <!-- v-on --> <!-- 完整語法 --> <a v-on:click="doSomething"></a> <!-- 縮寫 --> <a @click="doSomething"></a>