最近項目剛完成，手上工作稍微輕松些，准備儲備下技術，為未來挑戰做好准備。
之前項目用的較多的是angulajs，不過版本較老，還停留在1.5x系，雖然結合了webpack，es2015等前沿技術，但理解並不深入。也做個兩個react的項目和一個react-native小東西，都是不懂現查資料，沒有系統學習過。三大前端框架就沒接觸過Vue了，所以打算拿它從小白學起，也順便寫個完整學習心得。
以前學習angularjs是在菜鳥教程學的，看了2天直接上了項目，第一個項目用的還是原始方式，html文件中引入css和js，所以上手比較快。后來項目改進到結合webpack和es2015，自動化構建，熱刷新等，不過是在別人基礎上搭建的后續開發，邊做邊學，還算OK。
這次學習Vue打算從官網入手。
以上圖片為官網首頁點擊“起步”進入鏈接的左側導航欄，因為有之前的前端經驗，所以第一部分覺得還是蠻簡單的，基本都看懂了；第二部分就有一些特殊邏輯了，但基本上也都能理解；第三部分內容都較少，但都給到了額外的鏈接，鏈接里面的內容都是單獨的知識點，后面會重點說；第四部分無關緊要了，沒有要遷移升級的項目，看了下與其他框架的對比，大體意思就是，Vue靈感來自angularjs，但要比它進步的多，React能做到的功能Vue基本也都能做，React無非就是比較早，整個生態系統比較完善，但是Vue也不差，而且Vue沒有React的那些缺點！雖然語氣都比較謙和，但總歸是要傳遞一個信息：Vue是最牛逼的！這也無可厚非，不然誰還學~~ ：）
縮寫： v-bind: => : v-on: => @ v-slot: => # var _date = { a : 1 , data : 2}; var app = new Vue({ el:"#app", data: _data }) app.$data != app.data ,app.data 為_data.data app.$data === _data app.a = _data.a Object.freeze(_data); 阻止修改_data //監控 app.$witch("a",function(n,o){}) 生命周期：create -> mount -> update -> destroy 生命周期：init Event -> beforeCreate -> init Injections -> created -> compile -> beforeMount -> create $el -> mounted -> beforeUpdate -> virtual dom -> updated -> beforeDestroy -> destroyed v-html 注意防止xss攻擊 表達式 指令 動態參數 v-bind:[] v-on:[] 修飾符 v-on:submit.prevent="onSubmit" 計算屬性：computed 緩存 方法：methods 不緩存 監聽器：watch 或 app.$watch 自定義控件：Vue.component("name",{ template:`html內容` }) 綁定class使用v-bind:class="[className1,className2]" 綁定style使用v-bind:style="[styleName1,styleName2]" v-if v-else v-else-if 取消復用：獨立key v-show不支持<template>元素，也不支持v-else 不推薦同時使用v-if和v-for ，詳情查看風格指南：https://cn.vuejs.org/v2/style-guide/#%E9%81%BF%E5%85%8D-v-if-%E5%92%8C-v-for-%E7%94%A8%E5%9C%A8%E4%B8%80%E8%B5%B7-%E5%BF%85%E8%A6%81 v-for="(item, index) in items" v-for="item of items" 包含index？ v-for="value in object" 遍歷對象object v-for="(value,name) in object" 遍歷對象object v-for="(value,name,index) in object" 遍歷對象object 建議盡可能在使用v-for時提供key 替換數組match有點懵逼。。。 app.arrayList[2] = "222"，不能檢測到變動，貌似ng可以。。。 vue可以使用的方法是：Vue.set(vm.items, indexOfItem, newValue) 或 app.$set(vm.items, indexOfItem, newValue) 或 app.items.splice(indexOfItem, 1, newValue) Vue.set(object, propertyName, value) 方法向"嵌套對象"添加響應式屬性。 修飾符： v-on:click.prevent.stop.self.once.capture.passive v-on:keyup.enter @keyup.ctrl.enter v-on:click.ctrl.exact @click.exact v-on:click.left.right.middle v-model.lazy v-model.number v-model.trim 復選框： <input type="checebox" v-model="toggel" true-value="yes" false-value="no" /> 組件中的data必須是函數； 全局注冊：Vue.component 局部注冊：new Vue({ el:"#el", component:{ "component-name":{} } }) 組件的特殊使用： v-bind:is="已注冊組件的名稱或一個組件的選項對象" 如用於tab <table> <tr is="組件名稱"></tr> </table> 局部注冊的組件在其子組件中不可用，但可以在組件中定義再次引用組件。 為了防止大小寫敏感，請全部使用xiaoxie_xiaoxie命名。 在 JavaScript 中對象和數組是通過引用傳入的，所以對於一個數組或對象類型的 prop 來說，在子組件中改變這個對象或數組本身將會影響到父組件的狀態。
以上是做的一些筆記，還跟着傳統方式（html引入css和js）測試了幾個語法，都很簡單。
然后第三部分的內容，先看了路由，因為在之前的項目里也有用到路由。頁面的內容看懂了，但是給了一個 vue-router鏈接文檔 又是一堆內容 ↓↓↓
狀態管理，React中有Redux作為最流行的Flux實現，一臉懵逼Flux是啥？ 而Vue中有相同功能的Vuex，雖然官網頁面的簡單實例看懂了，因為之前React項目中知道有store、stage、prop這些東西。但是感覺Vuex沒這么簡單。。。
服務器渲染目前應該可以先不用看。
單文件組件中又列了幾個名詞：
其來自 Vue Loader 又是單獨的一堆知識點
單元測試你可以先不用看，但里面介紹到Vue自家的單元測試組件 Vue Test Utils
TypeScript 這種前沿技術 Vue也當然不會缺席，好在之前項目有用到，文件后綴是ts的，簡單點說就是javaScript的升級版，但假如是新手小白的話，你可能還要去了解下 TypeScript 。
生產部署相關內容可以先不看。
以上多個內容中都提到 Vue CLI 這么個東西，它是啥呢？
簡單說Vue CLI就是Vue給自家封裝的快速搭建一個Vue項目的工具，甚至可以通過類似桌面視圖方式搭建。安裝完Vue CLI后通過vue creat 或vue ui 就可以搭建啦，聽起來好簡單的。但要深入了解下邊的內容，就發現遠沒有那么簡單，你熟悉webpack嗎？假如你已經知道了webpack，那你了解 webpack-chain 嗎？ 靜態資源可不是直接html中添加引用那么簡單了，你需要知道 url-loader、file-loader、style-loader、css-loader等等loader ；還有插件、預設配置也要了解；環境變量和模式里一堆新名詞；構建你也要知道。。。
好了，到現在我還沒有開始搭建第一個現代前端的Vue項目，因為我要先看這么多的文檔。。。
對於新手來說，現在學習前端已經不再是以前的簡單易上手了，即使對於傳統的前端程序猿要學習新技術也需要花費不少的功夫，以前可能簡單了解過html，js，css的后端開發人員也能上手一些簡單前端開發，但是現在就很難了。尤其對於已工作的上班族，可能更沒有集中的時間來學習，所以學習的時間會更久一些，難度會更大一些。
但是有一些是相通的東西，比如你在這里學過webpack了，那學習react和angular就可以不用學習這塊了。
忽然想起來之前收藏的一篇關於新前端的討論，筆者用對話的方式詼諧幽默的寫出了學習新前端的代價和裝逼之處，大家可以一塊樂呵樂呵：
在 2016 年學 JavaScript 是一種什么樣的體驗？
因為之前開發用的版本較低，而學習Vue用的較新版本，本地webpack和node肯定都過時了，為了避免與原有項目沖突，還又安裝了虛擬機，然后安裝開發環境，vscode是不能少的~~
雖然學的有點累，但是不想放棄，希望大家留言討論下正確的學習Vue 姿勢 （從哪里開始，從哪里進階，多長時間可以玩轉項目）~~感覺官網有點像詞典 ㄒoㄒ，最好是有阮一峰老師那種風格的~~