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

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

1、 vue2.0

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

2、 vue-router

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

3、vuex

這是一個vue中的狀態(tài)管理倉庫，我們可以借助它來存儲一些數(shù)據(jù)。因為它能被全局訪問，所以能借助它來實現(xiàn)不同組件之間的通信。

4、axios

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

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

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

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

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

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

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

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

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

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

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

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

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

全局組件：
與局部組件引入類似，還可以給主實例取名Vue，然后通過Vue.components的方式添加。

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

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

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

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

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

vuex的簡單使用
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)建核心倉庫 store.js
Vuex 應(yīng)用的狀態(tài) state 都應(yīng)當(dāng)存放在 store.js 里面，Vue 組件可以從 store.js 里面獲取狀態(tài)，可以把 store 通俗的理解為一個全局變量的倉庫。
但是和單純的全局變量又有一些區(qū)別，主要體現(xiàn)在當(dāng) store 中的狀態(tài)發(fā)生改變時，相應(yīng)的 vue 組件也會得到高效更新。
在 src 目錄下創(chuàng)建一個 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 中定義一個方法 newAuthor，其中第一個參數(shù) state 就是 $store.state，第二個參數(shù) msg 需要另外傳入。
然后修改 header.vue 中的 setAuthor 方法

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

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

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

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