提醒

原帖完整收藏於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的時候才會被渲染。

總結

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

參考