指令系統，可以聯想咱們的cmd命令行工具，只要我輸入一條正確的指令，系統就開始干活了。
在vue中，指令系統，設置一些命令之后，來操作我們的數據屬性，並展示到我們的DOM上。
在vue中提供了一套為數據驅動視圖更為方便的操作，這些操作被稱為指令系統，以v-xxx所表示。如在angular中以ng-xxx開頭的也叫做指令。
指令原理：指令中封裝了一些DOM行為，結合屬性作為一個暗號，暗號有對應的值，根據不同的值，框架會進行相應的DOM操作的綁定。
一、更新元素的指令
1、v-text
v-text等價於 {{}} ，實現原理：innerText。
更新元素的 textContent(innerText)。如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。
<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>
顯示效果如下所示：
2、v-html
v-html實現原理是js中的innerHTML方法。
更新元素的 innerHTML 。注意：內容按普通 HTML 插入 - 不會作為 Vue 模板進行編譯。如果試圖使用 v-html 組合模板，可以重新考慮是否通過使用組件來替代。
<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>
顯示效果如下所示：
使用v-html需要注意：
1）在網站上動態渲染任意 HTML 是非常危險的，因為容易導致 XSS 攻擊。只在可信內容上使用 v-html，永不用在用戶提交的內容上。
2）在單文件組件里，scoped 的樣式不會應用在 v-html 內部，因為那部分 HTML 沒有被 Vue 的模板編譯器處理。如果你希望針對 v-html 的內容設置帶作用域的 CSS，你可以替換為 CSS Modules 或用一個額外的全局 <style> 元素手動設置類似 BEM 的作用域策略。
二、條件渲染
1、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 的元素之后。
2、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。
3、v-if 與 v-show 的區別
v-if 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。
v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊。
相比之下，v-show 就簡單得多——不管初始條件是什么，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。
一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。
4、v-if與v-for一起使用
當v-if與v-for一起使用時，v-for具有比v-if更高的優先級。
三、指令系統之v-for
在Vue中，提供了一個v-for的指令，可以渲染列表。
1、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，視圖就隨之更改。
2、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 塊中，我們擁有對父作用域屬性的完全訪問權限。
3、遍歷數組中每個元素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>
顯示效果如下所示：
4、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>
顯示效果如下所示：
四、class與style綁定(v-bind)
v-bind指令：實現對屬性的綁定，以動態的切換class；
v-bind:class='xxx'：xxx為表達式結果的類型，除了字符串外，還可以是對象或數組；
語法：v-bind:屬性名="常量 || 變量名 || 對象 || 數組"。
簡寫形式：屬性名='變量名.....'
v-bind 進行屬性綁定所有的屬性都可以進行綁定，注意只要使用了v-bind后面的字符串一定是數據屬性的值。
1、綁定字符串
<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">
2、綁定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 屬性共存的。
3、數組語法
我們可以把一個數組傳給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>
五、vue事件處理(v-on)
vue中使用v-on:click對當前DOM綁定click事件，注意：所有的原生js事件使用v-on都可以綁定。
1、監聽事件
可以用 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消失：
2、事件處理方法
許多事件處理邏輯會更為復雜，所以直接把 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，因此實現變色。
3、為什么要在HTML中監聽事件
注意到這種事件監聽的方式違背了關注點分離 (separation of concern) 這個長期以來的優良傳統。但不必擔心，因為所有的 Vue.js 事件處理方法和表達式都嚴格綁定在當前視圖的 ViewModel 上，它不會導致任何維護上的困難。實際上，使用 v-on 有幾個好處：
-
掃一眼 HTML 模板便能輕松定位在 JavaScript 代碼里對應的方法。
-
因為你無須在 JavaScript 里手動綁定事件，你的 ViewModel 代碼可以是非常純粹的邏輯，和 DOM 完全解耦，更易於測試。
-
當一個 ViewModel 被銷毀時，所有的事件處理器都會自動被刪除。你無須擔心如何自己清理它們。
六、指令系統之輪播圖實現
1、輪播圖簡單示例
<!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>
顯示效果：
2、輪播圖進階示例及詳解
（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生命周期方法，必須直接開啟定時器。
七、指令系統總結
1、注意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>
2、對頁面的dom進行賦值的運算
v-test、v-html、{{}}都是對頁面的dom進行賦值，相當於js中的 innnerText 和 innerHTML。
3、對頁面的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'
4、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有更高的初始渲染消耗，適合做頻繁的額切換。
5、vue的思想
vue是漸進式的JavaScript框架。大多數人覺得做加法比做減法簡單。
vue這個框架將做減法的事情（困難的部分）都幫忙做了，人們只需要簡單的部分就能實現復雜的dom操作。