Vue：學習筆記（三）-模板語法

提醒

原帖完整收藏於IT老兵驛站，並會不斷更新。

前言

忙了三週，又度過一個豐富的十一，如今騰出手來，繼續個人學習和總結。最近找到了Vue的中文網站，可是我不想放棄對英文網站的學習，那樣能夠更準確地理解原意，能夠提升本身的英文水平，因此基於英文網站，對照着中文，這樣來學習----人仍是應該有些追求。我發現一個問題，有的章節內容多，有的章節內容少，內容多的，可能一天總結不完，那就可能須要拆成幾篇連續的筆記來記錄了。

正文

模板語法

Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying Vue instance’s data. All Vue.js templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers.

Under the hood, Vue compiles the templates into Virtual DOM render functions. Combined with the reactivity system, Vue is able to intelligently figure out the minimal number of components to re-render and apply the minimal amount of DOM manipulations when the app state changes.

If you are familiar with Virtual DOM concepts and prefer the raw power of JavaScript, you can also directly write render functions instead of templates, with optional JSX support.

我對這裏的理解是，模板是一種工具，它不須要你去查找元素，進行賦值等處理（傳統的方式），而是進行了單向或者雙向的綁定，這樣你直接操做這個變量，就是在操做DOM中的那個元素（虛擬DOM樹的概念），另外，模板會在合適的時候，進行渲染，這樣減小由於頻繁的渲染頁面的抖動。

插值（Interpolations）

最先接觸這個概念是在對AngularJS的學習中，應該是AngularJS最先引入了這個概念。

文本

<span>Message: {{ msg }}</span>
雙大括號的語法，裏面是插值的變量名，變量發生改變，這裏也會同時發生改變。

<span v-once>這個將不會改變: {{ msg }}</span>
使用 v-once 指令，執行一次性地插值。

原始HTML

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

雙大括號裏面包含的內容，會以純文本的形式顯示出來，不會交由瀏覽器去解釋。
而想要瀏覽器去解釋這些內容，則須要使用v-html，例如上例。
rawHtml的內容實際上是<span style="color: red">This should be red.</span>，則上例的實際顯示以下（這個例子原帖講的有一點不清楚）：

Using mustaches: <span style="color: red">This should be red.</span>

Using v-html directive: This should be red.（這裏應該是紅色，爲了讓這裏顯示紅色，我還研究了一下MD語法，參考這裏）

不過通常不建議這麼用，由於這樣就太容易給XSS（跨站攻擊，互聯網最多見的一種攻擊形式，未來有機會也會總結一下）攻擊創造機會。

特性（attribute）

這一節其實應該叫屬性，不過多是爲了和property區別，這裏刻意翻譯成了特性，實際上是指HTML裏面元素的屬性，關於HTML元素的名、值、屬性的關係能夠參考早年寫的一篇帖子，那篇講的是XML，HTML其實一種特殊化的XML，原理是同樣的。由於習慣了，如下我仍是稱呼這個爲屬性。

屬性無法使用Mustache語法，因此就須要有新的指令（directive），指令也應該是AngularJS引入的一個概念，實際上是能夠被Vue解釋的一些固定的字符串，能夠接收參數，具備必定的功能。

<div v-bind:id="dynamicId"></div>

這樣id屬性就和dynamicId綁定起來了。

不過，對於disabled屬性，有點區別，只有當它爲true的時候纔會被渲染。

使用 JavaScript 表達式

Vue支持單個表達式的綁定，以下：

{{ number + 1 }}
{{ ok ? ‘YES’ : ‘NO’ }}
{{ message.split(’’).reverse().join(’’) }}

可是不支持：

{{ var a = 1 }}
{{ if (ok) { return message } }}

有幾點很關鍵：

這些表達式會在所屬 Vue 實例的數據做用域下做爲 JavaScript 被解析。有個限制就是，每一個綁定都只能包含單個表達式，因此下面的例子都不會生效。

模板表達式都被放在沙盒中，只能訪問全局變量的一個白名單，如 Math 和 Date 。你不該該在模板表達式中試圖訪問用戶定義的全局變量。

指令

指令 (Directives) 是帶有 v- 前綴的特殊特性。指令特性的值預期是單個 JavaScript 表達式 (v-for 是例外狀況，稍後咱們再討論)。指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地做用於 DOM。

指令能夠理解成爲一些已經有固化邏輯的函數，它把DOM樹和用戶的變量關聯起來。

參數

<a v-bind:href="url">...</a>
<a v-on:click="doSomething">...</a>
上面這兩個指令是帶有參數的，分別是href和click。

<p v-if="seen">如今你看到我了</p>
上面這個指令是不帶參數的。

修飾符

修飾符 (Modifiers) 是以半角句號 . 指明的特殊後綴，用於指出一個指令應該以特殊方式綁定。例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件調用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit">...</form>

這個地方有點含糊，這裏涉及到了Web API裏面的event，這個地方的意思應該是對於submit事件，綁定onSubmit這個方法，而且調用event.preventDefault()，組織默認的行爲發生。

縮寫

v-bind的縮寫：

<!-- 完整語法 -->
<a v-bind:href="url">...</a>

<!-- 縮寫 -->
<a :href="url">...</a>

v-on的縮寫：

<!-- 完整語法 -->
<a v-on:click="doSomething">...</a>

<!-- 縮寫 -->
<a @click="doSomething">...</a>

總結

讀了原帖大概兩遍，閱讀、理解加上寫筆記，一共花費了大概三個小時，感受再寫下去，耐心就會下降，質量就會下降，會有一些應付的情緒，只好先告一段落，這個部分的內容分爲兩篇文章了。

今天感受，剩餘的內容也不是不少了，仍是合爲一篇筆記比較合理，便於未來複習。

參考

https://vuejs.org/v2/guide/syntax.html
https://cn.vuejs.org/v2/guide/components.html
https://blog.csdn.net/liuhw4598/article/details/78279737
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onsubmit
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault