寫在前面
今年前端屆比較有意思，從大漠窮秋發表文章比較angular和vue，繼而致歉vue作者、社區，從谷歌辭去Angular Developer PM in China一職並且呼吁大家停止各種無謂的爭論；到尤小右(尤雨溪)知乎回應大漠窮秋，表態遺憾大漠窮秋離職，希望世界和平。
其實我覺得更多的是兩者社區、用戶、粉絲態度過激導致爭端，所以我們要懷着一顆理性的心態去看待，切不要黨同伐異。
說了點題外話，進入今天的正題 - -
今天的主題是vue，也是我之前在初步學習vue和angular之后，選擇vue的第二天，因為已經凌晨了，但是我不想去排斥其他，應該多多學習不同前輩們的智慧結晶 ；
之前在圖靈社區讀過一篇文章《Vue作者尤雨溪：以匠人的態度不斷打磨完善vue》，
先來一發福利照 - -
里面也有尤小右一些對於開發vue的想法，總結下來就是：輕量化，快速上手，靈活運用；
也有給我們的一些建議，簡單總結就是：保持好奇心，在業余時間多做嘗試，以興趣為動力，把興趣推進一步，保持一種持續學習，持續研究的狀態，多探索，多嘗試；
前綴有點長，請放下手里的西瓜刀，接下來進入今天的正正題吧~~
模板語法
關鍵詞：[數據綁定]，[指令]
談到到模板語法，我們就會想起數據綁定和指令：
我們可以通過聲明式的方式將DOM綁定至vue實例的數據：
先來聊一聊數據綁定：
1）數據綁定
關鍵詞：[ 插值表達式 ]，[ v-once一次性插值 ]，[ v-html ]，[ 作用於特性v-bind ]
丶數據綁定最常用的形式應該就是“Mustache”語法 (雙大括號) 的文本插值，無論是vue，還是angular，小程序都采用了這種方式的文本插值
丶而v-once指令也好理解，一次性插值，當我們在改變數據的時候，插值的內容不會隨之改變，寫一個例子：
<div id="app9" v-once>這個將不會隨之改變：{{msg}}</div> <script> var app9 = new Vue({ el: '#app9', data: { msg: '我是一次性插入的內容' } }) // => 數據改變，插值內容不會隨之改變 app9.msg = 1; console.log(app9.msg); // => '1' </script>
丶插值表達式雙大括號就將數據解釋為普通文本，而非HTML。使用v-html指令，可以輸出html，但是我們一般不這么做，對於復雜需復用的用組件代替效果更佳
丶Mustache 語法不能作用在 HTML 特性上，我們使用v-bind作用於特性，寫一個例子：
通過v-bind綁定disabled屬性
<input id="app10" type="button" v-model='message' v-bind:disabled="isButtonDisabled"> <script> var app10 = new Vue({ el: '#app10', data: { message: 'v-bind綁定標簽特性', isButtonDisabled: false } }) </script>
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是不是那么得心應手呢？
<style> .red { background: red; } .blue { width: 100px; height: 100px; background: blue; } </style> </head> <body> <div id="box"> <div style="width: 100px;height: 100px;" v-bind:class='isred?"red":"blue"'></div> <div style="width: 100px;height: 100px;" v-bind:class='[{red:"isred"}]'></div> </div> <script> new Vue({ el: "#box", data() { return { isred: false } } }) </script>
我們看了一下效果，看來v-bind可以很好的操作標簽屬性，包括class、id等這些
丶v-if 主要做添加判斷，操作刪除Dom元素，來寫一個簡單的例子：
<div id="box"> <div style="width: 100px;height: 100px;background: black;" v-if="show"></div> <div style="width: 300px;height: 300px;background: blue" v-else=""></div> </div> <script> new Vue({ el: "#box", data(){ return { show: true } } }) </script>
丶v-for 做循環遍歷數據等，並通過插值表達式將它們輸出到頁面
丶v-on 綁定事件，能綁定的事件有很多：參考 MDN 事件類型一覽表，寫一個click的例子：
<div id="app5"> <p>{{message}}</p> <button v-on:click="reverseMessage">逆轉消息</button> </div> <script> var app5 = new Vue({ el: '#app5', data: { message: 'hello v-on!' }, methods: { reverseMessage: function() { this.message = this.message.split('').reverse().join('') } } }) </script>
丶v-model 雙向綁定 ，使用v-model實現雙向數據綁定，
在看vue雙向數據綁定之前，我們先看一下一個簡單的angular的雙向數據綁定：
<div ng-app="myApp"> <div ng-controller="myCtrl"> <p>{{ note }}</p> <input type="text" ng-model="note"> </div> </div> <script> var myModule = angular.module('myApp', []); myModule.controller('myCtrl', ['$scopp', function($scope) { $scope.note = ''; ]); </script>
再來寫一個vue的雙向綁定例子：
<!-- 雙向綁定：v-model --> <div id="app6"> <p>{{message}}</p> <input type="text" v-model="message" v-on:change='textChange'> </div> <script> var app6 = new Vue({ el: '#app6', data: { message: 'hello v-modle!' }, methods: { textChange: function() { console.log(this.message); } } }) </script>
從我個人而言，在這里相比之下，vue的代碼編寫風格更加簡潔，通俗易懂；
計算屬性和觀察者
vue支持內聯表達式，可以完成簡單的布爾操作，字符串拼接；但是如果涉及更復雜的邏輯，就需要用到計算屬性了
關鍵詞：[ 計算屬性computed ]，[ 計算屬性computed VS 方法methods ]，[ 計算屬性computed VS 監聽屬性watch ]，[ 計算屬性的setter ]，[ 偵聽器watch ]
丶計算屬性computed VS 方法methods，特點：計算屬性 依賴緩存，不必每次執行函數，直到相關值發生變化時才重新計算
丶計算屬性computed VS 偵聽watch，特點：watch 過程式，$watch回調
<div id="app11"> <p>Original message:"{{ message }}"</p> <p>Computed reversed message:"{{ reversedMessage1 }}"</p> </div> <div id="app12">{{fullName}}</div> <script> // 計算屬性 var app11 = new Vue({ el: '#app11', data: { message: 'Hello' }, computed: { // 計算屬性的getter reversedMessage1: function() { return this.message.split('').reverse().join(''); } } }) // watch偵聽屬性 var app12 = new Vue({ el: '#app12', data: { firstName: 'foo', lastName: 'bar', fullName: 'foo bar' }, watch: { firstName: function(val) { this.fullName = val + ' ' + this.lastName; }, lastName: function(val) { this.fullName = this.firstName + ' ' + val; } } }) </script>
這種情況下，我們往往選擇計算屬性。
丶計算屬性的setter，像上面那樣，一般computed計算屬性默認只有一個getter，但是如果有需要可以提供一個setter給計算屬性；
<div id="app13">{{fullName}}</div> <script> // 計算屬性的setter var app13 = new Vue({ el: '#app13', data: { firstName: 'okay', lastName: 'chen', fullName: 'okay chen' }, computed: { fullName: { // getter get: function() { return this.firstName + ' ' + this.lastName }, // setter set: function(newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } } }) app13.fullName = 'john Doe'; console.log(app13.fullName); </script>
寫在后面
前端的一些技術都是融會貫通的，學習一門語言或者框架本身並不是為了學習它的技術，最重要的是學習它的思維，只有思維層面得到了延伸，學習其他技術的時候會發現得心應手。
學習vue我往往聯想到小程序，雖然我沒有做過vue的項目，但是做過幾個小程序的項目，發現他們之間或多或少有些相識之處，
比如vue利用data設置暴露數據，小程序利用data和setData()暴露數據；
兩者的列表渲染：vue是v-for循環同時利用for-in迭代器 (item in items) ，小程序wx-for循環同時利用 wx:for-item="item"，angular則是ng-repeat渲染列表
Vue帶給我們的是前端一種解決問題的新的思維，我們應該欣然接受他，也應該欣然接受那些你暫時沒有選擇或者考慮在內的框架；