模板語法

關鍵詞：[數據綁定]，[指令]

談到到模板語法，我們就會想起數據綁定和指令：

我們可以通過聲明式的方式將DOM綁定至vue實例的數據：

先來聊一聊數據綁定：

1)數據綁定

關鍵詞：[ 插值表達式 ]，[ v-once一次性插值 ]，[ v-html ]，[ 作用於特性v-bind ]

丶數據綁定最常用的形式應該就是「Mustache」語法 (雙大括弧)
的文本插值，無論是vue，還是angular，小程序都採用了這種方式的文本插值

丶而v-once指令也好理解，一次性插值，當我們在改變數據的時候，插值的內容不會隨之改變，寫一個例子：

·插值表達式雙大括弧就將數據解釋為普通文本，而非HTML。使用v-html指令，可以輸出html，但是我們一般不這麼做，對於複雜需復用的用組件代替效果更佳

·Mustache 語法不能作用在 HTML 特性上，我們使用v-bind作用於特性，寫一個例子：

通過v-bind綁定disabled屬性

2）指令

關於指令，上面我們已經用到幾個了，指令是帶有 v- 前綴的特殊屬性，angular中的指令是 ng- 開頭

關鍵詞分類：[ v-bind綁定標籤屬性 ]，[ v-if條件 ]，[ v-for循環 ]，[ v-on綁定事件 ] ，[ v-model雙向綁定 ]，[ v-show顯示隱藏 ]，[ v-text/v-html讀取 ]，[ v-once一次性插值 ]

上面列出了指令關鍵詞的一些分類，對於條件指令：存在v-if，那麼我們就會想到有沒有v-else，v-else-if指令，這點上作者滿足了我們的猜想；

丶v-bind 綁定標籤屬性，說起標籤屬性，我們都知道，class、id、href、disabled...等等這些都是屬於標籤的屬性，上面寫了一個綁定disabled屬性的例子，那麼v-bind對於綁定class是不是那麼得心應手呢？

我們看了一下效果，看來v-bind可以很好的操作標籤屬性，包括class、id等這些

v-if 主要做添加判斷，操作刪除Dom元素，來寫一個簡單的例子：

丶v-for 做循環遍曆數據等，並通過插值表達式將它們輸出到頁面

丶v-on 綁定事件，能綁定的事件有很多：參考 MDN 事件類型一覽表，寫一個click的例子：

丶v-model 雙向綁定 ，使用v-model實現雙向數據綁定，

在看vue雙向數據綁定之前，我們先看一下一個簡單的angular的雙向數據綁定：

計算屬性和觀察者

vue支持內聯表達式，可以完成簡單的布爾操作，字元串拼接；但是如果涉及更複雜的邏輯，就需要用到計算屬性了

關鍵詞：[ 計算屬性computed ]，[ 計算屬性computed VS 方法methods ]，[ 計算屬性computed VS 監聽屬性watch ]，[ 計算屬性的setter ]，[ 偵聽器watch ]

丶計算屬性computed VS 方法methods，特點：計算屬性 依賴緩存，不必每次執行函數，直到相關值發生變化時才重新計算

丶計算屬性computed VS 偵聽watch，特點：watch 過程式，$watch回調

這種情況下，我們往往選擇計算屬性。

丶計算屬性的setter，像上面那樣，一般computed計算屬性默認只有一個getter，但是如果有需要可以提供一個setter給計算屬性；

寫在後面

前端的一些技術都是融會貫通的，學習一門語言或者框架本身並不是為了學習它的技術，最重要的是學習它的思維，只有思維層面得到了延伸，學習其他技術的時候會發現得心應手。

學習vue我往往聯想到小程序，雖然我沒有做過vue的項目，但是做過幾個小程序的項目，發現他們之間或多或少有些相識之處，

比如vue利用data設置暴露數據，小程序利用data和setData()暴露數據；

兩者的列表渲染：vue是v-for循環同時利用for-in迭代器 (item in items) ，小程序wx-for循環同時利用 wx:for-item="item"，angular則是ng-repeat渲染列表

Vue帶給我們的是前端一種解決問題的新的思維，我們應該欣然接受他，也應該欣然接受那些你暫時沒有選擇或者考慮在內的框架。

（轉自博客園）

· 學IT，就來中公優就業：http://www.ujiuye.com/

· 2017年【中公教育】特別推出2017年就業促進計劃，500萬就業基金助你成為IT達人

詳情請戳http：//www.ujiuye.com/zt/jycj/?wt.bd=bgz

· 什麼？海量IT學習資料白給你都不要？別想了，加群搶：584539956

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！