vue——指令系統

時間 2019-11-16

標籤 vue 指令系統简体版

原文原文鏈接

　　指令系統，能夠聯想我們的cmd命令行工具，只要我輸入一條正確的指令，系統就開始幹活了。javascript

　　在vue中，指令系統，設置一些命令以後，來操做咱們的數據屬性，並展現到咱們的DOM上。css

　　在vue中提供了一套爲數據驅動視圖更爲方便的操做，這些操做被稱爲指令系統，以v-xxx所表示。如在angular中以ng-xxx開頭的也叫作指令。html

　　指令原理：指令中封裝了一些DOM行爲，結合屬性做爲一個暗號，暗號有對應的值，根據不一樣的值，框架會進行相應的DOM操做的綁定。vue

1、更新元素的指令

一、v-text

　　v-text等價於 {{}} ，實現原理：innerText。java

　　更新元素的 textContent(innerText)。若是要更新部分的 textContent ，須要使用 {{ Mustache }} 插值。node

<body>
    <div id="app">
        <!--<h3>{{msg}}</h3>-->
    </div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                // 數據屬性
                msg: 'hello指令系統',
                msg2: '<a href="#">這是個人數據</a>'
            },
            template:`
                <div>
                    <h4>{{msg}}</h4>
                    <h3 v-text='msg2'></h3>
                </div>
                `
        })
    </script>
</body>

　　顯示效果以下所示：react

二、v-html

　　v-html實現原理是js中的innerHTML方法。vue-cli

　　更新元素的 innerHTML 。注意：內容按普通 HTML 插入 - 不會做爲 Vue 模板進行編譯。若是試圖使用 v-html 組合模板，能夠從新考慮是否經過使用組件來替代。express

<body>
    <div id="app">
        <!--<h3>{{msg}}</h3>-->
    </div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                // 數據屬性
                msg: 'hello指令系統',
                msg2: '<a href="#">這是個人數據</a>'
            },
            template:`
                <div>
                    <h4>{{msg}}</h4>
                    <h3 v-text='msg2'></h3>
                    <h2 v-html="msg2"></h2>
                </div>
                `
        })
    </script>
</body>

　　顯示效果以下所示：api

使用v-html須要注意：

　　1）在網站上動態渲染任意 HTML 是很是危險的，由於容易致使 XSS 攻擊。只在可信內容上使用 v-html，永不用在用戶提交的內容上。

　　2）在單文件組件裏，scoped 的樣式不會應用在 v-html 內部，由於那部分 HTML 沒有被 Vue 的模板編譯器處理。若是你但願針對 v-html 的內容設置帶做用域的 CSS，你能夠替換爲 CSS Modules 或用一個額外的全局 <style> 元素手動設置相似 BEM 的做用域策略。

2、條件渲染

一、v-if（主要用來作dom元素顯示隱藏）

　　v-if：真正的條件渲染。

<head>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: #67c23a;
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                // 數據屬性
                msg: 'hello指令系統',
                isShow: true
            },
            template:`
                <div>
                    <h4 v-text="msg"></h4>
                    <div class="box" v-if="isShow"></div>
                </div>
                `
        })
    </script>
</body>

　　顯示效果：

　　注意：isShow變量，是數據屬性中存儲的值。要麼真(true)要麼假(false)。該屬性值爲true的時候，p標籤顯示，反之則不顯示。

（1）在`<template>` 元素上使用 `v-if` 條件渲染分組

　　由於 v-if 是一個指令，因此必須將它添加到一個元素上。可是若是想切換多個元素呢？此時能夠把一個 <template> 元素當作不可見的包裹元素，並在上面使用 v-if。最終的渲染結果將不包含 <template> 元素。

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

（2）v-else

　　還可使用v-esle指令來表示v-if的「else塊」：

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

　　刷新頁面有時會顯示「Now you see me」，有時會顯示「Now you don't」。

　　v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的後面，不然它將不會被識別。

（3）v-else-if

　　v-else-if，顧名思義，充當 v-if 的「else-if 塊」，能夠連續使用：

<div v-if="type === 'thunder'">
  打雷
</div>
<div v-else-if="type === 'rain'">
  下雨
</div>
<div v-else-if="type === 'lightning'">
  閃電
</div>
<div v-else>
  雷陣雨
</div>

　　相似於 v-else，v-else-if 也必須緊跟在帶 v-if 或者 v-else-if 的元素以後。

二、v-show

　　另外一個用於根據條件展現元素的選項是 v-show 指令。用法大體同樣：

<body>
    <div id="app"></div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                // 數據屬性
                msg: 'hello指令系統',
                isShow: false
            },
            template:`
                <div>
                    <h4 v-text="msg"></h4>
                    <div class="box" v-if="isShow"></div>
                    <div class="box" v-show="isShow"></div>
                </div>
                `
        })
    </script>
</body>

　　查看頁面標籤顯示以下：

　　如上圖所示，v-if和v-show的不一樣就是：帶有v-show的元素始終會被渲染並保留在DOM中，v-show只是簡單地切換元素的CSS屬性display。

　　注意：v-show不支持<template>元素，也不支持v-else。

三、v-if 與 v-show 的區別

　　v-if 是「真正」的條件渲染，由於它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷燬和重建。

　　v-if 也是惰性的：若是在初始渲染時條件爲假，則什麼也不作——直到條件第一次變爲真時，纔會開始渲染條件塊。

　　相比之下，v-show 就簡單得多——無論初始條件是什麼，元素老是會被渲染，而且只是簡單地基於 CSS 進行切換。

　　通常來講，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。所以，若是須要很是頻繁地切換，則使用 v-show 較好；若是在運行時條件不多改變，則使用 v-if 較好。

四、v-if與v-for一塊兒使用

　　當v-if與v-for一塊兒使用時，v-for具備比v-if更高的優先級。

3、指令系統之v-for

　　在Vue中，提供了一個v-for的指令，能夠渲染列表。

一、v-for的做用介紹

　　v-for能夠基於源數據屢次渲染元素或模板塊。這個指令必須用特定的語法alias in expression，爲當前遍歷的元素提供別名。

<body>
    <div id="app"></div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                // 數據屬性
                msg: 'hello指令系統',
                menuList:[    // 數組對象
                    {id:1, name:'大腰子', price:60},
                    {id:2, name:'宮保雞丁', price:30},
                    {id:3, name:'炸黃花魚', price:70}
                ]
            },
            template:`
                <div>
                    <h4 v-text="msg"></h4>
                    <ul>
                        <li v-for="item in menuList">
                            <h4>菜名：{{item.name}}</h4>
                            <p>價格：{{item.price}}</p>
                        </li>
                    </ul>
                </div>
                `
        })
    </script>
</body>

　　頁面顯示以下所示：

　　上面這個例子就是典型的數據驅動視圖，數據更改不用操做dom，視圖就隨之更改。

二、v-for遍歷數組

　　用 v-for 指令根據一組數組的選項列表進行渲染。v-for 指令須要使用 item in items 形式的特殊語法，items 是源數據數組而且 item 是數組元素迭代的別名。

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
    var example1 = new Vue({
      el: '#example-1',
      data: {
        items: [
          { message: 'Foo' },
          { message: 'Bar' }
        ]
      }
    })
</script>

　　顯示效果以下：

　　在v-for 塊中，咱們擁有對父做用域屬性的徹底訪問權限。

三、遍歷數組中每一個元素index

　　v-for 還支持一個可選的第二個參數爲當前項的索引：

<body>
    <div id="app"></div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                // 數據屬性
                msg: 'hello指令系統',
                menuList:[    // 數組對象
                    {id:1, name:'大腰子', price:60},
                    {id:2, name:'宮保雞丁', price:30},
                    {id:3, name:'炸黃花魚', price:70},
                    {id:4, name:'番茄炒蛋', price:10}
                ]
            },
            template:`
                <div>
                    <h4 v-text="msg"></h4>
                    <ul>
                        <li v-for="(item, index) in menuList">
                            <h4>{{index}}--菜名：{{item.name}}</h4>
                            <p>價格：{{item.price}}</p>
                        </li>
                    </ul>
                </div>
                `
        })
    </script>
</body>

　　顯示效果以下所示：

四、v-for遍歷對象

　　v-for 除了能夠用在數組上外，還能夠應用在對象上。

　　使用v-for能夠把obj的每一個key對應的value值遍歷出來，而且填到對應的li元素中。

　　當咱們在使用v-for進行渲染時，儘量使用渲染元素自身屬性的id給渲染的元素綁定一個key值，這樣在當前渲染元素的DOM結構發生變化時，可以單獨響應該元素而不觸發全部元素的渲染。

// 遍歷obj中每一個key對應的value
<ul>
    <li v-for="value in obj">{{value}}</li>
</ul>

// 遍歷obj的value和key
<ul>
    <li v-for="(value, key) in obj">{{value}}</li>
</ul>

// 遍歷obj的value、key和索引
<ul>
    <li v-for="(value, key, index) in obj">{{value}}</li>
</ul>

（1）示例一

<body>
    <div id="app"></div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                // 數據屬性
                msg: 'hello指令系統',
                object:{
                    name: 'alex',
                    age: 19,
                    fav: '喜歡拍av'
                }
            },
            template:`
                <div>
                    <h4 v-text="msg"></h4>
                    <ul>
                        <li v-for="(value, key) in object">
                            {{key}} ----- {{value}}
                        </li>
                    </ul>
                </div>
                `
        })
    </script>
</body>

　　執行結果以下所示：

（2）示例二

<template>
    <!-- 組件的頁面結構 -->
    <div id="app">
        <h3>{{msg}}</h3>
        <div v-html="title"></div>
        <ul>
            <!-- key綁定key的時候，若是數據中有id就綁定id，沒有id綁定index -->
            <li v-for="(item, index) in datas" :key="index">{{item}}</li>
        </ul>
    </div>
</template>

<script>
    // 組件內部的業務邏輯
export default {
  name: 'app',
  data () {
    return {
        msg: '來開始學習vue-cli腳手架項目',
        title: "<h3>皇家騎士</h3>",
        datas: [
            '抽菸','喝酒','燙頭','泡妞'
        ]
    }
  }
}
</script>

　　顯示效果以下所示：

4、class與style綁定(v-bind)

　　v-bind指令：實現對屬性的綁定，以動態的切換class；

　　v-bind:class='xxx'：xxx爲表達式結果的類型，除了字符串外，還能夠是對象或數組；

　　語法：v-bind:屬性名="常量 || 變量名 || 對象 || 數組"。

　　簡寫形式：屬性名='變量名.....'

　　v-bind 進行屬性綁定全部的屬性均可以進行綁定，注意只要使用了v-bind後面的字符串必定是數據屬性的值。

一、綁定字符串

<body>
    <div id="app">
        <h3 v-show="isShow" v-bind:title="title">我是一個三級標題</h3>
        <img v-bind:src="imgSrc" v-bind:title="time">
    </div>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
    // 指令系統 v-*
    var app = new Vue({
        el: "#app",
        data: {
            msg: "今天學習vue",
            show: true,
            isShow: true,
            title: "哈哈哈2323",
            imgSrc: './shiyuan.jpeg',
            time: `頁面加載於${new Date().toLocaleString()}`
        }
    })
</script>
</body>

　　當鼠標懸停在h3標籤幾秒以後，會顯示值「哈哈哈2333」。懸浮在圖片上會顯示time的值。

　　v-bind的簡便寫法（只寫冒號「:」不寫v-bind）：

<img :src="imgSrc" :title="time">

二、綁定HTML Class

　　在js中經常使用操做dom的css樣式屬性的方法有不少，在vue中能夠直接使用v-bind:class來給每一個標籤元素添加class。

    <style type="text/css">
        .box {
            width: 100px;
            height: 100px;
            background: red;
        }
        .box2 {
            background: green;
        }
        .box3 {
            background: yellow;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="box" v-bind:class="{box2:isGreen}"></div>
        <button @click="changeColor">切換顏色</button>
    </div>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
    // 指令系統 v-*
    var app = new Vue({
        el: "#app",
        data: {
            isGreen: false,
        },
        methods: {
            clickHandler: function(){
                console.log(this);   // this指的是當前的實例化對象
            },
            changeColor: function () {
                this.isGreen = !this.isGreen;
            }
        }
    })
</script>

　　能夠傳給 v-bind:class 一個對象，以動態地決定是否給div添加class="box2"。實現效果以下所示：

　　點擊按鈕後，切換爲綠色，添加了box2這個class。

　　因而可知v-bind:class 指令也能夠與普通的 class 屬性共存的。

三、數組語法

　　咱們能夠把一個數組傳給v-bind:class,以應用一個 class 列表：

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

　　渲染爲：

<div class="active text-danger"></div>

　　若是你也想根據條件切換列表中的 class，能夠用三元表達式：

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

　　這樣寫將始終添加 errorClass，可是隻有在 isActive 是 true時才添加 activeClass。

　　不過，當有多個條件 class 時這樣寫有些繁瑣。因此在數組語法中也可使用對象語法：

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

5、vue事件處理(v-on)

　　vue中使用v-on:click對當前DOM綁定click事件，注意：全部的原生js事件使用v-on均可以綁定。

一、監聽事件

　　能夠用 v-on 指令監聽DOM事件，並在觸發時運行一些JavaScript代碼。

（1）示例一：

<body>
    <div id="app">
        <!--插值語法react()  angular({})  (%%)  <%=%> -->
        <h3>{{1>2?"真的":"假的"}}</h3>
        <div v-if = 'show'>哈哈哈</div>
        <button v-on:click = "clickHandler">切換</button>
    </div>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
    // 指令系統 v-*
    var app = new Vue({
        el: "#app",
        data: {
            msg: "今天學習vue",
            show: false
        },
        methods: {
            clickHandler: function(){
                console.log(this);   // this指的是當前的實例化對象
                this.show = !this.show;
            }
        }
    })
</script>
</body>

　　結果：

　　注意：v-on有簡便寫法，能夠直接用@替代

<button @click = "clickHandler">切換</button>

（2）示例二：

        <button v-on:click="count+=1">加{{count}}</button>
    </div>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
    // 指令系統 v-*
    var app = new Vue({
        el: "#app",
        data: {
            count: 0
        },

　　當我點擊的按鈕的時候，button的文字會發生變化。顯示效果以下：

　　核心思想概念：數據驅動視圖、雙向的數據綁定。

（3）示例三：

　　v-on和v-if混合使用。

<body>
    <div id="app">
        <h4>{{msg}}</h4>
        <!--<div class="box" v-on:click="count+=1">{{count}}</div>-->
        <!-- v-if v-on -->
        <div class="box" v-on:click="isShow=false" v-if="isShow"></div>

    </div>

    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: "#app",
            template:``,
            // data在vue實例化中能夠是一個對象，也能夠是一個函數
            // 可是在組件中，data必須是一個函數，函數內容必定return一個對象
            // 數據驅動視圖
            data:function () {
                return {
                    msg: '事件處理',
                    count:0,
                    isShow:true
                }
            }
        })
    </script>
</body>

　　頁面顯示以下所示，點擊box後，isShow賦值爲false，因爲數據驅動視圖，box消失：

二、事件處理方法

　　許多事件處理邏輯會更爲複雜，因此直接把 JavaScript 代碼寫在 v-on 指令中是不可行的。所以 v-on 還能夠接收一個須要調用的方法名稱。

　　在vue中全部的事件都聲明在methods中。

（1）示例一：

<body>
<div id="example-2">
    <!-- `greet` 是在下面定義的方法名 -->
    <button v-on:click="greet">Greet</button>
</div>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
    var example2 = new Vue({
        el: '#example-2',
        data: {
            name: 'Vue.js'
        },
        // 在 `methods` 對象中定義方法
        methods: {
            greet: function (event) {
                // `this` 在方法裏指向當前 Vue 實例
                alert('Hello ' + this.name + '!')
                // `event` 是原生 DOM 事件
                if (event) {
                    alert(event.target.tagName)
                }
            }
        }
    })

    // 也能夠用 JavaScript 直接調用方法
    example2.greet() // => 'Hello Vue.js!'
</script>
</body>

　　顯示效果：

（2）示例二：

　　經過v-if和v-on實現頁面中DOM的建立和銷燬。

<body>
    <div id="app">
        <h4>{{msg}}</h4>
        <!--<div class="box" v-on:click="showHandler()" v-if="isShow"></div>-->
        <div class="box" v-if="isShow"></div>
        <button v-on:click="showHandler">{{btnText}}</button>
    </div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: "#app",
            template:``,
            // data在vue實例化中能夠是一個對象，也能夠是一個函數
            // 可是在組件中，data必須是一個函數，函數內容必定return一個對象
            // 數據驅動視圖
            data:function () {
                return {
                    msg: '事件處理',
                    count:0,
                    isShow:true,
                    btnText:'隱藏'
                }
            },
            // 在vue中全部的事件都聲明在methods
            methods:{
                showHandler(){    // 等價於showHandler:function(){}
                    console.log(this);   // vue實例化對象  Vue {_uid: 0, _isVue: true, $options: {…},... _self: Vue, …}
                    // this.isShow = false;

                    // 點擊切換
                    // if (this.isShow) {
                    //     this.isShow = false;
                    //     this.btnText = '顯示';
                    // }else{
                    //     this.isShow = true;
                    //     this.btnText = '隱藏';
                    // }
                    this.isShow = !this.isShow;   // 簡單寫法，點擊取反
                }
            }
        })
    </script>
</body>

　　經過點擊按鈕，數據驅動視圖，實現box顯示和隱藏。

（3）v-bind和v-on結合示例

　　v-bind:class 和 v-on 對頁面中的DOM樣式切換。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .active{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="app">
        <h4>{{msg}}</h4>
        <div class="box" v-if="isShow"></div>
        <button v-on:click="showHandler">{{btnText}}</button>

        <!--v-bind和v-on-->
        <div class="box" v-bind:class="{active:isYellow}"></div>
        <button v-on:click="changColor">切換</button>
    </div>

    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: "#app",
            template:``,
            // data在vue實例化中能夠是一個對象，也能夠是一個函數
            // 可是在組件中，data必須是一個函數，函數內容必定return一個對象
            // 數據驅動視圖
            data:function () {
                return {
                    msg: '事件處理',
                    count:0,
                    isShow:true,
                    btnText:'隱藏',
                    isYellow:false
                }
            },
            // 在vue中全部的事件都聲明在methods
            methods:{
                showHandler(){    // 等價於showHandler:function(){}
                    console.log(this);   // vue實例化對象  Vue {_uid: 0, _isVue: true, $options: {…},... _self: Vue, …}
                    // this.isShow = false;

                    // 點擊切換
                    this.isShow = !this.isShow;   // 簡單寫法，點擊取反
                },
                changColor(){
                    this.isYellow = !this.isYellow;
                }
            }
        })
    </script>
</body>

　　點擊將active的值切爲true，div也就經過v-bind多了一個html class屬性active，所以實現變色。

三、爲何要在HTML中監聽事件

　　注意到這種事件監聽的方式違背了關注點分離 (separation of concern) 這個長期以來的優良傳統。但沒必要擔憂，由於全部的 Vue.js 事件處理方法和表達式都嚴格綁定在當前視圖的 ViewModel 上，它不會致使任何維護上的困難。實際上，使用 v-on 有幾個好處：

掃一眼 HTML 模板便能輕鬆定位在 JavaScript 代碼裏對應的方法。
由於你無須在 JavaScript 裏手動綁定事件，你的 ViewModel 代碼能夠是很是純粹的邏輯，和 DOM 徹底解耦，更易於測試。
當一個 ViewModel 被銷燬時，全部的事件處理器都會自動被刪除。你無須擔憂如何本身清理它們。

6、指令系統之輪播圖實現

一、輪播圖簡單示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            list-style: none;
            width: 180px;
        }

        ul li {
            float: left;
            width: 45px;
            height: 30px;
            line-height: 30px;
            background: purple;
            text-align: center;
        }
        ul li.active{
            background: green;
        }
    </style>
</head>
<body>
<div id="slider">
    <!--默認圖片-->
    <img :src='currentImgSrc' alt="">
    <ul>
        <li v-for="(item,index) in imgArr" v-bind:class="
        {active:currentIndex==index}" v-on:click="clickHandler(index)">
            {{index+1}}
        </li>
    </ul>
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    // 數據驅動視圖
    var imgArr = [
        {id: 1, imgSrc: './img/1.jpg'},
        {id: 2, imgSrc: './img/2.jpg'},
        {id: 3, imgSrc: './img/3.jpg'},
        {id: 4, imgSrc: './img/4.jpg'}
    ];
    new Vue({
        el: "#slider",
        template:``,
        data(){
            return{
                imgArr: imgArr,   // 數據屬性中聲明數組
                currentIndex: 0,
                currentImgSrc: './img/1.jpg'
            }
        },
        methods: {
            clickHandler(index){
                this.currentIndex = index;  // 控制li標籤class屬性active的切換
                this.currentImgSrc = this.imgArr[index].imgSrc;   //控制img標籤，動態切換圖片
            }
        }
    })
</script>
</body>
</html>

　　顯示效果：

二、輪播圖進階示例及詳解

（1）v-for使用示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            list-style: none;
            width: 180px;
        }

        ul li {
            float: left;
            width: 30px;
            height: 30px;
            background: purple;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="lunbo">
        <!--默認圖片-->
        <img v-bind:src="currentSrc" >
        <ul>
            <li v-for="(item,index) in imgArr" @click="currentHandler(item)">
                {{index+1}}
            </li>
        </ul>
    </div>

    <button @click="nextImg">下一張</button>
</div>

<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            imgArr: [
                {id: 1, src: './1.jpg'},
                {id: 2, src: './2.jpg'},
                {id: 3, src: './3.jpg'},
                {id: 4, src: './4.jpg'}
            ],
            currentSrc: "./1.jpg",
            currentIndex: 0
        },
        methods: {
            currentHandler: function (item) {
                this.currentSrc = item.src
            },
            nextImg: function(){
                if (this.currentIndex==this.imgArr.length-1){   // 到最後一張的時候
                    this.currentIndex = -1;
                }
                this.currentIndex++;
                this.currentSrc = this.imgArr[this.currentIndex].src;   // 取下一張
            }
        }
    })
</script>
</body>
</html>

　　顯示效果以下所示：

　　不管是點擊li標籤仍是點擊按鈕均可以切換圖片顯示。

（2）實例生命週期鉤子

　　每一個 Vue 實例在被建立時都要通過一系列的初始化過程——例如，須要設置數據監聽、編譯模板、將實例掛載到 DOM 並在數據變化時更新 DOM 等。同時在這個過程當中也會運行一些叫作生命週期鉤子的函數，這給了用戶在不一樣階段添加本身的代碼的機會。

　　好比 created 鉤子能夠用來在一個實例被建立以後執行代碼：

<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            imgArr: [
                {id: 1, src: './1.jpg'},
                {id: 2, src: './2.jpg'},
                {id: 3, src: './3.jpg'},
                {id: 4, src: './4.jpg'}
            ],
            currentSrc: "./1.jpg",
            currentIndex: 0
        },
        created(){   // 生命週期方法
            setInterval(this.nextImg, 2000)  // setInterval() 方法可按照指定的週期（以毫秒計）來調用函數或計算表達式
        },
        methods: {
            currentHandler: function (item) {
                this.currentSrc = item.src
            },
            nextImg: function(){
                if (this.currentIndex==this.imgArr.length-1){   // 到最後一張的時候
                    this.currentIndex = -1;
                }
                this.currentIndex++;
                this.currentSrc = this.imgArr[this.currentIndex].src;   // 取下一張
            }
        }
    })
</script>

　　設置created生命週期方法後，頁面上自動輪播圖片：

　　也有一些其它的鉤子，在實例生命週期的不一樣階段被調用，如 mounted、updated 和 destroyed。生命週期鉤子的 this 上下文指向調用它的 Vue 實例。

　　created方法還能夠用來獲取cookie和session。

（3）鼠標移入/移出時中止/開啓定時器

<body>
<div id="app">
    <div class="lunbo">
        <!--默認圖片-->
        <img v-bind:src="currentSrc" @mouseenter="closeTimer" @mouseleave="openTimer">
        <ul>
            <li v-for="(item,index) in imgArr" @click="currentHandler(item)">
                {{index+1}}
            </li>
        </ul>
    </div>
    <button @click="nextImg">下一張</button>
</div>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            imgArr: [
                {id: 1, src: './1.jpg'},
                {id: 2, src: './2.jpg'},
                {id: 3, src: './3.jpg'},
                {id: 4, src: './4.jpg'}
            ],
            currentSrc: "./1.jpg",
            currentIndex: 0,
            timer: null   // 聲明定時器
        },
        created(){   // 生命週期方法
            this.timer = setInterval(this.nextImg, 2000);    // 開啓定時器
        },
        methods: {
            currentHandler: function (item) {
                this.currentSrc = item.src
            },
            nextImg: function(){
                if (this.currentIndex==this.imgArr.length-1){   // 到最後一張的時候
                    this.currentIndex = -1;
                }
                this.currentIndex++;
                this.currentSrc = this.imgArr[this.currentIndex].src;   // 取下一張
            },
            closeTimer(){
                clearInterval(this.timer)   // 取消由 setInterval() 設置的 timeout   清除定時器
            },
            openTimer(){
                this.timer = setInterval(this.nextImg, 1000);  // 開啓定時器
            }
        }
    })
</script>
</body>

　　注意開啓定時器時不能直接調用this.created生命週期方法，必須直接開啓定時器。

7、指令系統總結

一、注意v-bind和v-on的簡寫

　　v-bind的簡便寫法，能夠直接用 : 替代：

<img :src="imgSrc" :title="time">    <==對應==>   <img v-bind:src="imgSrc" v-bind:title="time">

　　v-on的簡便寫法，能夠直接用 @ 替代：

<button @click = "clickHandler">切換</button>  <==對應==>  <button v-on:click="clickHandler">切換</button>

二、對頁面的dom進行賦值的運算

　　v-test、v-html、{{}}都是對頁面的dom進行賦值，至關於js中的 innnerText 和 innerHTML。

三、對頁面的dom進行條件渲染

（1）v-if的內在過程

v-if = 'true':
    <!--建立-->
    var oP = document.createElement('p');
    oDiv.appendChild(op);
v-if = 'false':
    <!--銷燬-->
    oDiv.removeChild(op);

（2）v-show的內在過程

v-show = 'true':
    oDiv.style.display = 'block';
v-show = 'false':
    oDiv.style.display = 'none'

（3）v-bind內在過程

v-bind:class:
    oDiv.className += ' active'

四、v-if與v-show的區別

　　實現方式區別：v-if是根據後面數據的真假值判斷直接從Dom樹上刪除或重建元素節點；v-show只是在修改元素的css樣式，也就是display的屬性值，元素始終在Dom樹上。

　　編譯過程區別：v-if切換有一個局部編譯/卸載的過程，切換過程當中合適地銷燬和重建內部的事件監聽和子組件； v-show只是簡單的基於css切換。

　　編譯條件區別：v-if是惰性的，若是初始條件爲假，則什麼也不作，只有在條件第一次變爲真時纔開始局部編譯； v-show是在任何條件下（首次條件是否爲真）都被編譯，而後被緩存，並且DOM元素始終被保留。

　　性能消耗區別：v-if有更高的切換消耗，不適合作頻繁的切換； v-show有更高的初始渲染消耗，適合作頻繁的額切換。

五、vue的思想

　　vue是漸進式的JavaScript框架。大多數人以爲作加法比作減法簡單。

　　vue這個框架將作減法的事情（困難的部分）都幫忙作了，人們只須要簡單的部分就能實現複雜的dom操做。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

vue——指令系統

1、更新元素的指令

一、v-text

二、v-html

2、條件渲染

一、v-if（主要用來作dom元素顯示隱藏）

（1）在<template> 元素上使用 v-if 條件渲染分組

（2）v-else

（3）v-else-if

二、v-show

三、v-if 與 v-show 的區別

四、v-if與v-for一塊兒使用

3、指令系統之v-for

一、v-for的做用介紹

二、v-for遍歷數組

三、遍歷數組中每一個元素index

四、v-for遍歷對象

（1）示例一

（2）示例二

4、class與style綁定(v-bind)

一、綁定字符串

二、綁定HTML Class

三、數組語法

5、vue事件處理(v-on)

一、監聽事件

（1）示例一：

（2）示例二：

（3）示例三：

二、事件處理方法

（1）示例一：

（2）示例二：

（3）v-bind和v-on結合示例

三、爲何要在HTML中監聽事件

6、指令系統之輪播圖實現

一、輪播圖簡單示例

二、輪播圖進階示例及詳解

（1）v-for使用示例

（2）實例生命週期鉤子

（3）鼠標 移入/移出 時 中止/開啓 定時器

7、指令系統總結

一、注意v-bind和v-on的簡寫

二、對頁面的dom進行賦值的運算

三、對頁面的dom進行條件渲染

（1）v-if的內在過程

（2）v-show的內在過程

（3）v-bind內在過程

四、v-if與v-show的區別

五、vue的思想

（1）在`<template>` 元素上使用 `v-if` 條件渲染分組

（3）鼠標移入/移出時中止/開啓定時器