事件处理
| 事件 | 释义 |
|---|---|
| input | 当输入框进行输入的时候 触发的事件 |
| change | 当元素的值发生改变时 触发的事件 |
| blur | 当输入框失去焦点的时候 触发的事件 |
change 和 blur 最本质的区别：
如果输入框为空，失去焦点后，change不会触发，但是blur会触发
过滤案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>过滤案例</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> </head> <body> <div id="box"> <p><input type="text" v-model="myText" @input="handleInput" placeholder="请输入要筛选的内容："></p> <!-- <p><input type="text" v-model="myText" @change="handleInput" placeholder="请输入要筛选的内容："></p> --> <!-- <p><input type="text" v-model="myText" @blur="handleInput" placeholder="请输入要筛选的内容："></p> --> <ul> <li v-for="data in newList">{{data}}</li> </ul> </div> </body> <script> var vm = new Vue({ el: '#box', data: { myText: '', dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'], newList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'], }, methods: { handleInput() { this.newList = this.dataList.filter(item => { // item.indexOf(this.myText)：输入框中输入的字符串在筛选元素中的索引 return item.indexOf(this.myText) > -1 // 返回索引大于1的元素：>-1 就表示包含在其中 }) }, }, }) </script> </html>
事件修饰符
| 事件修饰符 | 释义 |
|---|---|
| .stop | 只处理自己的事件，父控件冒泡的事件不处理（阻止事件冒泡） |
| .self | 只处理自己的事件，子控件冒泡的事件不处理 |
| .prevent | 阻止a链接的跳转 |
| .once | 事件只会触发一次（适用于抽奖页面） |
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生
用 v-on:click.prevent.self 会阻止所有的点击
而 v-on:click.self.prevent 只会阻止对元素自身的点击
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件修饰符</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> </head> <body> <div id="box"> <!-- <ul @click="handleUl">--> <ul @click.self="handleUl"> <!-- <li v-for="data in dataList" @click="handleLi">{{data}}</li>--> <li v-for="data in dataList" @click.stop="handleLi">{{data}}</li> <li><a href="http://www.baidu.com">不拦截</a></li> <li><a href="http://www.baidu.com" @click="handleLink($event)">点击拦截</a></li> <li><a href="https://www.baidu.com" @click.prevent="handleLink">点击拦截</a></li> <li><button @click.once="test">只执行一次</button></li> </ul> </div> </body> <script> var vm = new Vue({ el: '#box', data: { dataList: ['1','22','333','4444'] }, methods: { handleUl(ev){ console.log('ul被点击了') }, handleLi(){ console.log('li被点击了') ev.stopPropagation() // 点击事件停止 冒泡（向父组件传递时间） }, handleLink(ev){ ev.preventDefault() }, test(){ alert('只触发1次') } } }) </script> </html>
事件冒泡
阻止事件冒泡
阻止链接跳转+只执行1次
按键修饰符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>按键修饰符</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> </head> <body> <div id="box"> <!-- <input type="text" v-model="myInput" @keyup="handleKey">--> <!-- <input type="text" v-model="myInput" @keyup.13="handleKey">--> <input type="text" @keyup="handleKey1"> <input type="text" @keyup.enter="handleKey2"> </div> </body> <script> var vm = new Vue({ el: '#box', data: { dataList: ['1', '22', '333', '4444'] }, methods: { handleKey1(ev) { console.log('按下了' + ev) // if (ev.keyCode==13){ // console.log('回车键被按下了') // } }, handleKey2(ev) { console.log('按下了回车键') } } }) </script> </html>
