1.v-bind
可簡寫為"："
你看到的 v-bind 等被稱為指令。指令帶有前綴 v-，以表示它們是 Vue 提供的特殊特性。
我們可以使用 v-bind 來綁定元素特性!
在這里，該指令的意思是：“將這個元素節點的 title 特性和 Vue 實例的 message 屬性保持一致”。
注：使用 v-* 屬性綁定數據是不需要 {} 包裹的
1 <!DOCTYPE html> 2 <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <div id="vue"> 10 <span v-bind:title="message"> 11 鼠標懸停幾秒鍾查看此處動態綁定的提示信息！ 12 </span> 13 14 </div> 15 16 <!--導入Vue.js--> 17 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> 18 <script type="text/javascript"> 19 let vm = new Vue({ 20 el: '#vue', //綁定元素的 ID 21 data: { //數據對象中有一個名為 message 的屬性，並設置了初始值 22 message: 'Hello Vue!' 23 } 24 }); 25 </script> 26 </body> 27 </html>
2.v-if，v-else
條件判斷語句
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="vue"> 9 <h1 v-if="ok">YES</h1> 10 <h1 v-else>NO</h1> 11 12 13 </div> 14 15 <!--導入Vue.js--> 16 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> 17 <script type="text/javascript"> 18 let vm = new Vue({ 19 el: '#vue', //綁定元素的 ID 20 data: { //數據對象中有一個名為 message 的屬性，並設置了初始值 21 ok: true 22 } 23 }); 24 </script> 25 </body> 26 </html>
3.v-else-if
- v-if
- v-else-if
- v-else
注： === 三個等號在 JS 中表示絕對等於（就是數據與類型都要相等）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="vue"> 9 10 <h1 v-if="type === 'A'">A</h1> 11 <h1 v-else-if="type === 'B'">B</h1> 12 <h1 v-else-if="type === 'C'">C</h1> 13 <h1 v-else>who</h1> 14 15 </div> 16 17 <!--導入Vue.js--> 18 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> 19 <script type="text/javascript"> 20 let vm = new Vue({ 21 el: '#vue', //綁定元素的 ID 22 data: { //數據對象中有一個名為 message 的屬性，並設置了初始值 23 // ok: true 24 type: 'A' 25 } 26 }); 27 </script> 28 </body> 29 </html>
4.v-for
循環數據
格式說明：
1 <div id="vue"> 2 <li v-for="(item, index) in items"> 3 {{item.message}}{{index}} 4 </li> 5 </div>
注： items 是數組， item 是數組元素迭代的別名， index 是數組元素迭代的索引。我們之后學習的Thymeleaf模板引擎的語法和這個十分的相似！
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <!--view層模塊--> 10 <div id="vue"> 11 <li v-for="(item, index) in items"> 12 {{item.message}}{{index}} 13 </li> 14 </div> 15 16 <!--導入Vue.js--> 17 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> 18 <script type="text/javascript"> 19 let vm = new Vue({ 20 el: '#vue', //綁定元素的 ID 21 data: { //數據對象中有一個名為 message 的屬性，並設置了初始值 22 // ok: true 23 // type: 'A' 24 items: [ 25 {message:"編號為1，索引為"}, 26 {message:"編號為2，索引為"}, 27 {message:"編號為3，索引為"} 28 ] 29 } 30 }); 31 </script> 32 </body> 33 </html>
測試 ：在控制台輸入 vm.items.push({message:"編號為4，索引為"}) ，嘗試追加一條數據，你會發現瀏覽器中顯示的內容會增加一條 編號為4，索引為3 .
5.v-on
可簡寫為“@”
事件監聽
語法： v-on:需要監聽的事件=”函數“
1 <!DOCTYPE html> 2 <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <!--view層模塊--> 10 <div id="vue"> 11 <button v-on:click="sayHi">按鈕</button> 12 </div> 13 14 <!--導入Vue.js--> 15 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> 16 <script type="text/javascript"> 17 let vm = new Vue({ 18 el: '#vue', //綁定元素的 ID 19 data: { //數據對象中有一個名為 message 的屬性，並設置了初始值 20 message: "第一個Vue項目" 21 }, 22 methods: { // 方法必須定義在Vue的Methods對象中，v-on:事件 23 sayHi: function (event) { 24 alert(this.message); 25 } 26 } 27 28 }); 29 </script> 30 </body> 31 </html>
6.Vue常用的7個屬性，8個方法以及7個指令（787原則）
7.Vue其他屬性，方法以及指令