1. 簡(jiǎn)介

Vue (讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。
Vue.js 的核心是一個(gè)允許采用簡(jiǎn)潔的模板語(yǔ)法來(lái)聲明式地將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)，區(qū)別于JQuery的DOM樹操作，Vue更多的是將數(shù)據(jù)與DOM進(jìn)行雙向綁定。
Vue另一個(gè)重要概念是組件，它是一種抽象，允許我們使用小型、獨(dú)立和通常可復(fù)用的組件構(gòu)建大型應(yīng)用。一個(gè)組件本質(zhì)上是一個(gè)擁有預(yù)定義選項(xiàng)的一個(gè) Vue 實(shí)例。

組件樹

2. Vue.js安裝與引入

Vue可以通過(guò)操作npm來(lái)進(jìn)行進(jìn)行腳手架方式安裝，詳細(xì)請(qǐng)見(jiàn)本系列第一章內(nèi)容第1章 基于vscode的vue開(kāi)發(fā)環(huán)境搭建，如果是初學(xué)者，也可以直接在HTML文件中通過(guò)常規(guī)的js方式引入Vue.js文件

對(duì)于制作原型或?qū)W習(xí)，可以這樣使用最新版本

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

對(duì)于生產(chǎn)環(huán)境，推薦鏈接到一個(gè)明確的版本號(hào)和構(gòu)建文件，以避免新版本造成的不可預(yù)期的破壞

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

如果你使用原生 ES Modules，也有一個(gè)兼容 ES Module 的構(gòu)建文件

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.esm.browser.js'
</script>

也可以在Vue官網(wǎng)上下載Vue的js文件至本地進(jìn)行引入

官網(wǎng)相關(guān)連接和介紹

3. Vue實(shí)例

每個(gè) Vue 應(yīng)用都是通過(guò)用 Vue 函數(shù)創(chuàng)建一個(gè)新的 Vue 實(shí)例開(kāi)始的

var vm = new Vue({
  // 選項(xiàng)
})

需要注意的是，Vue中的參數(shù)是一個(gè)json類型數(shù)據(jù)，請(qǐng)注意它的格式
當(dāng)一個(gè) Vue 實(shí)例被創(chuàng)建時(shí)，它將 data 對(duì)象中的所有的屬性加入到 Vue 的響應(yīng)式系統(tǒng)中。當(dāng)這些屬性的值發(fā)生改變時(shí)，視圖將會(huì)產(chǎn)生“響應(yīng)”，即匹配更新為新的值。

// 我們的數(shù)據(jù)對(duì)象
var data = { a: 1 }

// 該對(duì)象被加入到一個(gè) Vue 實(shí)例中
var vm = new Vue({
  data: data
})

// 獲得這個(gè)實(shí)例上的屬性
// 返回源數(shù)據(jù)中對(duì)應(yīng)的字段
vm.a == data.a // => true

// 設(shè)置屬性也會(huì)影響到原始數(shù)據(jù)
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
vm.a // => 3

當(dāng)這些數(shù)據(jù)改變時(shí)，視圖會(huì)進(jìn)行重渲染。

雙向綁定原理

這里唯一的例外是使用 Object.freeze()，這會(huì)阻止修改現(xiàn)有的屬性，也意味著響應(yīng)系統(tǒng)無(wú)法再追蹤變化。

<script>
var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data: obj
})
</script>
<div id="app">
  <p>{{ foo }}</p>
  <!-- 這里的 `foo` 不會(huì)更新！ -->
  <button v-on:click="foo = 'baz'">Change it</button>
</div>

下面是Vue實(shí)例的生命周期，隨著深入學(xué)習(xí)，會(huì)理解各個(gè)部分的進(jìn)行時(shí)機(jī)。

Vue生命周期

4. 模板語(yǔ)法

4.1 文本渲染

vue提供了其他幾種常見(jiàn)的文本渲染方式：

• v-text：更新元素的innerText，相當(dāng)于{{message}}形式
  以文本方式綁定文本數(shù)據(jù)，相當(dāng)于innerText
• v-html：更新元素的innerHTML
  以HTML方式解析并綁定文本數(shù)據(jù)，相當(dāng)于innerHTML
• v-once：靜態(tài)插值
  以文本方式綁定文本數(shù)據(jù)，但綁定后不可更改，在控制臺(tái)上通過(guò)demo.message4='xxxx'進(jìn)行測(cè)驗(yàn)，與v-text方式進(jìn)行比較。
• v-pre：原格式輸出
  相當(dāng)于<pre>標(biāo)記的功能

<div id="demo">
 <div>{{message0}}</div>
 <div v-text="message1"></div>
 <div v-html="message2"></div>
 <div v-once>{{message3}}</div>
 <div v-pre>{{message4}}</div>
</div>  
<script>
var demo = new Vue({
    el:"#demo",
    data:{
        message0: "普通文本渲染1",
        message1: "<b>普通文本渲染2</b>",
        message2: "<b>HTML文本渲染</b>",
        message3: "<b>靜態(tài)插值渲染</b>",
        message4: "原文本渲染"
    }
})
</script>

運(yùn)行結(jié)果

運(yùn)行結(jié)果

4.2 屬性綁定

屬性綁定使用v-bind:屬性名完成，也可以使用語(yǔ)法糖省略v-bind,直接使用:屬性名完成。其主要綁定方式有以下幾種

• 常規(guī)綁定方式
  為屬性title綁定數(shù)據(jù)message，鼠標(biāo)懸停在文字上會(huì)有氣泡文字顯示

<div id="demo">
    <div v-bind:title="message">{{message}}</div>
    <div :title="message">{{message}}</div>
</div>  
<script>
var demo = new Vue({
    el:"#demo",
    data:{
        message: '這是一些測(cè)試文本'
    }
})
</script>

• 對(duì)象綁定方式
  通過(guò)設(shè)置json對(duì)象的方式，為某個(gè)屬性（主要是class）設(shè)置一組數(shù)據(jù)。
  下述示例演示的是為各個(gè)div設(shè)置不同的背景顏色和文字顏色

<div id="demo">
    <div v-bind:class="{btext:sepText,aurora:!showGround}">{{message}}</div>
    <div v-bind:class="{btext:sepText,aurora:showGround}">{{message}}</div>
    <div v-bind:class="styleEffect">{{message}}</div>
</div>  
<style type="text/css">
    div{
        width:200px;
        height: 80px;
    }
    .btext{
        color: darkorange;/*橙黃文字顏色*/
    }
    .aurora{
        background-color: darkturquoise;/*青藍(lán)背景顏色*/
    }
</style>
<script>
var demo = new Vue({
    el:"#demo",
    data:{
        message: '這是一些測(cè)試文本',
        sepText: true,
        showGround: false,
        styleEffect:{
            'btext':false,
            'aurora': true
        }   
    }
})
</script>

運(yùn)行結(jié)果：

運(yùn)行結(jié)果

解析運(yùn)行的HTML：

解析運(yùn)行的HTML

• 數(shù)組綁定方式
  通過(guò)把一個(gè)數(shù)組傳給v-bind:class，以應(yīng)用一個(gè)class列表。
  個(gè)人認(rèn)為這種方式對(duì)于樣式的應(yīng)用控制不算方便。

<div id="demo">
    <div :class="[sepText,showGround]">{{message}}</div>
</div>  
<style type="text/css">
    div{
        width:200px;
        height: 80px;
    }
    .btext{
        color: darkorange;
    }
    .aurora{
        background-color: darkturquoise;
    }
</style>
<script>
var demo = new Vue({
    el:"#demo",
    data:{
        message: '這是一些測(cè)試文本',
        sepText: 'btext',
        showGround: 'aurora',
    }
})
</script>

運(yùn)行結(jié)果：

運(yùn)行結(jié)果

解析運(yùn)行的HTML：

解析運(yùn)行的HTML

• 三目運(yùn)算綁定
  可以通過(guò)三目運(yùn)算符控制樣式的使用

<div id="demo">
    <div :class="[isBgA ? bgColorA : bgColorB]">{{message}}</div>
</div>  
<style type="text/css">
    div{
        width:200px;
        height: 80px;
    }
    .california{
        background-color: darkorange;
    }
    .aurora{
        background-color: darkturquoise;
    }
</style>
<script>
var demo = new Vue({
    el:"#demo",
    data:{
        message: '這是一些測(cè)試文本',
        bgColorA: 'california',
        bgColorB: 'aurora',
        isBgA: true
    }
})
</script>

運(yùn)行結(jié)果：

運(yùn)行結(jié)果

解析運(yùn)行的HTML

• 內(nèi)聯(lián)樣式綁定
  內(nèi)聯(lián)CSS樣式中，CSS屬性名的變化與原生JS解析CSS的方式一致

<div id="demo">
    <div :style="{color:tcolor, backgroundColor: bcolor}">{{message}}</div>
</div>  
<style type="text/css">
    div{
        width:200px;
        height: 80px;
    }
</style>
<script>
var demo = new Vue({
    el:"#demo",
    data:{
        message: '這是一些測(cè)試文本',
        tcolor: 'darkorange',
        bcolor: 'darkturquoise'
    }
})
</script>

運(yùn)行結(jié)果：

運(yùn)行結(jié)果

解析運(yùn)行的HTML：

解析運(yùn)行的HTML

4.3 事件處理

• 事件處理語(yǔ)法
  可以用 v-on:事件名稱 指令綁定一個(gè)事件監(jiān)聽(tīng)器，通過(guò)它調(diào)用我們 Vue 實(shí)例中定義的方法。
  v-on:事件名稱可以簡(jiǎn)寫為@事件名稱

<div id="demo">
    <button type="button" v-on:click="mymethod1">{{counter1}}</button>
    <button type="button" @click="mymethod2">{{counter2}}</button>
</div>
<script type="text/javascript">
    var demo = new Vue({
        el: "#demo",
        data:{
            counter1:0,
            counter2:100
        },
        methods:{
            mymethod1(){
                this.counter1++;
            },
            mymethod2(){
                this.counter2--;
            }
        }
    });
</script>

運(yùn)行結(jié)果：點(diǎn)擊按鈕時(shí)會(huì)增加和減少數(shù)字

運(yùn)行結(jié)果

• 事件修飾符
  事件修飾符的作用是對(duì)事件進(jìn)行一些特殊控制，其語(yǔ)法規(guī)則為v-on:事件名稱.事件修飾符或@事件名稱.事件修飾符

<div id="demo">
    默認(rèn)事件：<button type="button" v-on:click="mymethod1">{{counter1}}</button><br>
    <div @click="changeTextColor">
        阻止事件捕獲和事件冒泡：
        <span :style="{color: [isTC ? colorA : colorB]}">顏色</span>
        <button v-on:click="mymethod2">non-stop:{{counter2}}</button>
        <button v-on:click.stop="mymethod3">stop:{{counter3}}</button>
    </div>
    阻止默認(rèn)事件：<a  @click.prevent="mymethod4">{{counter4}}</a><br>
    一次性事件：<button type="button" @click.once="mymethod5">{{counter5}}</button><br>
</div>
<script type="text/javascript">
    var demo = new Vue({
        el: "#demo",
        data:{
            counter1:0,
            counter2:0,
            counter3:0,
            counter4:0,
            counter5:0,
            colorA: "blue",
            colorB: "red",
            isTC: true
        },
        methods:{
            mymethod1(){
                this.counter1++;
            },
            mymethod2(){
                this.counter2++;
            },
            mymethod3(){
                this.counter3++;
            },
            mymethod4(){
                this.counter4++;
            },
            mymethod5(){
                this.counter5++;
            },
            changeTextColor(){
                this.isTC = !this.isTC;
            }
        }
    });
</script>

運(yùn)行結(jié)果：

運(yùn)行結(jié)果

• 鼠標(biāo)修飾符
  可以通過(guò)使用@鼠標(biāo)點(diǎn)擊相關(guān)事件.鼠標(biāo)修飾符來(lái)控制鼠標(biāo)各個(gè)按鍵的事件
  鼠標(biāo)相關(guān)事件：click，mouseup，mousedown

<div id="demo">
    <button @click.right="rightMethod" @click.middle="middleMethod" @click="leftMethod">{{message}}</button>
</div>
<script type="text/javascript">
    var demo = new Vue({
        el: "#demo",
        data:{
            message: '請(qǐng)點(diǎn)擊'
        },
        methods:{
            rightMethod(){
              this.message = '鼠標(biāo)右鍵';
            },
            middleMethod(){
              this.message = '鼠標(biāo)滾輪';
            },
            leftMethod(){
              this.message = '鼠標(biāo)左鍵';
            }
        }
    });
</script>

運(yùn)行結(jié)果：分別使用鼠標(biāo)左鍵，滾輪和右鍵點(diǎn)擊按鈕

運(yùn)行結(jié)果

• 按鍵修飾符
  vue中支持監(jiān)控常用的按鍵，允許在按鍵事件中添加按鍵修飾符，其格式為@按鍵事件.按鍵修飾符
  按鍵事件：keypress，keyup， keydown

<div id="demo">
    <button v-on:keyup.enter="enter">{{message1}}</button>
    <button @keyup.tab="tab">{{message2}}</button>
    <button @keyup="show($event)">{{message3}}</button>
</div>
<script>
    var demo = new Vue({
        el:'#demo',
        data:{
            message1: "hello",
            message2: "hello",
            message3: "hello"
        },
        methods:{
            enter(){
                this.message1 = 'enter';
            },
            tab(){
                this.message2 = 'tab';
            },
            show(e){
                this.message3 = e.keyCode;
            }
        }
    })
</script> 

運(yùn)行結(jié)果：使各個(gè)按鈕分別獲得焦點(diǎn)后依次觸發(fā)鍵盤按鍵測(cè)試結(jié)果

4.4 條件指令

• v-if

v-if的用法時(shí)當(dāng)值為true時(shí)進(jìn)行渲染，當(dāng)值為false時(shí)，頁(yè)面中不會(huì)進(jìn)行渲染。

<div id="demo">
    <div v-if="showInfo">{{message1}}</div>
    <div v-if="hideInfo">{{message2}}</div>
</div>  
<style type="text/css">
    #demo{
        width:200px;
        height: 80px;
    }
</style>
<script>
var demo = new Vue({
    el:"#demo",
    data:{
        message1: '這是顯示的文本',
        message2: '這是隱藏的文本',
        showInfo: true,
        hideInfo: false
    }
})
</script>

運(yùn)行結(jié)果：顯示“這是顯示的文本”，更改showInfo和hideInfo的值可以看到不同結(jié)果

• v-else

與v-if形成互斥條件

<div id="demo">
    <div v-if="showInfo">{{message1}}</div>
    <div v-else>{{message2}}</div>
</div>  
<style type="text/css">
    #demo{
        width:200px;
        height: 80px;
    }
</style>
<script>
var demo = new Vue({
    el:"#demo",
    data:{
        message1: '這是顯示的文本',
        message2: '這是隱藏的文本',
        showInfo: false
    }
})
</script>
</body>

運(yùn)行結(jié)果：顯示“這是隱藏的文本”，更改showInfo的值可以看到不同結(jié)果

• v-else-if

多個(gè)條件互斥條件，相當(dāng)于if...else if...else

<div id="demo">
    <div v-if="vtype == 1">{{message1}}</div>
    <div v-else-if="vtype == 2">{{message2}}</div>
    <div v-else>{{message3}}</div>
</div>  
<style type="text/css">
    #demo{
        width:200px;
        height: 80px;
    }
</style>
<script>
var demo = new Vue({
    el:"#demo",
    data:{
        message1: '這是文本1',
        message2: '這是文本2',
        message3: '這是文本3',
        vtype:1
    }
})
</script>

運(yùn)行結(jié)果：顯示“這是文本1”，更愛(ài)vtype的值可以看到不同結(jié)果

• v-show

v-show也是根據(jù)條件展示元素的指令。帶有 v-show 的元素始終會(huì)被渲染并保留在 DOM 中。v-show 是簡(jiǎn)單地切換元素的 CSS 屬性display來(lái)控制元素的顯示和隱藏 。

<div id="demo">
        <p v-show="message">message</p>
        <p v-show="infor">infor</p>
    </div>
    <script>
        var demo1 = new Vue({
            el:'#demo',
            data:{
                message:true,
                infor:false
            }
        })
    </script> 

頁(yè)面運(yùn)行源碼

也就說(shuō)，雖然第二個(gè)p元素沒(méi)有顯示出來(lái)，但是頁(yè)面渲染時(shí)是存在的，只是多了一個(gè)隱藏屬性。

通過(guò)上面的例子，我們可以發(fā)現(xiàn)兩者的不同：
(1) v-if是真正的條件渲染，因?yàn)樗鼤?huì)確保在切換過(guò)程中條件塊內(nèi)的事件監(jiān)聽(tīng)器和子組件適當(dāng)?shù)乇讳N毀和重建。
(2) v-if是惰性的，只有當(dāng)條件為true時(shí)才會(huì)渲染，如果條件為false則什么都不做
(3) v-if有很高的切換開(kāi)銷，適用于條件不太容易改變的時(shí)候
v-show不管條件是true還是false都會(huì)進(jìn)行渲染。并且只是簡(jiǎn)單地基于 CSS 進(jìn)行切換
(4) v-show有很高的初始渲染開(kāi)銷，適用于非常頻繁地切換

4.5 循環(huán)指令

• v-for

value 是遍歷得到的屬性值，key 是遍歷得到的屬性名，index 是遍歷次序，這里的 key/index 都是可選參數(shù)，這個(gè)指令其實(shí)可以寫成 v-for="value in xxx"

<div id="demo">
    <ul>
        <li v-for="value in object">
            {{ value }}
        </li>
    </ul>
</div>
<script>
    var demo = new Vue({
        el: '#demo',
        data: {

            object: {
                firstName: 'John',
                lastName: 'Doe',
                age: 30
            }
        }
    })
</script>

運(yùn)行結(jié)果:

運(yùn)行結(jié)果

<div id="demo">
    <div v-for="(value, key,index) in object">
        {{ index }} : {{ key }} : {{ value }}
    </div>
</div>
<script>
    var demo = new Vue({
        el: '#demo',
        data: {

            object: {
                firstName: 'John',
                lastName: 'Doe',
                age: 30
            }
        }
    })
</script>

運(yùn)行結(jié)果

運(yùn)行結(jié)果

4.6 方法，計(jì)算屬性和偵聽(tīng)器

在vue中處理復(fù)雜的邏輯的時(shí)候，我們經(jīng)常使用計(jì)算屬性，方法和偵聽(tīng)器。

• methods
  正如他的名字一樣，它們是掛載在對(duì)象上的函數(shù)，通常是Vue實(shí)例本身或Vue組件，需要主動(dòng)去觸發(fā)。

<div id="demo" @click="getFullName">
    {{fullName}}
</div>
<script>
    var demo = new Vue({
        el: '#demo',
        data: {
            firstName: 'Monkey',
            middleName: 'D',
            lastName: 'Luffy',
            fullName: '請(qǐng)點(diǎn)擊',
        },
        methods: {
            getFullName: function(){
                this.fullName = this.firstName + "."+this.middleName+"."+this.lastName;
            }
        }
    })
</script>

運(yùn)行結(jié)果：點(diǎn)擊后文字變?yōu)椤癕onkey.D.Luffy”

• computed

computed被稱為計(jì)算屬性，通常用于多個(gè)數(shù)據(jù)的值影響某一個(gè)數(shù)據(jù)時(shí)。
與methods不同的是計(jì)算屬性是根據(jù)依賴關(guān)系進(jìn)行緩存的計(jì)算，并且只在需要的時(shí)候進(jìn)行更新。

<div id="demo">
    {{fullName}}
</div>
<script>
    var demo = new Vue({
        el: '#demo',
        data: {
            firstName: 'Monkey',
            middleName: 'D',
            lastName: 'Luffy',
        },
        computed: {
            fullName: function(){
                return this.firstName + "."+this.middleName+"."+this.lastName;
            }
        }
    })
</script>

運(yùn)行結(jié)果：頁(yè)面顯示“Monkey.D.Luffy”。
fullName屬性是由firstName，middleName和lastName三者組成的

• watch
  watch被稱為觀察者，通常用于某一個(gè)數(shù)據(jù)可能影響多個(gè)數(shù)據(jù)的值時(shí)。

<div id="demo">
    company:{{company}}<br>
    emp1:{{emp1}}<br>
    emp2:{{emp2}}<br>
    <input type="button" @click="changeCompany" value="點(diǎn)我" />
</div>
<script>
    var demo = new Vue({
        el: '#demo',
        data: {
            company: '鄉(xiāng)村愛(ài)情',
            emp1: '鄉(xiāng)村愛(ài)情-趙四',
            emp2: '鄉(xiāng)村愛(ài)情-劉能'
        },
        methods:{
            changeCompany: function (){
                this.company = '東北F2';
            }
        },
        watch: {
            company: function(newCompany){
                this.emp1 = newCompany+ '-趙四';
                this.emp2 = newCompany+ '-劉能';
            }
        }
    })
</script>

運(yùn)行結(jié)果：點(diǎn)擊按鈕后切換兩位emp的名字前綴。
此時(shí)兩個(gè)數(shù)據(jù)emp1和emp2全部依賴于數(shù)據(jù)company

4.7 表單綁定

v-bind實(shí)現(xiàn)了數(shù)據(jù)的單向綁定，將vue實(shí)例中的數(shù)據(jù)同元素屬性值進(jìn)行單向綁定.vue也支持?jǐn)?shù)據(jù)雙向綁定，這時(shí)使用v-model在控件上實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。

• v-model

<div id="demo">
    輸入:<input type="text" v-model="message"><br>
    <div>{{message}}</div>      
</div>
<script>
    var demo = new Vue({
        el: '#demo',
        data: {
            message: ''
        }
    })
</script>

運(yùn)行結(jié)果：文本框輸入內(nèi)容會(huì)自動(dòng)顯示在其下方的div
控制臺(tái)更改demo.message的值，文本框中的內(nèi)容也會(huì)改變

• v-model.lazy
  將上個(gè)例子中的v-model更改為v-model.lazy可以看到當(dāng)文本框失去焦點(diǎn)時(shí)才會(huì)觸發(fā)message更改

• v-model.number
  對(duì)于type='number'的控件，v-model在綁定時(shí)會(huì)將其數(shù)據(jù)處理為string類型，可以通過(guò)v-model.number解決。

<div id="demo">
    輸入1:<input type="number" v-model.number="message1"><br>
    輸入2:<input type="number" v-model="message2"><br>
    <div>內(nèi)容1:{{message1}},類型：{{mess1type}}</div>        
    <div>內(nèi)容2:{{message2}},類型：{{mess2type}}</div>        
</div>
<script>
    var demo = new Vue({
        el: '#demo',
        data: {
            message1: 0,
            message2: 0
        },
        computed:{
            mess1type: function(){
                return typeof(this.message1);
            },
            mess2type: function(){
                return typeof(this.message2);
            }
        }
    })
</script>

運(yùn)行結(jié)果

運(yùn)行結(jié)果

• v-model.trim
  trim用于去除內(nèi)容兩側(cè)多余的空白字符

<div id="demo">
        <input v-model.trim="mess3">
        <p>mess3 is :{{ mess3 }}</p>
</div>
<script>
        var demo = new Vue({
            el:'#demo',
            data:{
                mess3:''
            },
        })
</script>

運(yùn)行結(jié)果

運(yùn)行結(jié)果

4.8 過(guò)濾器

在vue2.0以前的版本中vue內(nèi)置的過(guò)濾器，但是因?yàn)槿狈僇avaScript的靈活性，在vue2.0版本中已經(jīng)刪除了內(nèi)置過(guò)濾器，所以需要自己注冊(cè)過(guò)濾器。
可以定義本地（在某一個(gè)template里面定義filter）過(guò)濾器，或者定義全局（global）過(guò)濾器。如果定義了一個(gè)全局過(guò)濾器，它必須在Vue實(shí)列之前聲明。

• 全局過(guò)濾器

<div id="demo">
    {{message1 | showTime}}<br>
    {{message2 | showTime}}<br>
</div>
<script>
    Vue.filter("showTime", function (value){
        return value+"["+new Date()+"]";
    });
    var demo = new Vue({
        el: '#demo',
        data: {
            message1: "你好",
            message2: "測(cè)試"
        }
    })
</script>

運(yùn)行結(jié)果：

運(yùn)行結(jié)果

• 本地過(guò)濾器

本地過(guò)濾器存儲(chǔ)在vue組件中，作為filters屬性中的函數(shù)，我們可以注冊(cè)多個(gè)過(guò)濾器存儲(chǔ)在其中。

<div id="demo">
    {{message}}<br>
    {{message | reverse}}<br>
</div>
<script>
    var demo = new Vue({
        el: '#demo',
        data: {
            message: "這是一段測(cè)試文本"
        },
        filters:{
            reverse:function (value){
                value = value.toString();
                return value.split('').reverse().join('');
            }
        }
    })
</script>

運(yùn)行結(jié)果

運(yùn)行結(jié)果

• 串聯(lián)過(guò)濾器

過(guò)濾器除了單獨(dú)使用之外，我們還可以對(duì)過(guò)濾器進(jìn)行串聯(lián)使用，也可以在v-bind中使用過(guò)濾器，語(yǔ)法與{{format}}中的語(yǔ)法一致。

<div id="demo">
    {{message}}<br>
    {{message | reverse}}<br>
    {{message | length}}<br>
    {{message | reverse | length}}<br>
</div>
<script>
    var demo = new Vue({
        el: '#demo',
        data: {
            message: "這是一段測(cè)試文本"
        },
        filters:{
            reverse:function (value){
                value = value.toString();
                return value.split('').reverse().join('');
            },
            length: function(value){
                value = value.toString();
                return "文本\""+value+"\"的長(zhǎng)度:"+value.length;
            }
        }
    })
</script>

運(yùn)行結(jié)果：

運(yùn)行結(jié)果

• 過(guò)濾器傳參

<div id="demo">
    {{message}}<br>
    {{message | test(1,2)}}<br>
    {{message | test(2,3)}}<br>
</div>
<script>
    var demo = new Vue({
        el: '#demo',
        data: {
            message: 5
        },
        filters:{
            test:function (value, x, y){
                value = Number(value);
                return value*x*y;
            }
        }
    })
</script>

運(yùn)行結(jié)果

運(yùn)行結(jié)果

• 雙向過(guò)濾器
  下述內(nèi)容當(dāng)前vue版本報(bào)錯(cuò)，暫未解決

<div id="demo">
    <input type="text" v-model="msg | currencyDisplay"><br>
    <span>{{msg}}</span>
</div>
<script>
    Vue.filter('currencyDisplay', {
        // model -> view
        // 在更新 `<input>` 元素之前格式化值
        read: function(val) {
            return '￥' + val.toFixed(2);
        },
        // view -> model
        // 在寫回?cái)?shù)據(jù)之前格式化值
        write: function(val, oldVal) {
            var number = +val.replace(/[^\d.]/g, '');
            return isNaN(number) ? 0 : parseFloat(number.toFixed(2));
        }
    })
    var demo = new Vue({
        el:"#demo",
        data: {
            msg:1024
        }
    })
</script>

4.9 自定義指令

除了核心功能默認(rèn)內(nèi)置的指令外，vue也允許用戶注冊(cè)自定義指令。雖然在vue2.0中，代碼復(fù)用和抽象的主要形式是組件，但是有些情況下，仍需要對(duì)普通DOM元素進(jìn)行底層操作，這個(gè)時(shí)候就需要用到自定義指令。

• 自定義指令

<div id="demo">
    <div>{{message}}</div>
    <div v-red>{{message}}</div>
</div>
<script>
    Vue.directive('red', function (el){
        el.style.color = 'red';
    })      
    var demo = new Vue({
        el:"#demo",
        data: {
            message:"測(cè)試文本"
        }
    })
</script>

運(yùn)行結(jié)果

運(yùn)行結(jié)果

• 傳遞參數(shù)

傳參前需要保證傳參的值在vue的data中有聲明，調(diào)用時(shí)需要通過(guò)data.value的方式調(diào)出具體的值。

<div id="demo">
    <div>{{message}}</div>
    <div v-color='red'>{{message}}</div>
    <div v-color='blue'>{{message}}</div>
</div>
<script>
    Vue.directive('color',{
        bind: function(el, c) {
            el.style.color = c.value;
        }
    })
    var demo = new Vue({
        el: "#demo",
        data: {
            message: "測(cè)試文本",
            red: 'red',
            blue: 'blue'
        }
    })
</script>

• 事件處理
  在聲明自定義指令時(shí)，指令的觸發(fā)時(shí)機(jī)也是不同的。

<div id="demo">
    輸入1:<input type="text" v-model="message"><br>
    輸入2:<input type="text" v-model="message" v-focus><br>
</div>
<script>
    Vue.directive('focus',{
        inserted: function(el) {
            el.focus();
        }
    });
    var demo = new Vue({
        el: "#demo",
        data: {
            message: "測(cè)試文本"
        }
    })
</script>

運(yùn)行結(jié)果

輸入2進(jìn)入頁(yè)面時(shí)獲得焦點(diǎn)