底層實現上, Vue將模板編譯成虛擬DOM渲染函數。結合響應系統,Vue能智能計算出最少需要重新渲染多少組件,并把DOM操作次數減到最少。
### 插值
#### 文本
Mustache是一個JavaScript的模板引擎。
[http://mustache.github.io/mustache.5.html](http://mustache.github.io/mustache.5.html)
{{}}, 雙大括號的文本插值就是Mustache語法。
```
<span>Message: {{ msg }}</span>
```
v-once 指令用來設定一次性插值,當數據改變時,插值處的內容不會更新。
```
<span v-once>這個將不會改變: {{ msg }}</span>
```
#### 原始HTML v-html 指令
雙大括號將數據解釋為普通文本,而不是HTML代碼。如果要輸出真正的HTML,使用v-html 指令
```
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
```
動態渲染任意的HTML會容易導致XSS攻擊。
#### HTML屬性綁定,使用v-bind
大括號的Mustache不能作用在HTML元素的屬性上, 所以要使用v-bind指令。
```
<div v-bind:id="dynamicId"></div>
```
布爾類型的屬性:
```
<button v-bind:disabled="isButtonDisabled">Button</button>
```
如果 isButtonDisabled 的值是 null、undefined 或 false,則 disabled attribute 甚至不會被包含在渲染出來的 <button> 元素中。
#### JavaScript表達式
Vue支持綁定種使用JS的表達式,比如加、條件運算符等:
```
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
```
限制: 只能綁定單個表達式,下面的無效:
```
<!-- 這是語句,不是表達式 -->
{{ var a = 1 }}
<!-- 流控制也不會生效,請使用三元表達式 -->
{{ if (ok) { return message } }}
```
注意: 不應該在模板表達式中試圖訪問用戶定義的全局變量。
### 指令(Directives)
指令式帶有v-前綴的特殊屬性,預期值式單個JS表達式(v-for例外)。
#### 參數
一些指令能夠接收一個參數, 在指令之后以冒號表示, 比如: v-bind指令用于響應式更新HTML的屬性。
```
<a v-bind:href="url">...</a>
```
這里的href是參數,v-bind指令將元素的href屬性與表達式url的值綁定。
v-on指令用于監聽DOM事件, 參數既是監聽的事件名。
#### 動態參數
從2.6.0 開始,可以用方括號括起來的JavaScript表達式作為一個指令的參數。
```
<a v-bind:[attributeName]="url"> ... </a>
```
這里的attributeName會被作為一個JavaScript表達式進行動態求值,求得的值作為最終參數使用。比如attributeName的值為href, 則等價于v-bind:href。
異常狀況下,動態參數的值為null。
因為某些字符,比如空格和引號,在HTML屬性名中式無效的,所以動態參數表達式有一些語法約束。
```
<!-- 這會觸發一個編譯警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>
```
在 DOM 中使用模板時 (直接在一個 HTML 文件里撰寫模板),還需要避免使用大寫字符來命名鍵名,因為瀏覽器會把 attribute 名全部強制轉為小寫:
```
<!--
在 DOM 中使用模板時這段代碼會被轉換為 `v-bind:[someattr]`。
除非在實例中有一個名為“someattr”的 property,否則代碼不會工作。
-->
<a v-bind:[someAttr]="value"> ... </a>
```
#### 修飾符(modifier)
修飾符是以半角句號 . 指明的特殊后綴,用于指出一個指令應該以特殊方式綁定。例如:`.prevent`修飾符告訴`v-on`指令對于觸發的事件調用`event.preventDefault()`:
```
<form v-on:submit.prevent="onSubmit">...</form>
```
### 縮寫
v- 是用來識別Vue特定的前綴,如果高頻使用,稍顯繁瑣。如果在SPA應用中,只有使用Vue框架時,v-前綴就更顯得累贅。因此Vue為v-bind和v-on提供了特定的簡寫。
#### v-bind簡寫
```
<!-- 完整語法 -->
<a v-bind:href="url">...</a>
<!-- 縮寫 -->
<a :href="url">...</a>
<!-- 動態參數的縮寫 (2.6.0+) -->
<a :[key]="url"> ... </a>
```
#### v-on 縮寫
```
<!-- 完整語法 -->
<a v-on:click="doSomething">...</a>
<!-- 縮寫 -->
<a @click="doSomething">...</a>
<!-- 動態參數的縮寫 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>
```
- 引入篇
- 基礎篇
- 快速入手
- 名詞解釋
- Vue語法
- Vue安裝
- Vue實例
- 模板語法
- 計算屬性和偵聽器
- Class與Style綁定
- 條件渲染
- 列表渲染
- 事件處理
- 表單輸入綁定
- 組件基礎
- 進階篇
- 常用模塊
- 單文件組件
- 快速學會Vue Router路由
- Vue Route 進階使用
- Vuex 與狀態管理
- Axios
- Mock.js
- data數據顯示在頁面
- Vue生命周期
- Vue按需加載組件
- 國際化
- 頁面加載進度條 -NProgress
- 自定義主題顏色
- 開發篇
- Vue入門——創建并運行一個Vue項目
- Vue + Element UI 項目創建
- 使用Vue ui項目創建工具在網頁中創建Vue項目
- Vue項目創建入門實例
- Vue CLI
- 創建項目
- 使用Visual Studio Code 開發Vue項目
- 高級篇
- 組件深入
- Vue+Element
- Vue + ElementUI 主題顏色切換
- 工具篇
- 在線代碼編輯器
- 開發工具(IDE,集成開發環境)
- npm(JavaScript包管理工具)介紹
- Node.js(npm)在Windows下安裝
- webpack介紹
- webpack快速實例
- webpack
- 快速入門實例
- 安裝
- 概念
- Nodejs
- 基礎
- npm
- 命令參考
- 命令
- 模塊安裝
- Babel
- 問題解決篇
- ERROR Failed to get response from https://registry.yarnpkg.com/vue-cli-version -marker
- Vue常見問題
- You are using the runtime-only build of Vue where the template compiler is not
- yarn 報unable to get local issuer certificate
- yarn There appears to be trouble with your network connection. Retrying
- Expected Boolean, got String with value "true".
- 項目篇
- 項目創建
- 項目設計
- 頁面
- 開發問題
- 后端
- Spring Boot + Activiti 工作流框架搭建之一
- Spring Boot + Activiti 工作流框架搭建之二
- 工作流
- Java流程框架
- Activiti
- 頁面風格
- green
- blue
- orange
- 參考篇
- 好的Git項目
- Vue的在線js
- 指令
- 開發說明
- JavaScript 高級
- export和import
- JS模塊化規范對比以及在Node.js的實現
- Storage
- ES2015
- scss
- CSS、Sass、SCSS