基礎特性

漸進式開發

可以 單HTML頁面 使用Vue，也可以整個專案使用Vue

生命週期

• beforeCreate 例項開始初始化時同步呼叫，資料觀測和事件尚未初始化
• created 例項建立之後呼叫，完成資料繫結，事件方法。Document尚未掛載
• beforeMount 在Document掛載之前執行
• mounted 編譯結束時呼叫。指令已生效，資料變化已能觸發DOM更新 (不保證$el已經插入文件)
• beforeUpdate 再次更新例項時會呼叫，此時DOM尚未更新
• Updated 再次更新例項並更新完DOM後呼叫
• beforeDestroy 開始銷燬例項時呼叫，此刻例項仍有效
• destroyed 例項被銷燬之後呼叫

資料繫結

文字插值

最基礎的形式，使用 雙大括號{{}} (源自Mustache語法)

<span>Hello {{name}}</span>

插值也可以應用在HTML屬性中

<div id='id_{{blogId}}'></div>

// 2.0 寫法
<div v-bind:id='"id_"+blogId'/>
<div :id='"id_"+blogId'/>

過濾器

過濾器可以用在兩個地方：雙花括號插值 和 v-bind 表示式 (後者從 2.1.0+ 開始支援)。過濾器應該被新增在 JavaScript 表示式的尾部，由“管道”符號指示

<!-- 在雙花括號中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

計算屬性

類比Java的 Getter 和 Setter ，先將資料進行處理。

var vm = new Vue({
    el:'#app',
    data:{
        firstName:'NEW',
        lastName:'CIH'
    },
    computed:{
        fullName:function
 
(){
            return this.firstName + ' ' + this.lastName
        }
    }
})

該用例即為 單頁面使用Vue 的用法

表單控制元件

Vue提供 v-model 指令對錶單元素進行雙向繫結，修改表單元素同時，例項中的對應屬性值也會同時更新。

• Text

<input type="text" v-model="email"/>
<span>Your input is {{email}}</span>

• Radio

<input type="radio" value="male" v-model="gender">男
<input type="radio" value="famale" v-model="gender">女
<span>選擇的性別是 {{gender}}</span>

• CheckBox

<input type="checkbox" value="1" v-model="multiChecked">1
<input type="checkbox" value="2" v-model="multiChecked">2
<input type="checkbox" value="3" v-model="multiChecked">3
<input type="checkbox" value="4" v-model="multiChecked">4
<span>你選擇了 {{multiChecked.join('|')}} </span>

• Select

<select v-model="selected">
    <option selected>A</option>
    <option>B</option>
    <option>C</option>
</select>
<span>你選擇了 {{selected}} </span>

Class及Style繫結

<div class="tab" v-bind:class="{'active':active}"></div>

// Vue例項中必須有
data:{
    active:false
}

指令

內建指令

• v-bind 動態繫結DOM元素屬性
• v-model 繫結表單控制元件
• v-if 及 v-else 根據條件展示對應的模板內容

<div v-if="yes"> yes </div>
<div v-else> no </div>

• v-show 功能同v-if，

v-if 與 v-show 的區別：v-if在條件為false的情況下並不進行模板的編譯，而v-show則會在模板編譯好之後將元素隱藏掉。v-if的切換消耗比v-show高，但初始條件為false的情況下，v-if的初始渲染要稍快

• v-for

<ul>
    <li v-for=item in items">
        <h1> {{item.title}} </h1>
    </li>
</ul>

• v-on 事件繫結

<button v-on:click='popLoginDialog'></button>

// 簡寫
<button @click='popLoginDialog'></button>

• v-text 更新元素的文字值

• v-HTML 用於更新元素的innerHTML，接受的字串不會進行編譯操作，按普通HTML處理。

<div v-HTML="blogContent"></div>

• v-el 在DOM元素註冊一個索引，使得可以直接訪問DOM元素。(通過$els屬性呼叫)

<div v-el:blog-content> there is a blog el </div>
// 獲取文字，vm即為該例項名
vm.$els.blogContent.innerText

由於HTML不區分大小寫，在v-el如果使用了駝峰命名，系統會自動轉換成小寫。但可以使用 - 來連線期望大寫的字母

• v-ref 功能同 v-el，作用於子元件上。(通過$refs訪問)
• v-pre 跳過編譯該元素
• v-cloak 可以隱藏未編譯的Mustache標籤直到例項準備完畢 (解決閃現問題)

<div v-cloak> {{message}} </div>

官方推薦搭配如下 CSS 屬性一起使用

[v-cloak]{
    display:none
}

• v-once 標明元素或元件只渲染一次。（即使隨後發生繫結資料的變化或更新，該元素或元件及包含的子元素都不會被編譯和渲染）

自定義指令

通過 Vue.directive(id, definition) 可以註冊一個全域性指令

元件

元件選項與Vue選項的區別

在Vue中，屬性的賦值是直接賦值

var vm = new Vue({
    el : '#app',
    data : {
        name : 'newcih'
    }
})

而在元件中需要定義

var MyComponent = Vue.extend({
    data : function() {
        return {
            name : 'newcih'
        }
    }
})

因為自定義元件可能擁有多個例項，如果直接將物件data傳遞給Vue.extend({})，那所有使用中的元件例項都會共享該data物件，所以需要通過函式返回一個新物件

元件Props

選項Props是元件中非常重要的一個選項。元件例項的作用域是孤立的，子元件的模板和模組中是無法直接呼叫父元件的資料，所以通過Props將父元件的資料傳遞給子元件

Vue.component('my-child', {
    props : ['parentContent'],
    template : '<span> {{parentContent}} is from parent </span>'
})

<my-child parent-Content="This data"></my-child>

同指令，註冊元件的Props也要注意駝峰命名的轉換，即通過 - 連線字母來達到大寫字母的目的

一個完整的元件程式碼

檔名 components/Test.vue

<template>
    <!-- 存放模板程式碼 -->
    <div v-if="isLogin">
        Welcome, {{name}}
        <button @click="login">登入</button>
    </div>
</template>

<script>
export default {
    // 存放資料
    data () {
        return {
            name : 'newcih'
        }
    },
    // 生命週期函式
    created : function () {
        // 方法呼叫
    }，
    // 計算屬性
    computed : {
        isLogin () {
            return true
        }
    },
    // 監聽函式
    watch : {
        'name' (newValue, oldValue) {
            // 變數name的值變化時觸發
        }
    },
    // 事件及自定義函式
    methods : {
        login : function () {
        }
    }

}
</script>

<style scoped>
    <!-- 存放css程式碼 -->
</style>

狀態管理

Vuex是狀態管理模式的一種實現庫，主要以外掛的形式和Vue.js進行配合使用，能夠使我們在Vue.js中管理複雜的元件事件流。

在一些大型應用中，有時會遇到單頁面應用包含著大量的元件及複雜的資料結構，而且可能各種元件還會相互影響各自的狀態，在這種情況下元件樹中的事件流會很快變得非常複雜，也使除錯變得困難。為了解決這種情況，我們往往引入 狀態管理 這種設計模式。

• Store 倉庫，用於儲存整個應用所需要的資訊
• State 狀態，Store中的資料
• Mutations 變更，更新Store的介面

一個完整的狀態管理實現

檔名 vuex/store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    isLogin: true
  },
  mutations: {
    UPDATE_LOGIN_STATE (state, loginState) {
      state.isLogin = loginState
    }
  },
  getters: {
    getLoginState: state => {
      return state.isLogin
    }
  }
})

觸發 mutations 的方式可以為

this.$store.commit('UPDATE_LOGIN_STATE', true)

獲取 state 資料的方式可以為

return this.$store.getters.getLoginState

獲取 State 資料推薦在計算屬性中獲取，即放置到 computed 中執行

開發實踐

專案結構

• my-project
  
  • build 存放webpack相關配置和指令碼
  • config 存放配置檔案，用於區分開發環境，測試環境，線上環境的不同
  • src 專案原始碼及需要引用的資原始檔
    
    • assets
    • components
    • App.vue
    • main.js
  • static 不需要webpack處理的靜態資源
  • test 用於存放測試檔案
  • .babelirc
  • .editorconfig
  • .eslintignore
  • .eslintrc.js
  • .gitignore
  • index.html 專案入口，嵌入了App.vue元件
  • package.json
  • README.md

配置代理伺服器

設定 config/index.js 檔案中的屬性如下

// proxyTable中新增'/api'表明 ： 介面'/api'開頭的才使用代理，其它的如靜態資源則使用本地檔案
proxyTable : {
    '/api' : {
        target : 'http://my.service.com',
        changeOrigin : true,
        pathRewrite : {
            '^/api' : '/api'
        }
    }
}
// pathRewrite表明 : 將前端的介面代理URL中開頭的 **/api** 替換為 **/api**，如果後臺服務提供的介面並沒有 **/api** 等字首，則可以寫為如下

pathRewrite : {
    '^/api' : ''
    // 或者是
    '^/api' : '/'
}

使用Axios傳送請求

Axios是Vue 2.0後作者推薦的，不再維護vue-resource。Axios的使用手冊可 點選檢視

基本使用如下

// 傳送Get請求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 傳送Post請求
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Axios的Post請求預設傳送的是 JSON 格式的資料，如果後臺使用SpringMVC搭建，則可以使用註解 @RequestBody 接受引數

外掛

開發外掛

開發的外掛必須提供 install 方法，第一個引數是 Vue構造器，第二個引數是可選的選項物件。一個例子如下

require('es6-promise').polyfill()
import axios from 'axios'
import {Promise} from '[email protected]@es6-promise'

export const Axios = axios.create({
  baseURL: '',
  timeout: 5000
})
// POST傳參序列化(新增請求攔截器，即localStorage如果有token欄位，則帶上該欄位到請求頭的authentication欄位)
Axios.interceptors.request.use(config => {
  if (localStorage.token) {
    config.headers.authentication = localStorage.token
  }
  return config
}, error => {
  return Promise.reject(error)
})
export default {
  install (Vue) {
    Object.defineProperty(Vue.prototype, '$http', {value: Axios})
  }
}

額外專題：關於 Promise

Promise是抽象非同步處理物件以及對其進行各種操作的元件。在使用Promise進行一步處理的時候，我們必須按照介面規定的方法編寫處理程式碼，而不會像回撥函式那樣可以自己自由的定義回撥函式的引數，而必須遵守統一的程式設計方式來編寫程式碼。Promise的功能是可以將複雜的非同步處理輕鬆地進行模式化。

建構函式

var promise = new Promise(function(resolve, reject) {
    // 非同步處理
    // 處理結束後，呼叫resolve或reject
}

靜態方法

• Promise.reject() 返回一個使用接受到的值進行reject的新的promise物件
• Promise.resolove() 具有 .then 方法的物件。

使用Promise

1. 建立promise物件
   
   1. new Promise(fn) 返回一個promise物件
   2. 在 fn 中指定非同步處理
      
      • 處理結果正常，呼叫 resolve(處理結果值)
      • 處理結果錯誤，呼叫 reject(Error物件)
2. 建立XHR的promise物件

function getURL(URL) {
    return new Promise(function(resolve, reject) {
        var req = new XMLHttpRequest();
        req.open('GET', URL, true);
        req.onload = function() {
            if (req.status == 200) {
                resolve(req.responseText);
            } else {
                reject(new Error(req.statusText));
            }
        };

        req.onerror = function() {
            reject(new Error(req.statusText));
        };
        req.send();
    });
}

// 執行示例
var URL = "http://httpbin.org/get";
getURL(URL).then(function onFulfilled(value) {
    console.log(value);
}).catch(function onRejected(error) {
    console.error(error);
});

使用外掛

通過全域性方法 Vue.use() 使用外掛

// 呼叫 NewPlugin.install(Vue)
Vue.use(NewPlugin)

// 或是傳入選項物件
Vue.use(NewPlugin, {someOption : true})

Vue.js 官方提供的一些外掛 (例如 vue-router) 在檢測到 Vue 是可訪問的全域性變數時會自動呼叫 Vue.use()。然而在例如 CommonJS 的模組環境中，你應該始終顯式地呼叫 Vue.use()：

// 用 Browserify 或 webpack 提供的 CommonJS 模組環境時
var Vue = require('vue')
var VueRouter = require('vue-router')

// 不要忘了呼叫此方法
Vue.use(VueRouter)

Vue的外掛庫，點選進入

實踐視訊

後續釋出