提醒

原帖完整收藏於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>

原始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