什麼是指令
指令 (Directives) 是帶有 v- 字首的特殊特性。指令特性的值預期是單個 JavaScript 表示式 (v-for 是例外情況，稍後我們再討論)。指令的職責是，當表示式的值改變時，將其產生的連帶影響，響應式地作用於 DOM。
1、v-text和v-html
v-text可以將資料文字渲染到標籤中，需要注意的是，渲染出來的內容只是文字，並不會解析html標籤。結果其實和{{}}模板顯示一致，唯一的區別是模板語法在頁面載入還沒有完成的時候會顯示模板語法本身，而v-text則會隱藏，直到內容被加載出來
v-html和v-text的區別是v-html渲染出來的內容，html標籤是會被解析的
2、v-show
v-show可以根據表示式的值切換css的display屬性，決定內容是否顯示。需要注意的是，v-show只是單純的切換css的display屬性，內容始終都會被創建出來的
3、條件渲染
3.1、v-if
v-if指令用於條件性地渲染一塊內容。這塊內容只會在指令的表示式返回 true 值的時候被渲染.基本使用其實和v-show差不多,但是注意觀察下面的區別 v-if:會隱藏值為false 的內容 v-show:單純的切換css的display屬性，內容始終都會被創建出來
3.2、v-if、v-else-if、v-else
這幾個指令和js語言中的if... else if... else類似
3.3、使用key屬性
Vue 為了能夠儘可能高效地渲染元素，通常會複用已有元素而不是從頭開始渲染。但是，這樣也不總是符合實際需求，所以 Vue 提供了一種方式來表達“這兩個元素是完全獨立的，不要複用它們”。只需新增一個具有唯一值的 key 屬性即可
<ul v-for="n in 10"> <li>{{n}}</li></ul>
4.2、迴圈data中的陣列
<body> <div id='app'> <ul> <li v-for="(n,index) in arr">{{index}}----{{n}}</li> </ul> </div></body><script src="../node_modules/vue/dist/vue.js"></script><script> let vm = new Vue({ el: '#app', data: { arr:["java","python","php"] }, methods: { } })</script>html4.3、迴圈物件<body> <div id='app'> <ul> <li v-for="obj in arr"> <p v-for="(item,key,index) in obj"> {{index}}--{{key}}:{{item}} </p> <br> </li> </ul> </div></body><script src="../node_modules/vue/dist/vue.js"></script><script> let vm = new Vue({ el: '#app', data: { arr:[{ id:1, name:"張三", age:20 },{ id:2, name:"李四", age:28 },{ id:3, name:"王五", age:22 },{ id:4, name:"趙六", age:34 }] }, methods: { } })</script>django4.3、使用key當 Vue 用v-for正在更新已渲染過的元素列表時，它預設用“就地複用”策略。如果資料項的順序被改變，Vue 將不會移動 DOM 元素來匹配資料項的順序，而是簡單複用此處每個元素，並且確保它在特定索引下顯示已被渲染過的每個元素。
這個預設的模式是高效的，但是隻適用於不依賴子元件狀態或臨時 DOM 狀態（例如：表單輸入值）的列表渲染輸出。
為了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，往往需要為每項提供一個唯一的 key 屬性。理想的 key 值是每項都有的唯一 id。例如：