最近在重寫 vue 基礎(chǔ)講義，歡迎大爺大娘們 留言 【批評斧正】
記得 留言點贊太惠，愛你們，么么噠 ：）~~
一.核心內(nèi)容
1.推薦插件安裝
-
vscode有二個常用插件：vetur，Vue 2 Snippets
- vetur:讓一些vue的關(guān)鍵字能高亮顯示蹂析，還能進行一些語法的檢測。
- 語法錯誤檢查珍昨，包括 CSS/SCSS/LESS/Javascript/TypeScript等
- 語法高亮墓毒，包括 html/css/sass/scss/less/js/ts等
- vetur:讓一些vue的關(guān)鍵字能高亮顯示蹂析，還能進行一些語法的檢測。
-
Vue 2 Snippets：能在平時寫代碼過程中提示功能更強大,對vue的語法有提示
- 官網(wǎng)地址(里面列出了相關(guān)提示快捷詞)： https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets
Vue 2 Snippets
2.vue.js是啥
2.1 簡介
官網(wǎng)：https://cn.vuejs.org/v2/guide/
概念：不是一個新的語言，而是一個 比 webapi 更方便的 js框架至耻，目的就是讓開發(fā)者更多關(guān)心業(yè)務和數(shù)據(jù)若皱，而不是 dom操作本身镊叁。
-
特點：
- 輕量級、高性能走触、組件化的 MVVM 框架晦譬，輕松易上手
- 雙向數(shù)據(jù)綁定(數(shù)據(jù)驅(qū)動的 Web界面框架)
- 指令
- 插件化
2.2 MVVM 模式
- MVVM 模式
- MVVM是Model-View-ViewModel的簡寫：模型 - 視圖 - 視圖模型
MVVM模式
MVVM模式
- 意義
- 模型 指的是 數(shù)據(jù)
- 視圖 指的是 頁面
-
視圖模型 View 和 Model 的橋梁，是 mvvm模式 的核心
- 負責兩個工作：
- 工作1：將 模型 轉(zhuǎn)化成 視圖：將后端傳遞的數(shù)據(jù)轉(zhuǎn)化成所看到的頁面
- 工作2：將 視圖 轉(zhuǎn)化成 模型：將所看到的頁面轉(zhuǎn)化成后端的數(shù)據(jù)
- 單向和雙向數(shù)據(jù)綁定
+ 如果 兩個工作 都做互广，就是 雙向數(shù)據(jù)綁定
+ 如果 只做 工作1敛腌，就是 單向數(shù)據(jù)綁定
2.2 vue 與 dom 對比
我們通過 vue 和 dom 對比 來看看 聲明是 MVVM 模式
- webapi 獲取和操作
<input type="text" id="usrtName"/>
<p id="content">您輸入了:</p>
<script>
// 1.獲取 dom 對象
let txtName = document.getElementById("usrtName");
let pCont = document.getElementById("content");
// 2.實時顯示數(shù)據(jù) 到 p 標簽
txtName.oninput = function () {
pCont.innerText = "您輸入了:" + txtName.value
}
</script>
- vue 獲取和操作
<!-- View(視圖)：html代碼，負責顯示 -->
<div id="app">
<input type="text" v-model="msg">
<p>您輸入了:{{msg}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// ViewModel(視圖模型)：Vue對象惫皱，負責雙向數(shù)據(jù)綁定像樊， 而 Vue框架已經(jīng)幫我們實現(xiàn)
new Vue({
el: "#app",
// Model(模型)：負責數(shù)據(jù)
data: {
msg: "hello"
}
});
</script>
小結(jié)：
數(shù)據(jù)一旦發(fā)生改變，頁面上顯示也會發(fā)生改變
這個過程 由 Vue 來自動完成旅敷，不需專門編寫修改頁面顯示的代碼了~~~
3.vue 基本使用
3.1 導入 Vue js文件
- 開發(fā)版：包含 完整的 警告和調(diào)試模式 下載地址
- 生產(chǎn)版：刪除了警告生棍，壓縮了內(nèi)容 下載地址
- CDN(內(nèi)容分發(fā)網(wǎng)絡(luò))：可以理解成 共享服務器，可用在自己網(wǎng)站中使用 它的 文件地址
- 開發(fā)學習媳谁，最新版本：【https://cdn.jsdelivr.net/npm/vue/dist/vue.js】
- 生產(chǎn)環(huán)境涂滴，明確版本號：【https://cdn.jsdelivr.net/npm/vue@2.6.11】
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
3.2 視圖布局
- 頁面上 必須 有一個 vue 視圖容器
<!-- 布局 -->
<div id="app">
{{ message }} <!--插值表達式-->
</div>
3.3 Vue對象
在頁面中創(chuàng)建的 就是 Vue 對象，扮演著 視圖 與 模型 的橋梁角色
-
兩個屬性：
-
el 屬性：視圖 選擇器晴音，作為 vue 視圖顯示的容器柔纵，確定 vue 的范圍
? 可以是任意 選擇器 (id/類/元素......)，但不能是 html 和 body
data 屬性：存放數(shù)據(jù)的地方段多，本質(zhì)上就是一個對象首量，對象里的成員都可以在視圖中使用
-
<script>
let app = new Vue({
el: '#app',
data: {
message: '討厭，死鬼~~~',
dog:{
name:'ruikey',
age:2,
gender:false
}
}
});
</script>
- Vue程序 關(guān)系圖
Vue程序 關(guān)系圖
小結(jié)： 三步法
導包 - 將 vue.js 引入到 html頁面
布局 - 寫好頁面標簽
Vue實例化 - 創(chuàng)建 vue 實例對象进苍，與頁面元素綁定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 基本使用分為三步： 1：導包加缘；2：布局；3：實例化-->
<!-- 2.布局 -->
<div id="app">
<!-- vue的一個插值語法觉啊，相當于挖個坑拣宏，用下面的就是值來填上 -->
{{ message }}
</div>
<!-- 1.導包(開發(fā)環(huán)境的包) -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//3.實例化
// ViewModel(視圖模型)：Vue對象，負責雙向數(shù)據(jù)綁定杠人， 而 Vue框架已經(jīng)幫我們實現(xiàn)
let app = new Vue({
el: '#app',
// Model(模型)：負責數(shù)據(jù)
data: {
message: 'Hello Vue!'
}
});
</script>
</body>
</html>
4.常見指令1文本與單雙向綁定
- Vue指令：就是標簽上的一個自定義屬性勋乾，只不過這個屬性是vue定義的
如何改變一個標簽里的內(nèi)容呢？下面為大家介紹幾個 常見 顯示用的 指令
4.1 v-text(單向綁)
文本內(nèi)容設(shè)置：相當于 innerText嗡善，用來將數(shù)據(jù) 顯示到 所在標簽中
-
語法：
- 標簽指令
<span v-text="msg"></span>辑莫，用 msg 替換掉 所在標簽的內(nèi)容 - 插值語法
<span>hi,{{msg}},天氣不錯~！</span>罩引，將 msg 插入到 所在標簽 指定位置
<div id="app" > <div v-text='msg1'>汪汪汪</div> <div> hi,{{ msg2 }},天氣不錯~各吨！</div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let app = new Vue({ el: '#app', data: { msg1: '<h1>討厭~</h1>', msg2: '<h1>死鬼~</h1>' } }); </script> - 標簽指令
-
特點：
- 兩者都不解析 html
- 跟隨數(shù)據(jù)發(fā)生改變(通過 控制臺 console 直接修改
app._data.message = 新值可以觀察) - 單向綁定：只從 model 拿數(shù)據(jù)顯示，自己如果被修改袁铐，不會影響 model 中的數(shù)據(jù)
-
補充：
- 標簽指令 和 插值語法 其實 就是 在 html標簽中 寫 js 代碼
- 也就意味著揭蜒，不僅僅只能寫 data 中的 屬性横浑，只要最終結(jié)果是一個數(shù)據(jù)，就可以顯示
<div id="app"> <!-- 1.加法運算表達式 --> <div v-text="age + 123"></div> <!-- 2.變量用法 --> <div>我女朋友就是：{{gfName}}</div> <!-- 3.對象用法 --> <div>寵物：{{dog.name}}</div> <!-- 4.三元表達式用法 --> <div>性別：{{dog.gender?"公":"母"}}</div> <!-- 5.函數(shù)返回值 --> <div v-text="hi()"></div> </div> <script> let app = new Vue({ el: '#app', // Model(模型)：負責數(shù)據(jù) data: { age: 10, msg: '討厭屉更，死鬼~', gfName:'你', dog:{ name:'ruikey', age:2, gender:false }, hi(){ return 'hi~'; } } }); </script>
* 課堂小彩蛋
問題：如果 一個標簽 同時用了 兩種 語法呢徙融，最終 在 div 中顯示哪一個呢？
選項：1.'討厭~' 2.'死鬼~' 3.都不顯示
<div id="app" v-text='msg1'>
{{ msg2 }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
msg1: '討厭~',
msg2: '死鬼~'
}
});
</script>
- 結(jié)論：指令內(nèi)容 覆蓋 插值語法內(nèi)容
4.2 v-html(單向綁)
相當于 innerHTML
-
語法：
- 標簽指令
<span v-html="msg"></span>瑰谜，用 msg 替換掉 所在標簽的內(nèi)容
- 標簽指令
<div id="app" >
<div v-html='msg1'>汪汪汪</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
msg1: '<h1>討厭~</h1>'
}
});
</script>
4.3 v-model(雙向綁)
4.3.1 雙向綁定與文本框
如果想將 視圖上的內(nèi)容欺冀，設(shè)置給 Model呢？比如似舵，將 文本框的內(nèi)容 設(shè)置給 Model脚猾。
- 語法：
- 標簽指令
<input type="text" v-model="msg"/>，監(jiān)聽 標簽的 內(nèi)容砚哗，以更新數(shù)據(jù) - 適用元素：input / textarea / select 等
- data中的初始值會設(shè)置給元素
- 標簽指令
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<input type="text" v-model="msg"/> <!-- 與 msg 屬性值 雙向綁定-->
<div v-text="msg"></div> <!--獲取 msg 屬性的值顯示-->
</div>
<script>
let app = new Vue({
el: '#app',
data: {
msg: '討厭龙助，死鬼~'
}
});
</script>
- 執(zhí)行過程：
- a.當頁面剛打開時，vue 把 data.msg 中的值 設(shè)置給了 input 和 div
- b.當我們修改 input 中的值時:
- 會立即更新到 data.msg 中蛛芥，修改了數(shù)據(jù)
- 數(shù)據(jù)一旦改變提鸟，就會立即更新到關(guān)聯(lián)的 div 中
執(zhí)行過程
* 課堂小彩蛋
問題：如果 直接 修改 data.msg 的值， input 和 div 中的值 哪個會改變仅淑？
選項：1.input 2.div 3.input 和 div
4.3.2 單選框
<h5>你愿意嫁給我嗎称勋？（單選按鈕）</h5>
<input type="radio" name="radio" value="1" v-model="will">Yes,I do
<input type="radio" name="radio" value="2" v-model="will">No, fx off~
<h5>回答：{{will}}</h5>
<script src='./vue.js'></script>
<script>
new Vue({
el: '#app',
data: {
will: 1 // 設(shè)置默認值
}
})
</script>
4.3.3 下拉框
- 默認值：設(shè)置 某個 選項的 value 值 在 綁定的屬性中
<h5>你祖籍哪的呢？（下拉框）</h5>
<div id='app'>
<select v-model="provs">
<option value="湖北省id">湖北省</option>
<option value="湖南省id">湖南省</option>
<option value="廣東省id">廣東省</option>
</select>
<h1>你的選擇：{{provs}}</h1>
</div>
<script src='./vue.js'></script>
<script>
new Vue({
el: '#app',
data: {
provs: "湖南省id" // 設(shè)置默認值
}
})
</script>
4.3.4 復選框
- 注意：復選框由于 可以多選涯竟，有多個值赡鲜，所以 需要用 數(shù)組 來做綁定
- 默認值：設(shè)置多個 復選框value值 在數(shù)組中
<div id='app'>
<h5>你看中我什么了？（復選按鈕） - {{ans}}</h5>
<input type="checkbox" name="chk" value="1" v-model="ans">帥氣
<input type="checkbox" name="chk" value="2" v-model="ans">海拔
<input type="checkbox" name="chk" value="3" v-model="ans">單手開法拉第的才能
</div>
<script src='./vue.js'></script>
<script>
new Vue({
el: '#app',
data: {
ans:[1,2]
}
})
</script>
5.常見指令2事件綁定
5.1 v-on(事件綁定)
vue 也有一套類似dom的事件監(jiān)聽機制庐船，事件名差不多银酬，但有點差別
- 語法：
- 綁定事件：
- 標簽指令：
<標簽名 v-on:事件名="事件方法名或js代碼"></標簽名> - 簡 寫：
<標簽名 @事件名="事件方法名或js代碼"></標簽名>，推薦
- 標簽指令：
- 編寫 Vue 方法
- Vue 中的方法筐钟，寫在 methods 屬性中揩瞪，注意：vue 方法中 需要通過 this 訪問 data 數(shù)據(jù)
- 綁定事件：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<div id='showCount' v-text='count'></div>
<!-- v-on:事件名="一句話簡短js" -->
<button v-on:click="addCount">點我</button>
<button v-on:dblclick="addCount">雙擊我</button>
<button v-on:mouseover="addCount">鼠標移入我</button>
<!-- 簡寫@,推薦后面都用簡寫 -->
<button @click="addCount2">點我</button>
<button @dblclick="addCount2">雙擊我</button>
<button @mouseover="addCount2">鼠標移入我</button>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
count: 0,
},
// 事件綁定的方法，都放在 methods 屬性中
methods: {
addCount() {
console.log('addCount');
// vue 方法中 訪問 data 里的值篓冲，需要 加 this李破。(html標簽中訪問data 不需要)
this.count++;
}
},
});
</script>
* 練習 商品數(shù)量
要求：點擊 加號，數(shù)字 +1 壹将，點擊 減號嗤攻，數(shù)字 -1（不能小于0）
練習 商品數(shù)量
- 代碼
- 加號按鈕： 點擊事件中 直接 將 變量 +1
- 減號按鈕：點擊事件中 綁定 方法，在方法中 判斷后 將變量 -1
<div id='app'>
<button @click="num++">+</button>
<input style="width: 30px;text-align: center;" type="text" v-model="num"/>
<button @click="jian">-</button>
</div>
<script src='./vue.js'></script>
<script>
new Vue({
el: '#app',
data: {
num: 0
},
methods: {
jian() {
if (this.num > 0) {
this.num--
}
}
}
})
</script>
5.2 vue中的this
在 vue 的方法中 诽俯，為什么要通過 this才能訪問 data中的數(shù)據(jù)呢屯曹？這個 this 到底是誰？
- 概念：
- methods 中 方法里的 this 就是 Vue實例對象
- 兩個用法：
- methods里的方法中 訪問 data ：this.data
- methods中的 A方法 調(diào)用 methods 中的 B方法 ： this.B()
- 注意：html 標簽中 訪問 data數(shù)據(jù)，不需要通過 this 訪問
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<!-- 注意：html標簽中 不需要 加 this 就可以 訪問 data 和 method -->
<div id='showCount' v-text='count'></div>
<button @click="addCount">點我啊</button>
</div>
<script>
let app = new Vue({
el: '#app',
// Model(模型)：負責數(shù)據(jù)
data: {
count: 0,
gfName: 'ruikey'
},
methods: {
addCount() {
this.count++;
console.log(this);
},
hi() {
console.log('hi~~');
this.addCount();// 訪問 method 中的 另1個方法恶耽，也要加 this
}
},
});
</script>
- 原理：
- 在 Vue 實例 data 和 method 的 成員 其實 都直接添加到 了 Vue實例中
原理
* 課堂小彩蛋
問題：關(guān)于vue 中 this 描述，錯誤的是：
- a. Vue 實例 data 和 method 的 成員 其實 都直接添加到 了 Vue實例中
- b. method 中 要訪問 data數(shù)據(jù)颜启，需要通過 this 訪問
- c. html 標簽中 訪問 data數(shù)據(jù)偷俭，不需要通過 this 訪問
- d. html 標簽中 訪問 data數(shù)據(jù)，需要通過 this 訪問
5.3 v-on常用的幾個修飾符
如何控制事件只在某些特別條件下觸發(fā)呢缰盏？
- 三種常見修飾符：
- @事件名.stop = "事件處理函數(shù)" 阻止冒泡
- @事件名.prevent="事件處理函數(shù)" 阻止默認事件
- @keyup.enter="事件處理函數(shù)" 按鍵盤回車觸發(fā)
5.3.1 阻止冒泡
webapi 中涌萤，通過 事件參數(shù) event.stopPropagation() 來阻止冒泡，而 vue 中 有更簡單語法
- 語法：
@事件名.stop = "事件處理函數(shù)"
<div id="app">
<div class="box1" @click.stop="box1Click">box1</div>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: "#app",
methods: {
box1Click() {
alert("這是box1");
}
}
})
</script>
5.3.2 阻止默認事件
webapi 中口猜，通過 事件參數(shù) event.preventDefault() 來阻止默認行為负溪，而 vue 中 有更簡單語法
- 語法：
@事件名.prevent= "事件處理函數(shù)"
<div id="app">
<!--超鏈接 不會跳轉(zhuǎn)了-->
<a @click.prevent="aClick">討厭，死鬼~~</a>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: "#app",
methods: {
aClick() {
alter('要死啊~~~');
}
}
})
</script>
5.3.3 同時阻止冒泡和默認
Vue中济炎，如果同時要阻止事件冒泡 和 默認行為川抡，也很方便哦
- 語法：
@事件名.stop.prevent= "事件處理函數(shù)"
<div id="app">
<div id="box1" @click="box1Click">
<!--超鏈接 不會跳轉(zhuǎn)了，也不會事件冒泡了-->
<a @click.stop.prevent="aClick">討厭须尚，死鬼~~</a>
</div>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: "#app",
methods: {
box1Click(){
alter('點我孩子 就是點我~~崖堤！');
},
aClick() {
alter('要死啊~~~');
}
}
})
</script>
5.3.4 回車鍵事件
業(yè)務中，經(jīng)常出現(xiàn)輸入后按回車鍵觸發(fā)事件函數(shù)耐床，在Vue中相當簡單
- 語法：
@keyup.enter= "事件處理函數(shù)"
<div id="app">
<!-- 鍵盤監(jiān)聽事件修飾符.enter 只有回車時才響應 -->
<input type="text" @keyup.enter="inputData" v-model="inputStr">
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: "#app",
data:{
inputStr:'',
},
methods: {
inputData() {
alert('你輸入了：' + this.inputStr)
}
}
})
</script>
6.常見指令3-其他
6.1 v-bind(其他屬性)
在前面我們知道 如何 設(shè)置 標簽的 text文本 或 html文本密幔，但如果要修改 標簽的其他屬性呢？
- 語法：
v-bind:屬性名=msg - 簡寫：
:屬性名=msg - 注意：是單向綁定
<style>
.active {
color: red
}
</style>
<div id="app">
<h1>請輸入圖片地址</h1>
<input type="text" v-model="imgsrc" />
<h1>請輸入圖片標題</h1>
<input type="text" v-model="imgtit" />
<hr />
<!--綁定 圖片路徑 和 title-->
<img width="980" v-bind:src="imgsrc" v-bind:title="imgtit" /> <!--【v-bind】-->
<img width="980" :src="imgsrc" :title="imgtit+2" /> <!--【簡寫】-->
</div>
<script src="./vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
imgsrc: './imgs/1.jpg',
imgtit:'優(yōu)秀死鬼'
}
});
</script>
- PS：v-bind 指令 中的寫法
- 變量
- 基本運算
- 三元表達式
6.2 v-bind(class綁定)
6.2.1 綁定變量
class 屬性中可能有 一個 或 多個 選擇器名撩轰，可以用一個變量保存 并 綁定 到 class屬性
語法：
v-bind:class="變量名"簡寫：:class="變量名"代碼：
<style>
.error{
color:red;
padding:15px;
}
.bigFont{
font-size:50px;
}
</style>
<!--注意：此處綁定的是 【變量】-->
<div :class="red">hi~~!</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
red: 'error bigFont'
}
})
</script>
6.2.2 綁定對象
class 屬性中可能有 一個 或 多個 選擇器名胯甩，但要根據(jù)條件顯示，此時堪嫂，可以用 綁定對象 來解決
語法：
v-bind:class={類選擇器名1:布爾值變量,類選擇名2:布爾值變量 ....}-
簡寫：
:class={類選擇器名1:布爾值變量,類選擇名2:布爾值變量 ....}? 如果 對應 類選擇器名 后的 bool值是t rue偎箫，就會顯示選擇器；是false溉苛，則不會顯示在 class屬性中
<style>
.error{
color:red;
padding:15px;
}
.bigFont{
font-size:50px;
}
</style>
<!--注意：此處綁定的是 【類選擇器名稱】镜廉，由bool變量決定這個 選擇器是否 添加到 class 屬性中-->
<div v-bind:class="{ error: isOk, bigFont: hasError }"></div>
<script src="./vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
isOk: true,
hasError: false
}
});
</script>
- 實際開發(fā)時，我們通常直接 把對象 添加到 data 中
<style>
.error{
color:red;
padding:15px;
}
.bigFont{
font-size:50px;
}
</style>
<div id="app">
<!--2.為 class設(shè)置 對象{類名1:布爾值變量愚战，類名2:布爾值變量}-->
<!--注意：此處綁定的是 【類選擇器名稱】娇唯，由bool變量決定這個 選擇器是否 添加到 class 屬性中-->
<div :class="divClass">hi~~!</div>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
divClass: {
error: true,
bigFont: true
}
}
})
</script>
* 練習 切換顯示
要求：點擊按鈕，字體變紅放大寂玲；再次點擊塔插，則還原。
切換顯示
<style>
.error {
color: red
}
.bigFont {
font-size: 28px;
}
</style>
<body>
<div id="app">
<button @click="changeClass">點我變色 </button>
<div v-bind:class="{error:isShow,bigFont:isShow}">討厭拓哟，死鬼~~~</div>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
isShow: false
},
methods: {
changeClass() {
this.isShow = !this.isShow
}
}
})
</script>
</body>
二.核心案例
1.圖片輪播
要求：點擊 按鈕 切換 圖片顯示
圖片輪播
<div id="app">
<button @click="prev">上一張</button>
<img :src="arr[curIndex]" alt="">
<button @click="next">下一張</button>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
arr: ["http://ossweb-img.qq.com/images/lol/web201310/skin/big145000.jpg",
"http://ossweb-img.qq.com/images/lol/web201310/skin/big145001.jpg",
"http://ossweb-img.qq.com/images/lol/web201310/skin/big145014.jpg",
"http://ossweb-img.qq.com/images/lol/web201310/skin/big145015.jpg",
"http://ossweb-img.qq.com/images/lol/web201310/skin/big145016.jpg",
"http://ossweb-img.qq.com/images/lol/web201310/skin/big145017.jpg"
],
curIndex: 0
},
methods: {
prev() {
this.curIndex > 0 ? this.curIndex-- : alert('已經(jīng)是第一張啦~~~');
},
next(){
this.curIndex < this.arr.length-1 ? this.curIndex++ : alert('已經(jīng)最后一張啦~~~');
}
}
})
</script>
三.擴展內(nèi)容
1. v-on事件修飾符
-
.stop- 調(diào)用event.stopPropagation()想许。 -
.prevent- 調(diào)用event.preventDefault()。 -
.capture- 添加事件偵聽器時使用 capture 模式。 -
.self- 只當事件是從偵聽器綁定的元素本身觸發(fā)時才觸發(fā)回調(diào)流纹。 -
.{keyCode | keyAlias}- 只當事件是從特定鍵觸發(fā)時才觸發(fā)回調(diào)糜烹。 -
.native- 監(jiān)聽組件根元素的原生事件。 -
.once- 只觸發(fā)一次回調(diào)漱凝。 -
.left- (2.2.0) 只當點擊鼠標左鍵時觸發(fā)疮蹦。 -
.right- (2.2.0) 只當點擊鼠標右鍵時觸發(fā)。 -
.middle- (2.2.0) 只當點擊鼠標中鍵時觸發(fā)茸炒。 -
.passive- (2.3.0) 以{ passive: true }模式添加偵聽器
- 示例
<!-- 方法處理器 -->
<button v-on:click="doThis"></button>
<!-- 動態(tài)事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>
<!-- 內(nèi)聯(lián)語句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 縮寫 -->
<button @click="doThis"></button>
<!-- 動態(tài)事件縮寫 (2.6.0+) -->
<button @[event]="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默認行為 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默認行為愕乎，沒有表達式 -->
<form @submit.prevent></form>
<!-- 串聯(lián)修飾符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 鍵修飾符，鍵別名 -->
<input @keyup.enter="onEnter">
<!-- 鍵修飾符壁公，鍵代碼 -->
<input @keyup.13="onEnter">
<!-- 點擊回調(diào)只會觸發(fā)一次 -->
<button v-on:click.once="doThis"></button>
<!-- 對象語法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
