1.什么是vue，為什么要使用vue,vue的優(yōu)勢
/*
1.什么是Vue?
Vue.js 是一套構(gòu)建用戶界面的`框架`，它不僅易于上手，還可以與其它第三方庫整合(Swiper、IScroll、...)。
2.框架和庫的區(qū)別?
框架：是一套完整的解決方案；對項(xiàng)目的`侵入性`較大，項(xiàng)目如果需要更換框架，則需要重構(gòu)整個(gè)項(xiàng)目。
庫（插件）：提供某一個(gè)小功能，對項(xiàng)目的`侵入性`較小，如果某個(gè)庫無法完成某些需求，可以很容易切換到其它庫實(shí)現(xiàn)需求。
例如: 從jQuery 切換到 Zepto, 無縫切換
從IScroll切換到ScrollMagic, 只需要將用到IScroll的代碼替換成ScrollMagic代碼即可
3.為什么要學(xué)習(xí)框架?
提升開發(fā)效率：在企業(yè)中，時(shí)間就是效率，效率就是金錢；
前端提高開發(fā)效率的發(fā)展歷程：原生JS -> jQuery之類的類庫 -> 前端模板引擎 -> Vue / React / Angular
4.框架有很多, 為什么要先學(xué)Vue
Vue、Angular、React一起，被稱之為前端三大主流框架！
但是Angular、React是老外編寫的, 所以所有的資料都是英文的
而Vue是國人編寫的, 所以所有的資料都是中文的, 并且Vue中整合了Angular、React中的眾多優(yōu)點(diǎn)
所以為了降低我們的學(xué)習(xí)難度, 我們先學(xué)Vue, 學(xué)完之后再學(xué)習(xí)Angular和React
5.使用Vue有哪些優(yōu)勢?
5.1Vue的核心概念之一:
通過數(shù)據(jù)驅(qū)動(dòng)界面更新, 無需操作DOM來更新界面
使用Vue我們只需要關(guān)心如何獲取數(shù)據(jù), 如何處理數(shù)據(jù), 如何編寫業(yè)務(wù)邏輯代碼,
我們只需要將處理好的數(shù)據(jù)交給Vue, Vue就會自動(dòng)將數(shù)據(jù)渲染到模板中(界面上)
5.2Vue的核心概念之二:
組件化開發(fā)，我們可以將網(wǎng)頁拆分成一個(gè)個(gè)獨(dú)立的組件來編寫
將來再通過封裝好的組件拼接成一個(gè)完整的網(wǎng)頁
https://cn.vuejs.org/images/components.png
*/
2.vue基本模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-Vue基本模板</title>
<!--1.下載導(dǎo)入Vue.js-->
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ name }}</p>
</div>
<script>
// 2.創(chuàng)建一個(gè)Vue的實(shí)例對象
let vue = new Vue({
// 3.告訴Vue的實(shí)例對象, 將來需要控制界面上的哪個(gè)區(qū)域
el: '#app',
// 4.告訴Vue的實(shí)例對象, 被控制區(qū)域的數(shù)據(jù)是什么
data: {
name: "twc"
}
});
</script>
</body>
</html>
3.數(shù)據(jù)單向綁定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-Vue數(shù)據(jù)單向傳遞</title>
<!--1.下載導(dǎo)入Vue.js-->
<script src="js/vue.js"></script>
</head>
<body>
<!--
1.MVVM設(shè)計(jì)模式
在MVVM設(shè)計(jì)模式中由3個(gè)部分組成
M : Model 數(shù)據(jù)模型(保存數(shù)據(jù), 處理數(shù)據(jù)業(yè)務(wù)邏輯)
V : View 視圖(展示數(shù)據(jù), 與用戶交互)
VM: View Model 數(shù)據(jù)模型和視圖的橋梁(M是中國人, V是美國人, VM就是翻譯)
MVVM設(shè)計(jì)模式最大的特點(diǎn)就是支持?jǐn)?shù)據(jù)的雙向傳遞
數(shù)據(jù)可以從 M -> VM -> V
也可以從 V -> VM -> M
2.Vue中MVVM的劃分
Vue其實(shí)是基于MVVM設(shè)計(jì)模式的
被控制的區(qū)域: View
Vue實(shí)例對象 : View Model
實(shí)例對象中的data: Model
3.Vue中數(shù)據(jù)的單向傳遞
我們把"數(shù)據(jù)"交給"Vue實(shí)例對象", "Vue實(shí)例對象"將數(shù)據(jù)交給"界面"
Model -> View Model -> View
-->
<!--這里就是MVVM中的View-->
<div id="app">
<p>{{ name }}</p>
</div>
<script>
// 這里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 這里就是MVVM中的Model
data: {
name: "twc"
}
});
</script>
</body>
</html>
4.數(shù)據(jù)雙向綁定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-Vue數(shù)據(jù)雙向傳遞</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--
1.Vue調(diào)試工具安裝
如果你能打開谷歌插件商店, 直接在線安裝即可
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=zh-CN
由于國內(nèi)無法打開谷歌國外插件商店, 所以可以離線安裝
https://www.chromefor.com/vue-js-devtools_v5-3-0/
2.安裝步驟:
2.1下載離線安裝包
2.2打開谷歌插件界面
2.3直接將插件拖入
2.4報(bào)錯(cuò) 程序包無效: "CRX_HEADER_INVALID"
可以將安裝包修改為rar后綴, 解壓之后再安裝
2.5重啟瀏覽器
-->
<!--
2.數(shù)據(jù)雙向綁定
默認(rèn)情況下Vue只支持?jǐn)?shù)據(jù)單向傳遞 M -> VM -> V
但是由于Vue是基于MVVM設(shè)計(jì)模式的, 所以也提供了雙向傳遞的能力
在<input>、<textarea> 及 <select> 元素上可以用 v-model 指令創(chuàng)建雙向數(shù)據(jù)綁定
注意點(diǎn): v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值
而總是將 Vue 實(shí)例的數(shù)據(jù)作為數(shù)據(jù)來源
-->
<!--這里就是MVVM中的View-->
<div id="app">
<p>{{ name }}</p>
<input type="text" v-model="name">
</div>
<script>
// 這里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 這里就是MVVM中的Model
data: {
name: "twc",
msg: "xxx"
}
});
</script>
</body>
</html>
5.常用指令
5.1 v-once指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>05-常用指令-v-once</title> <script src="js/vue.js"></script> </head> <body> <!-- 1.什么是指令? 指令就是Vue內(nèi)部提供的一些自定義屬性, 這些屬性中封裝好了Vue內(nèi)部實(shí)現(xiàn)的一些功能 只要使用這些指令就可以使用Vue中實(shí)現(xiàn)的這些功能 2.Vue數(shù)據(jù)綁定的特點(diǎn) 只要數(shù)據(jù)發(fā)生變化, 界面就會跟著變化 3.v-once指令: 讓界面不要跟著數(shù)據(jù)變化, 只渲染一次 --> <!--這里就是MVVM中的View--> <div id="app"> <p v-once>原始數(shù)據(jù): {{ name }}</p> <p>當(dāng)前數(shù)據(jù): {{ name }}</p> </div> <script> // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 這里就是MVVM中的Model data: { name: "twc", } }); </script> </body> </html>
5.2 v-cloak指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>06-常用指令-v-cloak</title> <style> [v-cloak] { display: none } </style> </head> <body> <!-- 1.Vue數(shù)據(jù)綁定過程 1.1會先將未綁定數(shù)據(jù)的界面展示給用戶 1.2然后再根據(jù)模型中的數(shù)據(jù)和控制的區(qū)域生成綁定數(shù)據(jù)之后的HTML代碼 1.3最后再將綁定數(shù)據(jù)之后的HTML渲染到界面上 正是在最終的HTML被生成渲染之前會先顯示模板內(nèi)容 所以如果用戶網(wǎng)絡(luò)比較慢或者網(wǎng)頁性能比較差, 那么用戶會看到模板內(nèi)容 2.如何解決這個(gè)問題 利用v-cloak配合 [v-cloak]:{display: none}默認(rèn)先隱藏未渲染的界面 等到生成HTML渲染之后再重新顯示 3.v-cloak指令作用: 數(shù)據(jù)渲染之后自動(dòng)顯示元素 --> <!--這里就是MVVM中的View--> <div id="app"> <p v-cloak>{{ name }}</p> </div> <script src="js/vue.js"></script> <script> // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 這里就是MVVM中的Model data: { name: "twc", } }); </script> </body> </html>
5.3 v-text 和 v-html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>07-常用指令v-text和v-html</title> <script src="js/vue.js"></script> </head> <body> <!-- 1.什么是v-text指令 v-text就相當(dāng)于過去學(xué)習(xí)的innerText 2.什么是v-html指令 v-html就相當(dāng)于過去學(xué)習(xí)的innerHTML --> <!--這里就是MVVM中的View--> <div id="app"> <!--插值的方式: 可以將指定的數(shù)據(jù)插入到指定的位置--> <!-- <p>++++{{ name }}++++</p>--> <!--插值的方式: 不會解析HTML--> <p>++++{{ msg }}++++</p> <!--v-text的方式: 會覆蓋原有的內(nèi)容--> <p v-text="name">++++++++</p> <!--v-text的方式: 也不會解析HTML--> <p v-text="msg">++++++++</p> <!--v-html的方式: 會覆蓋原有的內(nèi)容--> <p v-html="name">++++++++</p> <!--v-html的方式:會解析HTML--> <p v-html="msg">{{name}}</p> </div> <script> // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 這里就是MVVM中的Model data: { name: "twc", msg: "<span>我是span</span>" } }); </script> </body> </html>
5.4 v-if v-else v-else-if
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>08-常用指令v-if</title> <script src="js/vue.js"></script> </head> <body> <!-- 1.什么是v-if指令 條件渲染: 如果v-if取值是true就渲染元素, 如果不是就不渲染元素 2.v-if特點(diǎn): 如果條件不滿足根本就不會創(chuàng)建這個(gè)元素(重點(diǎn)) 3.v-if注意點(diǎn) v-if可以從模型中獲取數(shù)據(jù) v-if也可以直接賦值一個(gè)表達(dá)式 --> <!-- 4.v-else指令 v-else指令可以和v-if指令配合使用, 當(dāng)v-if不滿足條件時(shí)就執(zhí)行v-else就顯示v-else中的內(nèi)容 5.v-else注意點(diǎn) v-else不能單獨(dú)出現(xiàn) v-if和v-else中間不能出現(xiàn)其它內(nèi)容 --> <!-- 6.v-else-if指令 v-else-if可以和v-if指令配合使用, 當(dāng)v-if不滿足條件時(shí)就依次執(zhí)行后續(xù)v-else-if, 哪個(gè)滿足就顯示哪個(gè) 7.v-else-if注意點(diǎn) 和v-else一樣 --> <!--這里就是MVVM中的View--> <div id="app"> <!-- <p v-if="show">我是true</p>--> <p v-if="hidden">我是false</p> <!-- <p v-if="true">我是true</p>--> <!-- <p v-if="false">我是false</p>--> <p v-if="age >= 18">我是true</p> <p v-if="age < 18">我是false</p> <!-- <p v-if="age >= 18">成年人</p>--> <!-- <p>中間的內(nèi)容</p>--> <!-- <p v-else>未成年人</p>--> <p v-if="score >= 80">優(yōu)秀</p> <p v-else-if="score >= 60">良好</p> <p v-else>差</p> </div> <script> // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 這里就是MVVM中的Model data: { show: true, hidden: false, age: 17, score: 50 } }); </script> </body> </html>
5.5 v-show
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>09-常用指令v-show</title> <script src="js/vue.js"></script> </head> <body> <!-- 1.什么是v-show指令 v-show和v-if的能夠一樣都是條件渲染, 取值為true就顯示, 取值為false就不顯示 2.v-if和v-show區(qū)別 v-if: 只要取值為false就不會創(chuàng)建元素 v-show: 哪怕取值為false也會創(chuàng)建元素, 只是如果取值是false會設(shè)置元素的display為none 3.v-if和v-show應(yīng)用場景 由于取值為false時(shí)v-if不會創(chuàng)建元素, 所以如果需要切換元素的顯示和隱藏, 每次v-if都會創(chuàng)建和刪除元素 由于取值為false時(shí)v-show會創(chuàng)建元素并設(shè)置display為none, 所有如果需要切換元素的顯示和隱藏, 不會反復(fù)創(chuàng)建和刪除, 只是修改display的值 所以: 如果企業(yè)開發(fā)中需要頻繁切換元素顯示隱藏, 那么推薦使用v-show, 否則使用v-if --> <!--這里就是MVVM中的View--> <div id="app"> <!-- <p v-show="true">我是true</p>--> <!-- <p v-show="false">我是false</p>--> <!-- <p v-show="age >= 18">我是true</p>--> <!-- <p v-show="age < 18">我是false</p>--> <p v-show="show">我是段落1</p> <p v-show="hidden">我是段落2</p> </div> <script> // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 這里就是MVVM中的Model data: { show: true, hidden: false, age: 18 } }); </script> </body> </html>
5.6 v-for
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>10-常用指令v-for</title> <script src="js/vue.js"></script> </head> <body> <!-- 1.什么是v-for指令 相當(dāng)于JS中的for in循環(huán), 可以根據(jù)數(shù)據(jù)多次渲染元素 2.v-for特點(diǎn) 可以遍歷 數(shù)組, 字符, 數(shù)字, 對象 --> <!--這里就是MVVM中的View--> <div id="app"> <ul> <li v-for="(value, index) in list">{{index}}--{{value}}</li> <li v-for="(value, index) in 'abcdefg'">{{index}}--{{value}}</li> <li v-for="(value, index) in 6">{{index}}--{{value}}</li> <li v-for="(value, key) in obj">{{key}}---{{value}}</li> </ul> </div> <script> // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 這里就是MVVM中的Model data: { list: ["張三", "李四", "王五", "趙六"], obj: { name: "lnj", age: 33, gender: "man", class: "知播漁" } } }); </script> </body> </html>
5.7 v-bind
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>10-常用指令v-bind</title> <script src="js/vue.js"></script> </head> <body> <!-- 1.什么是v-bind指令 在企業(yè)開發(fā)中想要給"元素"綁定數(shù)據(jù), 我們可以使用{{}}, v-text, v-html 但是如果想給"元素的屬性"綁定數(shù)據(jù), 就必須使用v-bind 所以v-bind的作用是專門用于給"元素的屬性"綁定數(shù)據(jù)的 2.v-bind格式 v-bind:屬性名稱="綁定的數(shù)據(jù)" :屬性名稱="綁定的數(shù)據(jù)" 3.v-bind特點(diǎn) 賦值的數(shù)據(jù)可以是任意一個(gè)合法的JS表達(dá)式 例如: :屬性名稱="age + 1" --> <!--這里就是MVVM中的View--> <div id="app"> <!-- <p>{{name}}</p>--> <!-- <p v-text="name"></p>--> <!-- <p v-html="name"></p>--> <!--注意點(diǎn): 如果要給元素的屬性綁定數(shù)據(jù), 那么是不能夠使用插值語法的--> <!-- <input type="text" value="{{name}}">--> <!--注意點(diǎn): 雖然通過v-model可以將數(shù)據(jù)綁定到input標(biāo)簽的value屬性上 但是v-model是有局限性的, v-model只能用于input/textarea/select 但是在企業(yè)開發(fā)中我們還可能需要給其它標(biāo)簽的屬性綁定數(shù)據(jù)--> <input type="text" v-model="name"> <!-- <input type="text" v-bind:value="name">--> <!-- <input type="text" :value="name">--> <input type="text" :value="age + 1"> </div> <script> // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 這里就是MVVM中的Model data: { name: "twc", age: 18 } }); </script> </body> </html>
5.8 v-bind 用來綁定類名
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>12-常用指令-綁定類名</title> <script src="js/vue.js"></script> <style> *{ margin: 0; padding: 0; } .size{ font-size: 100px; } .color{ color: red; } .active{ background: skyblue; } </style> </head> <body> <!-- 1.v-bind指令的作用 v-bind指令給"任意標(biāo)簽"的"任意屬性"綁定數(shù)據(jù) 對于大部分的屬性而言我們只需要直接賦值即可, 例如:value="name" 但是對于class和style屬性而言, 它的格式比較特殊 2.通過v-bind綁定類名格式 :class="['需要綁定類名', ...]" 3.注意點(diǎn): 3.1直接賦值一個(gè)類名(沒有放到數(shù)組中)默認(rèn)會去Model中查找 :class="需要綁定類名" 2.2數(shù)組中的類名沒有用引號括起來也會去Model中查找 :class="[需要綁定類名]" 2.3數(shù)組的每一個(gè)元素都可以是一個(gè)三目運(yùn)算符按需導(dǎo)入 :class="[flag?'active':'']" 2.4可以使用對象來替代數(shù)組中的三目運(yùn)算符按需導(dǎo)入 :class="[{'active': true}]" 2.5綁定的類名太多可以將類名封裝到Model中 obj: { 'color': true, 'size': true, 'active': false, } 4.綁定類名企業(yè)應(yīng)用場景 從服務(wù)器動(dòng)態(tài)獲取樣式后通過v-bind動(dòng)態(tài)綁定類名 這樣就可以讓服務(wù)端來控制前端樣式 常見場景: 618 雙11等 --> <!--這里就是MVVM中的View--> <div id="app"> <!-- <p class="size color active">我是段落</p>--> <!-- 注意點(diǎn): 如果需要通過v-bind給class綁定類名, 那么不能直接賦值 默認(rèn)情況下v-bind會去Model中查找數(shù)據(jù), 但是Model中沒有對應(yīng)的類名, 所以無效, 所以不能直接賦值 --> <!-- <p :class="size">我是段落</p>--> <!-- 注意點(diǎn): 如果想讓v-bind去style中查找類名, 那么就必須把類名放到數(shù)組中 但是放到數(shù)組中之后默認(rèn)還是回去Model中查找 --> <!-- <p :class="[size]">我是段落</p>--> <!-- 注意點(diǎn): 將類名放到數(shù)組中之后, 還需要利用引號將類名括起來才會去style中查找 --> <!-- <p :class="['size', 'color', 'active']">我是段落</p>--> <!-- 注意點(diǎn): 如果是通過v-bind類綁定類名, 那么在綁定的時(shí)候可以編寫一個(gè)三目運(yùn)算符來實(shí)現(xiàn)按需綁定 格式: 條件表達(dá)式 ? '需要綁定的類名' : '' --> <!-- <p :class="['size', 'color', flag ? 'active' : '']">我是段落</p>--> <!-- 注意點(diǎn): 如果是通過v-bind類綁定類名, 那么在綁定的時(shí)候可以通過對象來決定是否需要綁定 格式: {'需要綁定的類名' : 是否綁定} --> <!-- <p :class="['size', 'color',{'active' : false}]">我是段落</p>--> <!-- 注意點(diǎn): 如果是通過v-bind類綁定類名, 那么還可以使用Model中的對象來替換數(shù)組 綁定的類名太多可以將類名封裝到Model中 --> <p :class="obj">我是段落</p> </div> <script> // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 這里就是MVVM中的Model data: { flag: false, obj:{ 'size': false, 'color': false, 'active': true, } } }); </script> </body> </html>
5.9 v-bind綁定樣式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>13-常用指令-綁定樣式</title> <script src="js/vue.js"></script> </head> <body> <!-- 1.如何通過v-bind給style屬性綁定數(shù)據(jù) 1.1將數(shù)據(jù)放到對象中 :style="{color:'red','font-size':'50px'}" 1.2將數(shù)據(jù)放到Model對象中 obj: { color: 'red', 'font-size': '80px', } 2.注意點(diǎn) 2.1如果屬性名稱包含-, 那么必須用引號括起來 2.2如果需要綁定Model中的多個(gè)對象, 可以放到一個(gè)數(shù)組中賦值 --> <!--這里就是MVVM中的View--> <div id="app"> <!-- <p style="color: red">我是段落</p>--> <!-- 注意點(diǎn): 和綁定類名一樣, 默認(rèn)情況下v-bind回去Model中查找, 找不到所以沒有效果 --> <!-- <p :style="color: red">我是段落</p>--> <!-- 注意點(diǎn): 我們只需要將樣式代碼放到對象中賦值給style即可 但是取值必須用引號括起來 --> <!-- <p :style="{color: 'red'}">我是段落</p>--> <!-- 注意點(diǎn): 如果樣式的名稱帶-, 那么也必須用引號括起來才可以 --> <!-- <p :style="{color: 'red', 'font-size': '100px'}">我是段落</p>--> <!-- <p :style="obj">我是段落</p>--> <!-- 注意點(diǎn): 如果Model中保存了多個(gè)樣式的對象 ,想將多個(gè)對象都綁定給style, 那么可以將多個(gè)對象放到數(shù)組中賦值給style即可 --> <p :style="[obj1, obj2]">我是段落</p> </div> <script> // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 這里就是MVVM中的Model data: { obj1:{ "color": "blue", "font-size": "100px" }, obj2: { "background-color": "red" } } }); </script> </body> </html>
5.10 v-on
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>14-常用指令-v-on</title> <script src="js/vue.js"></script> </head> <body> <!-- 1.什么是v-on指令? v-on指令專門用于給元素綁定監(jiān)聽事件 2.v-on指令格式 v-on:事件名稱="回調(diào)函數(shù)名稱" @事件名稱="回調(diào)函數(shù)名稱" 3.v-on注意點(diǎn): v-on綁定的事件被觸發(fā)之后, 會去Vue實(shí)例對象的methods中查找對應(yīng)的回調(diào)函數(shù) --> <!--這里就是MVVM中的View--> <div id="app"> <!-- <button onclick="alert('lnj')">我是按鈕</button>--> <!-- 注意點(diǎn): 1.如果是通過v-on來綁定監(jiān)聽事件, 那么在指定事件名稱的時(shí)候不需要寫on 2.如果是通過v-on來綁定監(jiān)聽事件, 那么在賦值的時(shí)候必須賦值一個(gè)回調(diào)函數(shù)的名稱 --> <!-- <button v-on:click="alert('lnj')">我是按鈕</button>--> <!-- 注意點(diǎn): 當(dāng)綁定的事件被觸發(fā)后, 會調(diào)用Vue實(shí)例的methods對象中對應(yīng)的回調(diào)函數(shù) --> <!-- <button v-on:click="myFn">我是按鈕</button>--> <button @click="myFn">我是按鈕</button> </div> <script> // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 這里就是MVVM中的Model data: { }, methods: { myFn(){ alert('lnj') } } }); </script> </body> </html>v-on 修飾符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>15-常用指令-v-on修飾符</title> <script src="js/vue.js"></script> <style> *{ margin: 0; padding: 0; } .a{ width: 300px; height: 300px; background: red; } .b{ width: 200px; height: 200px; background: blue; } .c{ width: 100px; height: 100px; background: green; } </style> </head> <body> <!-- 1.v-on修飾符 在事件中有很多東西需要我們處理, 例如事件冒泡,事件捕獲, 阻止默認(rèn)行為等 那么在Vue中如何處理以上內(nèi)容呢, 我們可以通過v-on修飾符來處理 2.常見修飾符 .once - 只觸發(fā)一次回調(diào)。 .prevent - 調(diào)用 event.preventDefault()。阻止默認(rèn)行為 .stop - 調(diào)用 event.stopPropagation()。阻止事件冒泡 .self - 只當(dāng)事件是從偵聽器綁定的元素本身觸發(fā)時(shí)才觸發(fā)回調(diào)。 .capture - 添加事件偵聽器時(shí)使用 capture 模式。 --> <!--這里就是MVVM中的View--> <div id="app"> <!--注意點(diǎn): 默認(rèn)情況下事件的回調(diào)函數(shù)可以反復(fù)的執(zhí)行, 只要事件被觸發(fā)就會執(zhí)行--> <button v-on:click="myFn">我是按鈕</button> <!--如果想讓事件監(jiān)聽的回調(diào)函數(shù)只執(zhí)行一次, 那么就可以使用.once修飾符--> <button v-on:click.once ="myFn">我是按鈕</button> <!--如果想阻止元素的默認(rèn)行為, 那么可以使用.prevent修飾符--> <a v-on:click.prevent="myFn">我是A標(biāo)簽</a> <!-- 默認(rèn)情況下載嵌套的元素中, 如果都監(jiān)聽了相同的事件, 那么會觸發(fā)事件冒泡 如果想阻止事件冒泡, 那么可以使用.stop修飾符 --> <div class="a" @click="myFn1"> <div class="b" @click.stop="myFn2"> <div class="c" @click="myFn3"></div> </div> </div> <!-- 如果想讓回調(diào)只有當(dāng)前元素觸發(fā)事件的時(shí)候才執(zhí)行, 那么就可以使用.self修飾符,以下不會打印爸爸 --> <div class="a" @click="myFn1"> <div class="b" @click.self="myFn2"> <div class="c" @click="myFn3"></div> </div> </div> <!-- 默認(rèn)情況下是事件冒泡, 如果想變成事件捕獲, 那么就需要使用.capture修飾符 --> <div class="a" @click.capture="myFn1"> <div class="b" @click.capture="myFn2"> <div class="c" @click.capture="myFn3"></div> </div> </div> </div> <script> // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 這里就是MVVM中的Model data: { }, // 專門用于存儲監(jiān)聽事件回調(diào)函數(shù) methods: { myFn(){ alert('lnj'); }, myFn1(){ console.log("爺爺"); }, myFn2(){ console.log("爸爸"); }, myFn3(){ console.log("兒子"); } } }); </script> </body> </html>v-on 的注意點(diǎn)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>16-常用指令-v-on注意點(diǎn)</title> <script src="js/vue.js"></script> </head> <body> <!-- 1.v-on注意點(diǎn) 1.1綁定回調(diào)函數(shù)名稱的時(shí)候, 后面可以寫()也可以不寫 v-on:click="myFn" v-on:click="myFn()" 1.2可以給綁定的回調(diào)函數(shù)傳遞參數(shù) v-on:click="myFn('lnj', 33)" 1.3如果在綁定的函數(shù)中需要用到data中的數(shù)據(jù)必須加上this --> <!--這里就是MVVM中的View--> <div id="app"> <button @click="myFn('lnj', 33, $event)">我是按鈕</button> </div> <script> // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 這里就是MVVM中的Model data: { gender: "man" }, // 專門用于存儲監(jiān)聽事件回調(diào)函數(shù) methods: { myFn(name, age, e){ // alert('lnj'); console.log(name, age, e); console.log(this.gender); } } }); </script> </body> </html>
5.11 自定義指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>18-常用指令-自定義指令</title> <script src="js/vue.js"></script> </head> <body> <!-- 1.自定義全局指令 在Vue中除了可以使用Vue內(nèi)置的一些指令以外, 我們還可以自定義指令 2.自定義全局指令語法 ue.directive('自定義指令名稱', { 生命周期名稱: function (el) { 指令業(yè)務(wù)邏輯代碼 } }); 3.指令生命周期方法 自定義指令時(shí)一定要明確指令的業(yè)務(wù)邏輯代碼更適合在哪個(gè)階段執(zhí)行 例如: 指令業(yè)務(wù)邏輯代碼中沒有用到元素事件, 那么可以在bind階段執(zhí)行 例如: 指令業(yè)務(wù)邏輯代碼中用到了元素事件, 那么就需要在inserted階段執(zhí)行 4.自定義指令注意點(diǎn) 使用時(shí)需要加上v-, 而在自定義時(shí)不需要加上v- --> <!--這里就是MVVM中的View--> <div id="app"> <!-- <p v-color>我是段落</p>--> <input type="text" v-focus> </div> <script> /* directive方法接收兩個(gè)參數(shù) 第一個(gè)參數(shù): 指令的名稱 第二個(gè)參數(shù): 對象 注意點(diǎn): 在自定義指令的時(shí)候, 在指定指令名稱的時(shí)候, 不需要寫v- 注意點(diǎn): 指令可以在不同的生命周期階段執(zhí)行 bind: 指令被綁定到元素上的時(shí)候執(zhí)行 inserted: 綁定指令的元素被添加到父元素上的時(shí)候執(zhí)行 * */ Vue.directive("color", { // 這里的el就是被綁定指令的那個(gè)元素 bind: function (el) { el.style.color = "red"; } }); Vue.directive("focus", { // 這里的el就是被綁定指令的那個(gè)元素 //此時(shí)如果將insert改為bind并不會聚焦，因?yàn)樵赽ind時(shí)期，還沒有渲染到界面 inserted: function (el) { el.focus(); } }); // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 這里就是MVVM中的Model data: { }, // 專門用于存儲監(jiān)聽事件回調(diào)函數(shù) methods: { } }); </script> </body> </html>自定義指令參數(shù)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>19-常用指令-自定義指令參數(shù)</title> <script src="js/vue.js"></script> </head> <body> <!-- 1.自定義指令參數(shù) 在使用官方指令的時(shí)候我們可以給指令傳參 例如: v-model="name" 在我們自定義的指令中我們也可以傳遞傳遞 2.獲取自定義指令傳遞的參數(shù) 在執(zhí)行自定義指令對應(yīng)的方法的時(shí)候, 除了會傳遞el給我們, 還會傳遞一個(gè)對象給我們 這個(gè)對象中就保存了指令傳遞過來的參數(shù) --> <!--這里就是MVVM中的View--> <div id="app"> <!-- <p v-color="'blue'">我是段落</p>--> <p v-color="curColor">我是段落</p> </div> <script> Vue.directive("color", { // 這里的el就是被綁定指令的那個(gè)元素 bind: function (el, obj) { // el.style.color = "red"; el.style.color = obj.value; } }); // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 這里就是MVVM中的Model data: { curColor: 'green' }, // 專門用于存儲監(jiān)聽事件回調(diào)函數(shù) methods: { } }); </script> </body> </html>自定義局部指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>21-常用指令-自定義局部指令</title> <script src="js/vue.js"></script> </head> <body> <!-- 1.自定義全局指令的特點(diǎn) 在任何一個(gè)Vue實(shí)例控制的區(qū)域中都可以使用 2.自定義局部指令的特點(diǎn) 只能在自定義的那個(gè)Vue實(shí)例中使用 3.如何自定義一個(gè)局部指令 給創(chuàng)建Vue實(shí)例時(shí)傳遞的對象添加 directives: { // key: 指令名稱 // value: 對象 'color': { bind: function (el, obj) { el.style.color = obj.value; } } } --> <!--這里就是MVVM中的View--> <div id="app1"> <p v-color="'blue'">我是段落</p> </div> <div id="app2"> <p v-color="'red'">我是段落</p> </div> <script> // 這里就是MVVM中的View Model let vue1 = new Vue({ el: '#app1', // 這里就是MVVM中的Model data: {}, // 專門用于存儲監(jiān)聽事件回調(diào)函數(shù) methods: {} }); // 這里就是MVVM中的View Model let vue2 = new Vue({ el: '#app2', // 這里就是MVVM中的Model data: {}, // 專門用于存儲監(jiān)聽事件回調(diào)函數(shù) methods: {}, // 專門用于定義局部指令的 directives: { "color": { // 這里的el就是被綁定指令的那個(gè)元素 bind: function (el, obj) { el.style.color = obj.value; } } } }); </script> </body> </html>
