摘要：初學(xué)應(yīng)該學(xué)習(xí)哪些知識(shí)主要學(xué)習(xí)基礎(chǔ)知識(shí)。接下來(lái)要學(xué)習(xí)如何寫(xiě)函數(shù)，計(jì)算屬性。事件處理與修飾符事件通過(guò)指令來(lái)綁定，在中事件為事件名，所以是很好記憶的。這時(shí)可通過(guò)來(lái)獲取父組件傳遞的值并寫(xiě)入模板，父組件可通過(guò)在子組件寫(xiě)入屬性的方式傳遞數(shù)據(jù)。

本人剛開(kāi)始學(xué)習(xí)vue.js幾天，做了一些練習(xí)之后，鑒于每隔一段時(shí)間就把學(xué)習(xí)過(guò)的內(nèi)容總結(jié)一番，故此寫(xiě)下此文章。
初學(xué)Vue.js應(yīng)該學(xué)習(xí)哪些知識(shí)

1、 vue2.0

主要學(xué)習(xí)基礎(chǔ)知識(shí)。首先是引入vue.js，可以在網(wǎng)頁(yè)中直接引入cdn的鏈接，或者在本地搭建環(huán)境，使用腳手架工具幫你快速搭建項(xiàng)目，具體環(huán)境搭建過(guò)程可參考官方文檔。然后是基礎(chǔ)語(yǔ)法，如何渲染數(shù)據(jù)，熟悉它的各種指令，條件渲染或者循環(huán)渲染數(shù)據(jù)等?？纱笾铝私庖幌律芷谂c鉤子函數(shù)，可以暫時(shí)跳過(guò)。接下來(lái)要學(xué)習(xí)如何寫(xiě)函數(shù)，計(jì)算屬性。最后要會(huì)創(chuàng)建組件與引用組件，到此，你算是入門(mén)了。給兩鏈接：
Vue.js2.0官方文檔：https://cn.vuejs.org/v2/guide/
幾個(gè)小練習(xí)：https://www.cnblogs.com/wuhao...

2、 vue-router

在項(xiàng)目開(kāi)發(fā)中，經(jīng)常會(huì)用到路由，所以學(xué)會(huì)如何構(gòu)建路由是必須的。
vue-router官方文檔：https://router.vuejs.org/zh-c...

3、vuex

這是一個(gè)vue中的狀態(tài)管理倉(cāng)庫(kù)，我們可以借助它來(lái)存儲(chǔ)一些數(shù)據(jù)。因?yàn)樗鼙蝗衷L問(wèn)，所以能借助它來(lái)實(shí)現(xiàn)不同組件之間的通信。

4、axios

如果你學(xué)習(xí)過(guò)jquery，它與jquery里的ajax類(lèi)似，是發(fā)送請(qǐng)求，交互數(shù)據(jù)的工具。
github學(xué)習(xí)地址：https://github.com/axios/axios

基礎(chǔ)知識(shí)就不一一介紹了~~

生命周期
vue.js為vue實(shí)例劃分了從創(chuàng)建到結(jié)束各種不同的階段，把這些階段稱(chēng)為生命周期，同時(shí)在不同的過(guò)程中也會(huì)運(yùn)行一些叫做生命周期鉤子的函數(shù)，我們能通過(guò)這些函數(shù)，在不同階段添加相應(yīng)的代碼。
總共可分為8個(gè)階段：

beforeCreate（創(chuàng)建前）,
created（創(chuàng)建后）,
beforeMount(載入前),
mounted（載入后）,
beforeUpdate（更新前）,
updated（更新后）,
beforeDestroy（銷(xiāo)毀前）,
destroyed（銷(xiāo)毀后）

使用舉例：
beforecreate : 舉個(gè)栗子：可以在這加個(gè)loading事件
created ：在這結(jié)束loading，還做一些初始化，實(shí)現(xiàn)函數(shù)自執(zhí)行
mounted ： 在這發(fā)起后端請(qǐng)求，拿回?cái)?shù)據(jù)，配合路由鉤子做一些事情
beforeDestory： 你確認(rèn)刪除XX嗎？ destoryed ：當(dāng)前組件已被刪除，清空相關(guān)內(nèi)容

計(jì)算屬性
在對(duì)某些值進(jìn)行一系列邏輯算法時(shí)，雖然能直接在模板內(nèi)書(shū)寫(xiě)，但是模板中的邏輯代碼太多會(huì)讓模板過(guò)重并且難以維護(hù)，所以在此時(shí)應(yīng)當(dāng)使用計(jì)算屬性。
計(jì)算屬性默認(rèn)只有g(shù)etter，但我們還能加上setter，通過(guò)getter獲取一些值來(lái)進(jìn)行一系列的計(jì)算來(lái)返回值，而setter可以設(shè)置值，作用到data里面的數(shù)據(jù)。

條件渲染
在之前的編程中，要想隱藏一個(gè)元素有4種方式：display:none，visibility:hidden，opacity:0，position:absolute;left:50000px;top:50000px，而在vue.js里面是使用條件渲染v-if，v-show。v-show就是控制元素的display樣式來(lái)顯示隱藏，元素總是會(huì)被渲染的，而v-if是控制渲染與否，這就是他們的區(qū)別。

列表渲染
之前看了一點(diǎn)點(diǎn)angularjs和小程序，發(fā)現(xiàn)它們都有類(lèi)似的列表渲染方式。這種方式與js里面的for in循環(huán)很像，為列表的每一項(xiàng)取個(gè)名字用來(lái)表示每一項(xiàng)，然后通過(guò)這個(gè)名字來(lái)訪問(wèn)每一項(xiàng)數(shù)據(jù)。如果會(huì)for in循環(huán)那么很容易接受，只不過(guò)每一項(xiàng)寫(xiě)在{{}}里。

事件處理與修飾符
事件通過(guò)v-on指令來(lái)綁定，在js中事件為on+事件名，所以v-on是很好記憶的。而vue還提供了非常簡(jiǎn)便的方法來(lái)幫助事件處理，如阻止冒泡，只需要在v-on+事件名后使用.stop就行，而不用像原生js寫(xiě)一大行。修飾符還可以串聯(lián)使用。在vue中有很多修飾符可幫助我們減少代碼量。

組件
組件其實(shí)就是提取一段代碼，讓它在多帶帶的文件中，當(dāng)要使用的時(shí)候引入就行。當(dāng)某段代碼大量重復(fù)的時(shí)候它可起了大作用。組件分為局部組件與全局組件。局部組件是在某個(gè)頁(yè)面需要的時(shí)候在這個(gè)頁(yè)面引入，而全局組件是在main.js入口文件中注冊(cè)，其它頁(yè)面不用多帶帶引入，可以直接使用。
局部組件引入方法：
1、簡(jiǎn)單的組件可以直接在對(duì)應(yīng)實(shí)例里面加入components項(xiàng)，使用鍵值對(duì)的形式寫(xiě)代碼。

export default {
  name: "App",
  components:{
      "child":{
          template:"{{msg}},我叫{{name}},今年{{age}}歲了，{{sex}}",
          props:["msg","name","age","sex"],
     }

}
2、復(fù)雜點(diǎn)的結(jié)構(gòu)不方便直接用引號(hào)寫(xiě)，這時(shí)可多帶帶寫(xiě)一個(gè)頁(yè)面并導(dǎo)出，在使用的頁(yè)面引入，并且取別名，在用鍵值對(duì)寫(xiě)到components里。

然后在要使用的頁(yè)面引入，并注冊(cè)：
import child from "./components/child"

全局組件：
與局部組件引入類(lèi)似，還可以給主實(shí)例取名Vue，然后通過(guò)Vue.components的方式添加。

Vue.component("my-child",child)
new Vue({
  el: "#app",
  router,
  components: { App },
})

使用props在組件之間傳值
子組件有時(shí)需要?jiǎng)討B(tài)地顯示一些數(shù)據(jù)而不是直接寫(xiě)靜態(tài)的。這時(shí)可通過(guò)props來(lái)獲取父組件傳遞的值并寫(xiě)入模板，父組件可通過(guò)在子組件寫(xiě)入屬性的方式傳遞數(shù)據(jù)。
不過(guò)上面的都是父組件向子組件傳值，但是子組件如何和父組件通信？這時(shí)就需要用到自定義事件了，子組件可通過(guò)$emit來(lái)主動(dòng)讓自己觸發(fā)一個(gè)事件，父組件監(jiān)聽(tīng)這些自定義事件的名稱(chēng)就可以實(shí)現(xiàn)通信。

插槽
有時(shí)候子組件內(nèi)容可能還需要父組件添加，這時(shí)候插槽slot就派上用場(chǎng)了。在子組件內(nèi)定義插槽可以接收父組件寫(xiě)在元素之間的內(nèi)容。當(dāng)沒(méi)有插槽的時(shí)候這些內(nèi)容完全沒(méi)作用，但是有預(yù)留插槽時(shí)，內(nèi)容會(huì)被嵌入子組件插槽的位置。插槽還可以有多個(gè)，這時(shí)候需要給插槽一個(gè)name屬性，父組件的內(nèi)容需要有slot屬性，這樣多個(gè)內(nèi)容能插入到相應(yīng)的位置。

過(guò)渡
在元素進(jìn)行顯示隱藏等切換時(shí)，vue為這些動(dòng)作定義了6個(gè)狀態(tài)：
1、v-enter 2、v-enter-active 3、v-enter-to 4、v-leave 5、v-leave-active 6、v-leave-to
需要顯示過(guò)渡動(dòng)畫(huà)的元素用transition元素包裹，并且取個(gè)name屬性。在樣式里，使用name值替換上面的v，具體效果就是css3的過(guò)渡效果等。

過(guò)濾器
在把實(shí)例里data的數(shù)據(jù)渲染進(jìn)模板時(shí)還可以對(duì)數(shù)據(jù)進(jìn)行過(guò)濾，形式如{{msg | 過(guò)濾方法名}}，在需要渲染的數(shù)據(jù)后面跟上管道符，并跟上要使用的過(guò)濾方法的名稱(chēng)，一個(gè)簡(jiǎn)單的過(guò)濾功能就ok了。過(guò)濾器還可以使用多個(gè)，只需要重復(fù)管道符與方法名即可。

vuex的簡(jiǎn)單使用
1、在目錄下引入vuex模塊：cnpm install vuex -S
2、在main.js中引入：import Vuex from "vuex"

        import store from "./vuex/store"
        new Vue({
              el: "#app",
              store
        })

3、構(gòu)建核心倉(cāng)庫(kù) store.js
Vuex 應(yīng)用的狀態(tài) state 都應(yīng)當(dāng)存放在 store.js 里面，Vue 組件可以從 store.js 里面獲取狀態(tài)，可以把 store 通俗的理解為一個(gè)全局變量的倉(cāng)庫(kù)。
但是和單純的全局變量又有一些區(qū)別，主要體現(xiàn)在當(dāng) store 中的狀態(tài)發(fā)生改變時(shí)，相應(yīng)的 vue 組件也會(huì)得到高效更新。
在 src 目錄下創(chuàng)建一個(gè) vuex 目錄，將 store.js 放到 vuex 目錄下：

    import Vue from "vue"
    import Vuex from "vuex"
    Vue.use(Vuex)
       const store = new Vuex.Store({
      // 定義狀態(tài)
          state: {
                  author: "Wise Wrong"
         }
    })
    export default store

4、在組件中映射狀態(tài)

computed: {
  author () {
    return this.$store.state.author
  }
}

5、修改狀態(tài)
雖然直接賦值也能修改但是最好還是使用官方推薦的mutations或者actions：

首先在 store.js 中定義一個(gè)方法 newAuthor，其中第一個(gè)參數(shù) state 就是 $store.state，第二個(gè)參數(shù) msg 需要另外傳入。
然后修改 header.vue 中的 setAuthor 方法

這里使用 $store.commit 提交 newAuthor，并將 this.inputTxt 傳給 msg，從而修改 author。

這樣顯式地提交(commit) mutations，可以讓我們更好的跟蹤每一個(gè)狀態(tài)的變化。
而actions類(lèi)似，區(qū)別在于actions可以異步執(zhí)行。

心得體會(huì)
整個(gè)vue有很多的功能，我也正在摸索中，此篇就寫(xiě)到這吧~對(duì)于新手而言，閱讀官方文檔是提升的好方法，在看過(guò)之后最好還是多多練習(xí)示例，才能迅速貫通，再之后呢就多可以去網(wǎng)上看看諸位大神的博客啊，論壇啥的，希望能對(duì)新入門(mén)的小伙伴有所幫助~！

友情提示：在我第一次看vue的時(shí)候啥也不懂，安裝環(huán)境的時(shí)候每次都要把網(wǎng)上的安裝教程重復(fù)一遍，到后來(lái)我才發(fā)現(xiàn)，因?yàn)榍懊鎺讉€(gè)步驟的工具都裝在全局的，所以只需要裝一次就行，之后只需要初始化vue項(xiàng)目即可。。。希望后來(lái)的朋友少走彎路！