一塊兒學Vue之模板語法

時間 2019-12-09

標籤一塊兒 vue 模板語法简体版

原文原文鏈接

概述

Vue.js 使用了基於 HTML 的模板語法，容許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。全部 Vue.js 的模板都是合法的 HTML ，因此能被遵循規範的瀏覽器和 HTML 解析器解析。javascript

普通文本

數據綁定最多見的形式就是使用「Mustache[小鬍子]」語法 (雙大括號) 的文本插值，不管什麼時候，綁定的數據對象上 msg 屬性發生了改變，插值處的內容都會更新。html

1 <span>{{msg}}</span>

經過使用 v-once 指令，執行一次性插值，當數據改變時，內容不會更新。vue

1 <span v-once>這個將不會改變: {{ msg }}</span>

輸出Html

雙大括號會將數據解釋爲普通文本，而非 HTML 代碼。爲了輸出真正的 HTML，你須要使用 v-html 指令：java

1 <!-- 普通文本 -->
2 <p>Using mustaches: {{ rawHtml }}</p>
3 <!-- html解析 -->
4 <p>Using v-html directive: <span v-html="rawHtml"></span></p>

注意：你的站點上動態渲染的任意 HTML 可能會很是危險，由於它很容易致使 XSS 攻擊。請只對可信內容使用 HTML 插值，毫不要對用戶提供的內容使用插值。npm

特性

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 ,才被渲染。app

使用 JavaScript 表達式

不只能綁定簡單的屬性鍵值，還提供了徹底的 JavaScript 表達式支持。ide

以下所示：函數

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>

注意：每一個綁定都只能包含單個表達式，語句不會生效。url

指令

指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地做用於 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>