CDN

<!-- 必備基本庫 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 路由 -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!-- HTTP請(qǐng)求，官方不推薦，已廢棄 -->
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<!-- HTTP請(qǐng)求，官方推薦 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

實(shí)例化Vue對(duì)象

new Vue({
    el: '',
    data: '',
    methods: {...},
    filters: {...},
    components: {...},
    
    beforeCreate(){...},
    created(){...}
    ...
})

v-cloak解決插值表達(dá)式的閃爍問題

<h1 v-cloak>{{ title }}</h1>

v-html用于插入html代碼，插值表達(dá)式和v-text都會(huì)轉(zhuǎn)義成字符串

<div v-html="htmlContent"></div>

v-bind用于標(biāo)簽的屬性值綁定，簡(jiǎn)寫為：,v-bind中可以寫合法的js表達(dá)式

<input :value="value">

v-on事件綁定機(jī)制，簡(jiǎn)寫為@

<button @click="clickEvent">clickTest</button>

事件修飾符, e.g.: .stop

<div @click="clickEvent" style="background-color: gray">
    <button @click.stop="clickEvent">Click Event</button>
</div>

自定義過濾器（可用于格式化時(shí)間之類的）filter

過濾器調(diào)用時(shí)采用就近原則，即會(huì)優(yōu)先調(diào)用私有過濾器

<div id="app">{{ val | filterFunc }}}</div>

// Global Filter
Vue.filter('filterFunc', function(v){
    // ...
})

// Private Filter
var vm = new Vue({
    el: '#app',
    data: {
        val: ''
    },
    methods: { ... },
    filters: { // 兩個(gè)條件：過濾器名稱 和 處理函數(shù)
        filterFunc： function() {
            ...
        }
    }
})

自定義指令 directive

<div v-mineCommand></div>

// Global directive
Vue.directive('mineCommand', { // 定義時(shí)不需要v-
    // 函數(shù)第一個(gè)參數(shù)必須為el，表示被綁定的那個(gè)元素
    bind: function(el) {...}, // 每當(dāng)指令綁定到元素上時(shí)執(zhí)行，觸發(fā)一次
    // 和樣式相關(guān)的操作一般都放在bind中
    inserted: function() {...}, // 元素插入到dom中時(shí)執(zhí)行，觸發(fā)一次
    // 和js行為有關(guān)的最好放在inserted中，防止不生效
    update: function() {...} // 當(dāng)組件更新時(shí)執(zhí)行，可能會(huì)觸發(fā)多次
})

// Private Filter
var vm = new Vue({
    el: '#app',
    data: {
        val: ''
    },
    methods: {...},
    filters: {...},
    directives: {
        'mineCommand': {
            bind: function(){...},
            ...
        },
        'newCommand': function(el, bindting){...} // 簡(jiǎn)寫，相當(dāng)于直接把方法寫在bind與update中
    }
})

HTTP請(qǐng)求：vue-resource

this.$http.get('/url').then(function(){...})

全局配置HTTP接口根域名

注意配置后每次發(fā)送請(qǐng)求時(shí)url路徑應(yīng)以相對(duì)路徑開頭，前面不能帶/

Vue.http.options.root = 'http://www.liulongbin.top:3005/api/'
this.$http.get('getlunbo').then(res => {})

Vue動(dòng)畫 + Animate.css用法

1. 將需要?jiǎng)赢嬓Ч脑胤旁賢ransition標(biāo)簽內(nèi)
2. 控制需要?jiǎng)赢嬓Ч脑氐娘@示
3. 在css內(nèi)設(shè)置動(dòng)畫效果 或 直接引用Animate.css
   <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">...</transition>

創(chuàng)建/使用組件的幾種方法

1.使用Vue.extend()創(chuàng)建全局組件，使用Vue.component()裝載

var com1 = Vue.extend({
    template: '<h1>ComPonent1</h1>'
})
Vue.component('com1', com1)

// 簡(jiǎn)寫方式（省去中間值）
Vue.component('com2', Vue.extend({
    template: '<h1>ComPonent2</h1>'
}))

// 簡(jiǎn)寫方式（省去中間值，省去Vue.extend）
// 注意！無論是哪種方式創(chuàng)建的組件，template指向的模板內(nèi)容必須有且只有唯一的一層元素
Vue.component('com3', {
    template: '<h1>ComPonent3</h1>'
})

2.使用template標(biāo)簽

<div id="app">
    <com4 />
</div>

<!-- 核心：用template標(biāo)簽創(chuàng)建 -->
<template id="tem4">
    <div>
        <h1>Tem4</h1>
    </div>
</template>


Vue.component('com4', {
    template: '#tem4'
})

組件使用data時(shí)必須使用為一個(gè) function 并有一個(gè) return

Vue.component('...', {
  template: '...',
  data: function () {
    return {
      ...
    }
  }
})

組件切換方式：Vue提供的 component 標(biāo)簽

思路：點(diǎn)擊事件切換:is內(nèi)的屬性名稱
附：動(dòng)畫效果使用 transition 標(biāo)簽包裹，通過mode屬性設(shè)置組件切換時(shí)的模式

<component :is=""></component>

父組件 與 子組件

• 子組件默認(rèn)是無法訪問到父組件data上的數(shù)據(jù)和methods中的方法;
• 父組件可以在引用子組件的時(shí)候通過屬性綁定（v-bind）的形式把數(shù)據(jù)傳遞給子組件，子組件在收到數(shù)據(jù)后要按照屬性名原樣在 props 內(nèi)定義一遍;
• 父組件向子組件傳遞方法需使用事件綁定機(jī)制 v-on:funcName="parentFuncName" 并在子組件方法中綁定

// 父組件向子組件傳參
props: ['parentData']

// 父組件向子組件傳遞方法
var com = {
    template: 'tem',
    methods: {
        temClick(){ // 子組件的點(diǎn)擊事件
            this.$emit('funcName') // parentMeth即為父組件傳遞的方法
           this.$emit('funcName', 123) // 第二個(gè)參數(shù)開始即為傳參
        }
    }
}


通過 $refs 獲取DOM
<p id="gg" ref="gg">In God We Trust</p>


Vue.$refs.gg

vue-router 路由步驟

1. 設(shè)置組件模板對(duì)象
2. 定義路由匹配規(guī)則
3. 將路由規(guī)則對(duì)象注冊(cè)到實(shí)例，用于監(jiān)聽與展示
4. 官方不推薦使用vue-router，因?yàn)橐呀?jīng)停止更新

// 組件模板對(duì)象
var loginCom = {
    template: '<h1>Login</h1>'
}

// 路由匹配規(guī)則
var routerObj = new VueRouter({
    routes: [
        { path: '/login', component: loginCom },
        { path: '/main', component: mainCom }
    ]
})

new Vue ({
    ...
    //將路由匹配規(guī)則對(duì)象注冊(cè)到實(shí)例，用于監(jiān)聽與展示
    router: routerObj
})