摘要：一基礎(chǔ)學習模式下圖不僅概括了模式，還描述了在中是如何和以及進行交互的。關(guān)于這一點我們將在后續(xù)反應系統(tǒng)中討論。父組件通過向下傳遞數(shù)據(jù)給子組件，子組件通過給父組件發(fā)送消息。這個對象必須是普通對象原生對象，及原型屬性會被忽略。

Vue.js 是用于構(gòu)建交互式的 Web 界面的庫。
Vue.js 提供了 MVVM 數(shù)據(jù)綁定和一個可組合的組件系統(tǒng)，具有簡單、靈活的 API。

其實和Jquery一樣，VueJs就是一個Js庫，但是是面向前端的庫，具體來講叫做MVVM(Model-View-ViewModel)庫.
也就是說，有部分功能和Jquery是差不多的，Vuejs能做的，Jquery也能做。這下我們就放心了，Jquery多簡單啊，令人發(fā)指的是Vuejs在實現(xiàn)相同功能的時候更簡單（不然用你干嘛?。?/p>

理解Vuejs最關(guān)鍵的一句話叫做“數(shù)據(jù)驅(qū)動視圖”，比如用Jquery來做一個列表，這個列表的數(shù)據(jù)是從Laravel來的，那么我們要遍歷這個數(shù)據(jù)，然后把列表的html元素加到dom里面去， 要刪除一個列表項的時候，先要在找到列表項在dom的位置，然后去除這個節(jié)點。Vuejs不用，數(shù)據(jù)在的時候，列表就在，數(shù)據(jù)減一，列表項就自動實時相應減一。也就是說，你只要操作數(shù)據(jù)就夠了，不用管dom。這基本就是Vuejs的中心思想。

一、基礎(chǔ)學習 1.MVVM模式

下圖不僅概括了MVVM模式（Model-View-ViewModel），還描述了在Vue.js中ViewModel是如何和View以及Model進行交互的。

ViewModel是Vue.js的核心，它是一個Vue實例。Vue實例是作用于某一個HTML元素上的，這個元素可以是HTML的body元素，也可以是指定了id的某個元素。

當創(chuàng)建了ViewModel后，雙向綁定是如何達成的呢？

首先，我們將上圖中的DOM Listeners和Data Bindings看作兩個工具，它們是實現(xiàn)雙向綁定的關(guān)鍵。
從View側(cè)看，ViewModel中的DOM Listeners工具會幫我們監(jiān)測頁面上DOM元素的變化，如果有變化，則更改Model中的數(shù)據(jù)；
從Model側(cè)看，當我們更新Model中的數(shù)據(jù)時，Data Bindings工具會幫我們更新頁面中的DOM元素。

1.2 Vue基本語法

先來看一個簡單的示例，Hello,World!

  {{ message }}

示例詳解：

1.2.1 data屬性和方法

每個Vue實例都會代理其data對象中的所有屬性：

var data = { a: 1 }
var vm = new Vue({
    data: data
})

vm.a === data.a // -> true

// setting the property also affects original data
vm.a = 2
data.a // -> 2

// ... and vice-versa
data.a = 3
vm.a // -> 3

需要注意的是只有代理屬性是反應式的，如果在實例創(chuàng)建之后添加一個新的屬性到實例上，將不會觸發(fā)任何視圖更新。關(guān)于這一點我們將在后續(xù)反應系統(tǒng)中討論。

除了數(shù)據(jù)屬性之外，Vue實例還提供了許多有用的實例屬性和方法，這些屬性和方法都以$開頭以便和代理數(shù)據(jù)屬性進行區(qū)分。例如：

var data = { a: 1 }
var vm = new Vue({
    el: "#example",
    data: data
})

vm.$data === data // -> true
vm.$el === document.getElementById("example") // -> true

// $watch is an instance method
vm.$watch("a", function (newVal, oldVal) {
    // this callback will be called when `vm.a` changes
})

1.2.2 實例生命周期

每個Vue實例在創(chuàng)建時都會經(jīng)歷一系列實例化步驟，例如，需要設(shè)置數(shù)據(jù)觀察、編譯模板、以及創(chuàng)建必要的數(shù)據(jù)綁定。在這個過程中，還會調(diào)用生命周期鉤子，從而方便我們執(zhí)行自定義邏輯，例如，created鉤子會在實例創(chuàng)建后調(diào)用：

var vm = new Vue({
    data: {
        a: 1
    },
    created: function () {
        // `this` points to the vm instance
        console.log("a is: " + this.a)
    }
})
// -> "a is: 1"

還有一些鉤子會在實例生命周期的不同階段調(diào)用，例如compiled、ready和destroyed，所有被調(diào)用的生命周期鉤子通過this指向調(diào)用它的Vue實例，一些用戶可能會疑惑在Vue.js的世界中有沒有“控制器”的概念，答案是沒有。組件的自定義邏輯會被分割到這些生命周期鉤子中。

1.2.3 props 用法

props將數(shù)據(jù)從父作用域傳到子組件。在 Vue.js 中，父子組件的關(guān)系可以總結(jié)為 props down, events up 。父組件通過 props 向下傳遞數(shù)據(jù)給子組件，子組件通過 events 給父組件發(fā)送消息。

  

    
    
    
  



Vue.component("todo-item", {
  props: ["todo"],
  template: "
{{ todo.text }}
"
})
var app7 = new Vue({
  el: "#app-7",
  data: {
    groceryList: [
      { text: "蔬菜" },
      { text: "奶酪" },
      { text: "隨便其他什么人吃的東西" }
    ]
  }
})

這只是一個假設(shè)的例子，但是我們已經(jīng)設(shè)法將應用分割成了兩個更小的單元，子單元通過 props 接口實現(xiàn)了與父單元很好的解耦。我們現(xiàn)在可以進一步為我們的 todo-item 組件實現(xiàn)更復雜的模板和邏輯的改進，而不會影響到父單元。

組件實例的作用域是孤立的。這意味著不能(也不應該)在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。要讓子組件使用父組件的數(shù)據(jù)，我們需要通過子組件的props選項。

子組件要顯式地用props 選項聲明它期待獲得的數(shù)據(jù)：

Vue.component("child", {
  // 聲明 props
  props: ["message"],
  // 就像 data 一樣，prop 可以用在模板內(nèi)
  // 同樣也可以在 vm 實例中像 “this.message” 這樣使用
  template: "{{ message }}"
})

然后我們可以這樣向它傳入一個普通字符串：

結(jié)果：

hello!

1.2.4 data屬性對象和函數(shù)返回對象的區(qū)別

我們先來看一下這個比較經(jīng)典的問題，當初在學Vue的時候也犯過這樣的迷惑，不知道何時傳遞data對象，何時傳遞data函數(shù) 。Vue.js的data是要一個對象還是一個function?

Vue 實例的數(shù)據(jù)對象。Vue.js 會遞歸地將它全部屬性轉(zhuǎn)為 getter/setter，從而讓它能響應數(shù)據(jù)變化。這個對象必須是普通對象：原生對象，getter/setter 及原型屬性會被忽略。不推薦觀察復雜對象。

在實例創(chuàng)建之后，可以用 vm.$data 訪問原始數(shù)據(jù)對象。Vue 實例也代理了數(shù)據(jù)對象所有的屬性。

在定義組件時，同一定義將創(chuàng)建多個實例，此時 data 必須是一個函數(shù)，返回原始數(shù)據(jù)對象。如果 data 仍然是一個普通對象，則所有的實例將指向同一個對象！換成函數(shù)后，每當創(chuàng)建一個實例時，會調(diào)用這個函數(shù)，返回一個新的原始數(shù)據(jù)對象的副本。

簡單說, 在實例中data是對象, 在組件中data就得是函數(shù)返回對象。

組件中的data寫法示例：

  


var data = { counter: 0 }
Vue.component("simple-counter", {
  template: "{{ counter }}",
  // 技術(shù)上 data 的確是一個函數(shù)了，因此 Vue 不會警告，
  // 但是我們返回給每個組件的實例的卻引用了同一個data對象
  data: function () {
    return data
  }
})
new Vue({
  el: "#example-2"
})

由于這三個組件共享了同一個 data ， 因此增加一個 counter 會影響所有組件！這不對。我們可以通過為每個組件返回全新的 data 對象來解決這個問題：

data: function () {
  return {
    counter: 0
  }
}

更多詳情請參考：官網(wǎng)組件數(shù)據(jù)data傳遞說明（Component）

1.2.5 組件寫法需注意的幾個問題

一個組件下只能有一個并列的 div，可以這么寫，所以復制官網(wǎng)示例的時候只要復制 div 里面的內(nèi)容就好。

但是不能這樣寫:

第二。數(shù)據(jù)要寫在 return 里面而不是像文檔那樣子寫

錯誤的寫法:

組件使用 ：
firstComponent.vue

其他Vue問題，可以參考該博文：Vue2.0 新手完全填坑攻略——從環(huán)境搭建到發(fā)布

2.Vue.js的常用指令請參考官方文檔

Vue官方文檔

1.v-model,v-for,v-on

在了解了vue的基本用法（數(shù)據(jù)綁定、指令、縮寫、條件渲染等）后，來看一個完整示例,動態(tài)添加/刪除元素：

    
        
        
        
    

    
        


            

                

                    Create New Person
                
                

                    Name:
                    
                
                

                    Age:
                    
                
                

                    Sex:
                    
                    Male
                    Female
                
                
                

                    
                    Create
                
        
        

            

                

                    
Name
                    
Age
                    
Sex
                    
Delete
                
            
            

                

                    
{{ person.name }}
                    
{{ person.age }}
                    
{{ person.sex }}
                    
Delete
                    
Greet
                
            
        
        
    
    
    

Demo
Github示例源碼

實戰(zhàn)示例：

添加、刪除表單數(shù)據(jù)

  

    

    
Vue開發(fā)
    
  


  

    

      

        

          welcome to Vue.js
        
        

          
{{ message }}
          

          

            

                {{ todo.id }} {{ todo.title }}
                刪除
            
          

          

            

                
            
            

                Add to do
            
          

        
      
    
  

注意：在輸入框輸入數(shù)據(jù)添加到列表時，需要使用v-on:submit.prevent="addTodo(newTodo)方法對表單提交進行阻止，并使用v-model進行數(shù)據(jù)雙向綁定，當輸入框里的數(shù)據(jù)變化時，Vue實例中的newTodo:{id:null,title:""}屬性數(shù)據(jù)也跟著變化，這樣就可以將數(shù)據(jù)塞入到todos數(shù)組中。

2.計算屬性computed,v-bind

  
          
My todos {{todosCount}}

JS中的用法：

 computed:{
      todosCount(){
        return this.todos.length;
      }

完整代碼：

  

    

    
Vue開發(fā)
    
  


  

    

      

        

          welcome to Vue.js
        
        

          
          
My todos {{todosCount}}

          

            

                {{ todo.id }} {{ todo.title }}
                
                {{ todo.completed ? "undo" : "complete" }}
                

                刪除
            
          

          

            

                
            
            

                Add to do
            
          

        
      
    
  

二、組件

組件（Component）是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素， Vue.js 的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生 HTML 元素的形式，以 is 特性擴展。

組件化的好處：
增加了代碼的可讀性，更重要的是增加了代碼的可重用性。

1)、全局組件

先注冊，然后再使用

  


// 注冊
Vue.component("my-component", {
  template: "
A custom component!
"
})
// 創(chuàng)建根實例
new Vue({
  el: "#example"
})

渲染：

  
A custom component!

注意事項：組件在注冊之后，便可以在父實例的模塊中以自定義元素  的形式使用。要確保在初始化根實例 之前 注冊了組件。

2)、局部注冊

不必在全局注冊每個組件。通過使用組件實例選項注冊，可以使組件僅在另一個實例/組件的作用域中可用：

var Child = {
  template: "
A custom component!
"
}
new Vue({
  // ...
  components: {
    //  將只在父模板可用
    "my-component": Child
  }
})

對上邊的實戰(zhàn)示例進行組件化封裝處理:
本案例，完成兩個組件化工作：
1：對列表進行組件封裝，注意在組件模板屬性參數(shù)的v-bind:todos="todos"傳遞
2：對表單進行了組裝,注意data為function返回

注意在 JavaScript 中對象和數(shù)組是引用類型，指向同一個內(nèi)存空間，如果 prop 是一個對象或數(shù)組，在子組件內(nèi)部改變它會影響父組件的狀態(tài)。

  

    

    
Vue開發(fā)
    
  


  

    

      

        

          welcome to Vue.js
        
        

          
          
My todos {{todosCount}}

          
          
          

        
      
    
  

三、vue-cli腳手架

vue-cli腳手架Github地址：https://github.com/vuejs/vue-cli

1、node安裝vue-cli腳手架

// 這里使用淘寶的鏡像cnpm
$ cnpm install -g vue-cli  

安裝好之后，可以通過vue命令查看：

2、命令安裝webpack項目

?  Code vue init webpack vuejs-cli

然后再執(zhí)行上邊給出的提示命令：

cd vuejs-2.0-cli
npm install
npm run dev

執(zhí)行完上邊的命令后，會打開瀏覽器的http://localhost:8080/#/頁面

我們看一下這個目錄下邊的文件：

3.vue-router

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構(gòu)建單頁面應用。vue的單頁面應用是基于路由和組件的，路由用于設(shè)定訪問路徑，并將路徑和組件映射起來。傳統(tǒng)的頁面應用，是用一些超鏈接來實現(xiàn)頁面切換和跳轉(zhuǎn)的。在vue-router單頁面應用中，則是路徑之間的切換，也就是組件的切換。

vue-router 快速入門
Vue路由的使用

    Home
    About

4.JavaScript ES6中export及export default的區(qū)別

相信很多人都使用過export、export default、import，然而它們到底有什么區(qū)別呢？ 在JavaScript ES6中，export與export default均可用于導出常量、函數(shù)、文件、模塊等，你可以在其它文件或模塊中通過import+(常量 | 函數(shù) | 文件 | 模塊)名的方式，將其導入，以便能夠?qū)ζ溥M行使用，但在一個文件或模塊中，export、import可以有多個，export default僅有一個。

具體事例，請看下邊的原文章：
JavaScript ES6中export及export default的區(qū)別

四、Vue請求api之vue-axios使用

axios github官方地址
vue-axios 擴展包GitHub地址

我們在學習vue的API請求，所以，我們用第二個特定的包vue-axios來安裝https://github.com/imcvampire...。

1.安裝

npm install --save axios vue-axios

2.使用

安裝好之后，引入到使用的文件中

import Vue from "vue"
import axios from "axios"
import VueAxios from "vue-axios"

Vue.use(VueAxios, axios)

示例：

Vue.axios.get(api).then((response) => {
  console.log(response.data)
})

this.axios.get(api).then((response) => {
  console.log(response.data)
})

五、laravel做后端API提供數(shù)據(jù)

這里使用axios請求接口，會出現(xiàn)跨域的問題，不過，我們可以通過安裝https://github.com/barryvdh/laravel-cors庫來解決這個問題。

六、Vuex學習 1、什么是Vuex？

Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應用的所有組件的狀態(tài)，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化。---官方文檔

2、state理解

state 這樣概念初次接觸的時候可能會感覺到有點模糊，簡單來說就是將 state 看成我們項目中使用的數(shù)據(jù)的集合。然后，Vuex 使得 組件本地狀態(tài)（component local state）和 應用層級狀態(tài)(application state) 有了一定的差異。

component local state：該狀態(tài)表示僅僅在組件內(nèi)部使用的狀態(tài)，有點類似通過配置選項傳入 Vue 組件內(nèi)部的意思。

application level state：應用層級狀態(tài)，表示同時被多個組件共享的狀態(tài)層級。

假設(shè)有這樣一個場景：我們有一個父組件，同時包含兩個子組件。父組件可以很容易的通過使用 props 屬性來向子組件傳遞數(shù)據(jù)。

但是問題來了，當我們的兩個子組件如何和對方互相通信的？ 或者子組件如何傳遞數(shù)據(jù)給他父組件的？在我們的項目很小的時候，這個兩個問題都不會太難，因為我們可以通過事件派發(fā)和監(jiān)聽來完成父組件和子組件的通信。

然而，隨著我們項目的增長：

保持對所有的事件追蹤將變得很困難。到底哪個事件是哪個組件派發(fā)的，哪個組件該監(jiān)聽哪個事件？

項目邏輯分散在各個組件當中，很容易導致邏輯的混亂，不利于我們項目的維護。

父組件將變得和子組件耦合越來越嚴重，因為它需要明確的派發(fā)和監(jiān)聽子組件的某些事件。

這就是 Vuex 用來解決的問題。 Vuex 的四個核心概念分別是：

The state tree：Vuex 使用單一狀態(tài)樹，用一個對象就包含了全部的應用層級狀態(tài)。至此它便作為一個『唯一數(shù)據(jù)源(SSOT)』而存在。這也意味著，每個應用將僅僅包含一個 store 實例。單狀態(tài)樹讓我們能夠直接地定位任一特定的狀態(tài)片段，在調(diào)試的過程中也能輕易地取得整個當前應用狀態(tài)的快照。

Getters：用來從 store 獲取 Vue 組件數(shù)據(jù)。

Mutators：事件處理器用來驅(qū)動狀態(tài)的變化。

Actions：可以給組件使用的函數(shù)，以此用來驅(qū)動事件處理器 mutations

如何你暫時還不太理解這個四個概念，不用著急，我們將在后面的項目實戰(zhàn)中詳細的解釋。

Vuex 應用中數(shù)據(jù)的流向（Vuex 官方圖）

上邊的流程圖簡單解釋下：

Vuex 規(guī)定，屬于應用層級的狀態(tài)只能通過 Mutation 中的方法來修改，而派發(fā) Mutation 中的事件只能通過 action。
從左到又，從組件出發(fā)，組件中調(diào)用 action，在 action 這一層級我們可以和后臺數(shù)據(jù)交互，比如獲取初始化的數(shù)據(jù)源，或者中間數(shù)據(jù)的過濾等。然后在 action 中去派發(fā) Mutation。Mutation 去觸發(fā)狀態(tài)的改變，狀態(tài)的改變，將觸發(fā)視圖的更新。

注意事項

數(shù)據(jù)流都是單向的

組件能夠調(diào)用 action

action 用來派發(fā) Mutation

只有 mutation 可以改變狀態(tài)

store 是響應式的，無論 state 什么時候更新，組件都將同步更新

3、Vuex目錄結(jié)構(gòu)

我們來看一下創(chuàng)建的Vuex項目的目錄結(jié)構(gòu)：

components/ 文件夾用來存放我們的 Vue 組件

vuex/ 文件夾存放的是和 Vuex store 相關(guān)的東西（state object，actions，mutators)

build/ 文件是 webpack 的打包編譯配置文件

config/ 文件夾存放的是一些配置項，比如我們服務器訪問的端口配置等

dist/ 該文件夾一開始是不存在，在我們的項目經(jīng)過 build 之后才會產(chǎn)出

App.vue 根組件，所有的子組件都將在這里被引用

index.html 整個項目的入口文件，將會引用我們的根組件 App.vue

main.js 入口文件的 js 邏輯，在 webpack 打包之后將被注入到 index.html 中

注：本博客Vuex部分內(nèi)容轉(zhuǎn)自該博文：使用 Vuex + Vue.js 構(gòu)建單頁應用，博文作者對Vuex理解的比較透徹，所以轉(zhuǎn)過來學習下。

4、將上邊實戰(zhàn)列表表單例子用Vuex重構(gòu)

先看Vuex的目錄結(jié)構(gòu)：

主要是在 src目錄下做組件重構(gòu)：

先看列表組件Todos.vue:

表單組件TodoForm.vue

App.vue總組件：