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

本人剛開始學習vue.js幾天，做了一些練習之后，鑒于每隔一段時間就把學習過的內容總結一番，故此寫下此文章。
初學Vue.js應該學習哪些知識

1、 vue2.0

主要學習基礎知識。首先是引入vue.js，可以在網頁中直接引入cdn的鏈接，或者在本地搭建環境，使用腳手架工具幫你快速搭建項目，具體環境搭建過程可參考官方文檔。然后是基礎語法，如何渲染數據，熟悉它的各種指令，條件渲染或者循環渲染數據等。可大致了解一下生命周期與鉤子函數，可以暫時跳過。接下來要學習如何寫函數，計算屬性。最后要會創建組件與引用組件，到此，你算是入門了。給兩鏈接：
Vue.js2.0官方文檔：https://cn.vuejs.org/v2/guide/
幾個小練習：https://www.cnblogs.com/wuhao...

2、 vue-router

在項目開發中，經常會用到路由，所以學會如何構建路由是必須的。
vue-router官方文檔：https://router.vuejs.org/zh-c...

3、vuex

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

4、axios

如果你學習過jquery，它與jquery里的ajax類似，是發送請求，交互數據的工具。
github學習地址：https://github.com/axios/axios

基礎知識就不一一介紹了~~

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

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

使用舉例：
beforecreate : 舉個栗子：可以在這加個loading事件
created ：在這結束loading，還做一些初始化，實現函數自執行
mounted ： 在這發起后端請求，拿回數據，配合路由鉤子做一些事情
beforeDestory： 你確認刪除XX嗎？ destoryed ：當前組件已被刪除，清空相關內容

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

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

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

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

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

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

}
2、復雜點的結構不方便直接用引號寫，這時可多帶帶寫一個頁面并導出，在使用的頁面引入，并且取別名，在用鍵值對寫到components里。

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

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

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

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

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

過渡
在元素進行顯示隱藏等切換時，vue為這些動作定義了6個狀態：
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的數據渲染進模板時還可以對數據進行過濾，形式如{{msg | 過濾方法名}}，在需要渲染的數據后面跟上管道符，并跟上要使用的過濾方法的名稱，一個簡單的過濾功能就ok了。過濾器還可以使用多個，只需要重復管道符與方法名即可。

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、構建核心倉庫 store.js
Vuex 應用的狀態 state 都應當存放在 store.js 里面，Vue 組件可以從 store.js 里面獲取狀態，可以把 store 通俗的理解為一個全局變量的倉庫。
但是和單純的全局變量又有一些區別，主要體現在當 store 中的狀態發生改變時，相應的 vue 組件也會得到高效更新。
在 src 目錄下創建一個 vuex 目錄，將 store.js 放到 vuex 目錄下：

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

4、在組件中映射狀態

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

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

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

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

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

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

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