概述
Vue.js 使用了基于 HTML 的模板語法，允許開發者宣告式地將 DOM 系結至底層 Vue 實體的資料，所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規范的瀏覽器和 HTML 決議器決議，
普通文本
資料系結最常見的形式就是使用“Mustache[小胡子]”語法 (雙大括號) 的文本插值，無論何時，系結的資料物件上 msg 屬性發生了改變，插值處的內容都會更新，
1 <span>{{msg}}</span>
通過使用 v-once 指令，執行一次性插值，當資料改變時，內容不會更新，
1 <span v-once>這個將不會改變: {{ msg }}</span>
輸出Html
雙大括號會將資料解釋為普通文本，而非 HTML 代碼，為了輸出真正的 HTML，你需要使用 v-html 指令：
1 <!-- 普通文本 --> 2 <p>Using mustaches: {{ rawHtml }}</p> 3 <!-- html決議 --> 4 <p>Using v-html directive: <span v-html="rawHtml"></span></p>
注意：你的站點上動態渲染的任意 HTML 可能會非常危險，因為它很容易導致 XSS 攻擊，請只對可信內容使用 HTML 插值，絕不要對用戶提供的內容使用插值，
特性
Mustache 語法不能作用在 HTML 特性上，遇到這種情況應該使用 v-bind 指令：
1 <div v-bind:id="dynamicId">我的ID是{{dynamicId}}</div> 2 3 <button v-bind:disabled="isButtonDisabled">Button</button>
注意：如果 isButtonDisabled 的值是 null、undefined 或 false， 則 disabled 特性甚至不會被包含在渲染出來的 <button> 元素中， 只有為true ,才被渲染，
使用 JavaScript 運算式
不僅能系結簡單的屬性鍵值，還提供了完全的 JavaScript 運算式支持，
如下所示：
1 HTML{{ number + 1 }} 2 <br /> 3 {{ ok ? 'YES' : 'NO' }} 4 <br /> 5 {{ message.split('').reverse().join('') }} 6 <br /> 7 <div v-bind:id="'list-' + id">我的id是 list-{{id}}</div>
注意： 每個系結都只能包含單個運算式，陳述句不會生效，
指令
指令的職責是，當運算式的值改變時，將其產生的連帶影響，回應式地作用于 DOM，這里，v-if 指令將根據運算式 seen 的值的真偽來插入/移除 <p> 元素，
1 <p v-if="seen">現在你看到我了</p>
引數
一些指令能夠接收一個“引數”，在指令名稱之后以冒號表示，例如，v-bind 指令可以用于回應式地更新 HTML 特性：
1 <a v-bind:href="url" target="_blank">點擊鏈接Baidu</a>
在這里 href 是引數，告知 v-bind 指令將該元素的 href 特性與運算式 url 的值系結， 另一個例子是 v-on 指令，它用于監聽 DOM 事件：
1 <button v-on:click="doSomething">點擊彈出框</button>
動態引數
你可以使用動態引數為一個動態的事件名系結處理函式：在這個示例中，當 eventName 的值為 "focus" 時，v-on:[eventName] 將等價于 v-on:focus，
1 <a v-bind:[attributename]="url" target="_blank"> 點擊我進入 </a> 2 <br /> 3 <a v-on:[eventname]="doSomething"> ... </a>
注意，引數運算式的寫法存在一些約束：
在 DOM 中使用模板時 (直接在一個 HTML 檔案里撰寫模板)，還需要避免使用大寫字符來命名鍵名，因為瀏覽器會把 attribute 名全部強制轉為小寫：在 DOM 中使用模板時這段代碼會被轉換為 `v-bind:[someattr]`， 除非在實體中有一個名為“someattr”的 property，否則代碼不會作業，
修飾符
修飾符 (modifier) 是以半角句號 . 指明的特殊后綴，用于指出一個指令應該以特殊方式系結，例如，.prevent 修飾符告訴 v-on 指令對于觸發的事件呼叫 event.preventDefault()：
1 <a v-bind:href="url" target="_blank" v-on:click.prevent="doSomething">點擊鏈接Baidu</a>
指令縮寫
Vue 為 v-bind 和 v-on 這兩個最常用的指令，提供了特定簡寫：
1 <!-- v-bind 縮寫 --> 2 <!-- 完整語法 --> 3 <a v-bind:href="url" target="_blank">完整寫法</a> 4 <!-- 縮寫 --> 5 <a :href="url" target="_blank">縮寫法</a> 6 <!-- v-on 縮寫 --> 7 <!-- 完整語法 --> 8 <button v-on:click="doSomething">完整寫法</button> 9 <!-- 縮寫 --> 10 <button @click="doSomething">縮寫法</button>
關于本例子中的完整代碼，如下所示：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>一起學Vue</title> 6 <!-- 開發環境版本，包含了有幫助的命令列警告 --> 7 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 8 9 </head> 10 <body> 11 <div id="app"> 12 <!-- 13 Vue.js 使用了基于 HTML 的模板語法，允許開發者宣告式地將 DOM 系結至底層 Vue 實體的資料， 14 所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規范的瀏覽器和 HTML 決議器決議， 15 --> 16 <h2>普通文本</h2> 17 <!-- 18 資料系結最常見的形式就是使用“Mustache[小胡子]”語法 (雙大括號) 的文本插值，無論何時，系結的資料物件上 msg 屬性發生了改變，插值處的內容都會更新 19 --> 20 <span>{{msg}}</span> 21 <br /> 22 <!-- 23 通過使用 v-once 指令，執行一次性插值，當資料改變時，內容不會更新， 24 --> 25 <span v-once>這個將不會改變: {{ msg }}</span> 26 <h2>輸出Html</h2> 27 <!-- 28 雙大括號會將資料解釋為普通文本，而非 HTML 代碼，為了輸出真正的 HTML，你需要使用 v-html 指令： 29 你的站點上動態渲染的任意 HTML 可能會非常危險，因為它很容易導致 XSS 攻擊， 30 請只對可信內容使用 HTML 插值，絕不要對用戶提供的內容使用插值， 31 --> 32 <!-- 普表文本 --> 33 <p>Using mustaches: {{ rawHtml }}</p> 34 <!-- html決議 --> 35 <p>Using v-html directive: <span v-html="rawHtml"></span></p> 36 <h2>特性</h2> 37 <!-- 38 Mustache 語法不能作用在 HTML 特性上，遇到這種情況應該使用 v-bind 指令： 39 --> 40 <div v-bind:id="dynamicId">我的ID是{{dynamicId}}</div> 41 <!-- 42 如果 isButtonDisabled 的值是 null、undefined 或 false， 43 則 disabled 特性甚至不會被包含在渲染出來的 <button> 元素中， 44 只有為true ,才被渲染 45 --> 46 <button v-bind:disabled="isButtonDisabled">Button</button> 47 <h2>使用 JavaScript 運算式</h2> 48 <!-- 49 每個系結都只能包含單個運算式，陳述句不會生效， 50 我們一直都只系結簡單的屬性鍵值，但實際上，對于所有的資料系結，Vue.js 都提供了完全的 JavaScript 運算式支持， 51 --> 52 HTML{{ number + 1 }} 53 <br /> 54 {{ ok ? 'YES' : 'NO' }} 55 <br /> 56 {{ message.split('').reverse().join('') }} 57 <br /> 58 <div v-bind:id="'list-' + id">我的id是 list-{{id}}</div> 59 <!-- 這是陳述句，不是運算式 --> 60 <!-- {{ var a = 1 }} --> 61 62 <!-- 流控制也不會生效，請使用三元運算式 --> 63 <!-- {{ if (ok) { return message } }} --> 64 <h2>指令</h2> 65 <!-- 66 指令的職責是，當運算式的值改變時，將其產生的連帶影響，回應式地作用于 DOM， 67 這里，v-if 指令將根據運算式 seen 的值的真偽來插入/移除 <p> 元素， 68 --> 69 <p v-if="seen">現在你看到我了</p> 70 <h2>引數</h2> 71 <!-- 72 一些指令能夠接收一個“引數”，在指令名稱之后以冒號表示，例如，v-bind 指令可以用于回應式地更新 HTML 特性： 73 --> 74 <a v-bind:href="url" target="_blank">點擊鏈接Baidu</a> 75 <!-- 76 在這里 href 是引數，告知 v-bind 指令將該元素的 href 特性與運算式 url 的值系結， 77 另一個例子是 v-on 指令，它用于監聽 DOM 事件： 78 --> 79 <br /> 80 <button v-on:click="doSomething">點擊彈出框</button> 81 <h2>動態引數</h2> 82 <!-- 83 注意，引數運算式的寫法存在一些約束，如之后的“對動態引數運算式的約束”章節所述， 84 --> 85 <a v-bind:[attributename]="url" target="_blank"> 點擊我進入 </a> 86 <!-- 87 你可以使用動態引數為一個動態的事件名系結處理函式： 88 在這個示例中，當 eventName 的值為 "focus" 時，v-on:[eventName] 將等價于 v-on:focus， 89 --> 90 <br /> 91 <a v-on:[eventname]="doSomething"> ... </a> 92 <!-- 93 在 DOM 中使用模板時 (直接在一個 HTML 檔案里撰寫模板)，還需要避免使用大寫字符來命名鍵名， 94 因為瀏覽器會把 attribute 名全部強制轉為小寫： 95 在 DOM 中使用模板時這段代碼會被轉換為 `v-bind:[someattr]`， 96 除非在實體中有一個名為“someattr”的 property，否則代碼不會作業， 97 98 --> 99 <h2>修飾符</h2> 100 <!-- 101 修飾符 (modifier) 是以半角句號 . 指明的特殊后綴，用于指出一個指令應該以特殊方式系結， 102 例如，.prevent 修飾符告訴 v-on 指令對于觸發的事件呼叫 event.preventDefault()： 103 --> 104 <a v-bind:href="url" target="_blank" v-on:click.prevent="doSomething">點擊鏈接Baidu</a> 105 <h2>縮寫</h2> 106 <!-- 107 Vue 為 v-bind 和 v-on 這兩個最常用的指令，提供了特定簡寫： 108 --> 109 <!-- 110 v-bind 縮寫 111 --> 112 <!-- 完整語法 --> 113 <a v-bind:href="url" target="_blank">完整寫法</a> 114 <br /> 115 <!-- 縮寫 --> 116 <a :href="url" target="_blank">縮寫法</a> 117 <br /> 118 <!-- 119 v-on 縮寫 120 --> 121 <!-- 完整語法 --> 122 <button v-on:click="doSomething">完整寫法</button> 123 <br /> 124 <!-- 縮寫 --> 125 <button @click="doSomething">縮寫法</button> 126 </div> 127 <script type="text/javascript"> 128 var app=new Vue({ 129 el:'#app', 130 data:{ 131 msg:'hello world!!!', 132 rawHtml:'<span style="color:red;"> 這應該是紅色</span>', 133 dynamicId:'div001', 134 isButtonDisabled:true, 135 number:4, 136 ok:true, 137 message:'welcome to vue!!!', 138 id:'01', 139 seen:true, 140 url:'http://www.baidu.com', 141 attributename:'href', 142 eventname:'click' 143 }, 144 methods:{ 145 doSomething:function(){ 146 alert('hello world!!!'); 147 } 148 } 149 }); 150 </script> 151 </body> 152 </html>View Code
備注
學而時習之，不亦悅乎！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/164483.html
標籤：JavaScript
上一篇：簡單看看es6解構賦值