初學vue.js記錄

前言

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

一、 vue2.0

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

二、 vue-router

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

三、vuex

這是一個vue中的狀態管理倉庫，咱們能夠藉助它來存儲一些數據。由於它能被全局訪問，因此能借助它來實現不一樣組件之間的通訊。

四、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入口文件中註冊，其它頁面不用單獨引入，能夠直接使用。
局部組件引入方法：
一、簡單的組件能夠直接在對應實例裏面加入components項，使用鍵值對的形式寫代碼。

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

}
二、複雜點的結構不方便直接用引號寫，這時可單獨寫一個頁面並導出，在使用的頁面引入，而且取別名，在用鍵值對寫到components裏。

<template>
    <div>
        我是單獨vue文件裏建立的組件
    </div>
</template>
<script>
    export default{
        name:'child',
    }
</script>

而後在要使用的頁面引入，並註冊：
import child from './components/child'
<script>
    export default{
        name:'dad',
        components:{
            'my-clild':child
        }
    }
</script>

全局組件：
與局部組件引入相似，還能夠給主實例取名Vue，而後經過Vue.components的方式添加。

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

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

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

過渡
在元素進行顯示隱藏等切換時，vue爲這些動做定義了6個狀態：
一、v-enter 二、v-enter-active 三、v-enter-to 四、v-leave 五、v-leave-active 六、v-leave-to
須要顯示過渡動畫的元素用transition元素包裹，而且取個name屬性。在樣式裏，使用name值替換上面的v，具體效果就是css3的過渡效果等。

過濾器
在把實例裏data的數據渲染進模板時還能夠對數據進行過濾，形式如{{msg | 過濾方法名}}，在須要渲染的數據後面跟上管道符，並跟上要使用的過濾方法的名稱，一個簡單的過濾功能就ok了。過濾器還可使用多個，只須要重複管道符與方法名便可。

vuex的簡單使用
一、在目錄下引入vuex模塊：cnpm install vuex -S
二、在main.js中引入：import Vuex from 'vuex'

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

三、構建核心倉庫 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

四、在組件中映射狀態

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

五、修改狀態
雖然直接賦值也能修改可是最好仍是使用官方推薦的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項目便可。。。但願後來的朋友少走彎路！