學習 Vue ，從入門到放棄

 

最近項目剛完成，手上工做稍微輕鬆些，準備儲備下技術，爲將來挑戰作好準備。

 

以前項目用的較多的是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 來講，在子組件中改變這個對象或數組自己將會影響到父組件的狀態。

View Code

以上是作的一些筆記，還跟着傳統方式（html引入css和js）測試了幾個語法，都很簡單。

 

而後第三部分的內容，先看了路由，由於在以前的項目裏也有用到路由。頁面的內容看懂了，可是給了一個 vue-router連接文檔  又是一堆內容 ↓↓↓

 

 

狀態管理，React中有Redux做爲最流行的Flux實現，一臉懵逼Flux是啥？ 而Vue中有相同功能的Vuex，雖然官網頁面的簡單實例看懂了，由於以前React項目中知道有store、stage、prop這些東西。可是感受Vuex沒這麼簡單。。。

服務器渲染目前應該能夠先不用看。

單文件組件中又列了幾個名詞：

• 完整語法高亮
• CommonJS 模塊
• 組件做用域的 CSS 

　　   其來自 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ㄒ，最好是有阮一峯老師那種風格的~~