9 vue之事件处理(过滤、事件修饰符、按键修饰符)
事件处理
1.事件
2 change 和 blur 的区别
change 和 blur 最本质的区别:
如果输入框为空,失去焦点后,change不会触发,但是blur会触发
3 input事件、change事件、blur事件
当输入框进行输入的时候 触发的事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> </head> <body> <div class="app"> <!-- input:<input type="text" v-model="username" @input="handleInput">--> <!-- change:<input type="text" v-model="username" @change="handleChange">--> blur:<input type="text" v-model="username" @blur="handleBlur"> </div> </body> <script> var vm = new Vue({ el: '.app', data: { username: '', }, methods:{ // handleInput(){ // console.log(this.username) // }, // handleChange(){ // console.log(this.username) // }, handleBlur(){ console.log(this.username) } } }) </script> </html>
一、过滤案例
# 数组如何过滤
数组.filter(function (item){
return true/false # 如果return了true当前item保留,否则不保留
})
# es6的箭头函数,处理this指向的问题
数组.filter(item=>{
return true/false # 如果return了true当前item保留,否则不保留
})
# indexOf:字符串的方法
字符串.indexOf(子字符串),如果子字符串在字符串中,返回索引,如果不在返回 -1,如果大于-1说明,子字符串在字符串中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> </head> <body> <div class="app"> <input type="text" v-model="myText" @input="handledInput"> <p v-for="data in newDataList">{{data}}</p> </div> </body> <script> var vm = new Vue({ el: '.app', data: { myText: '', dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'], newDataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'], }, methods: { // handledInput() { // var _this=this // // this.newDataList = this.dataList.filter(function (item) { // console.log(item) // console.log(_this.myText) // return item.indexOf(_this.myText)>-1 // // }) // // } // es6 箭头函数,处理this指向的问题 handledInput() { this.newDataList = this.dataList.filter(item=>{ return item.indexOf(this.myText) > -1 }) } } })
</script>
</html>
数组的过滤方法
var dataList=['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
dataList=dataList.filter(function (item) {
// return是true或false,如果是true,该元素会保留,否则不保留
return item.length>4
})
console.log(dataList)
<script> var ll = ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'] var new_ll = ll.filter(function (item){ //写逻辑 return false }) console.log(new_ll) </script>
item 是数组中一个一个的元素
return true则当前的元素留下
return false则不留下当前的元素
indexOf的使用:判断子字符串在该字符串的那个位置,不在返回 -1
过滤数组中以at开头的所有字符串
var myText='at'
var dataList=['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
dataList=dataList.filter(function (item) {
return item.indexOf(myText)>=0
// return item.length>4
})
console.log(dataList)
var res='lqz'.indexOf('f')
console.log(res)
箭头函数,箭头函数内部的this,就是外层的this
var f= function (a) {
console.log(a)
}
var f= a =>{
console.log(a)
}
f(4) // 函数才执行
二、事件修饰符
2 事件冒泡
案例:ul套li,点击li会触发ul的事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> </head> <body> <div id="app"> <ul @click="handleUl"> <li @click="handleLi">我是li1</li> <li>我是li2</li> </ul> </div> </body> <script> let vm = new Vue({ el: '#app', data: { }, methods:{ handleLi(){ console.log('li被点击l') }, handleUl(){ console.log('ul被点击l') }, } }) </script> </html>
解决方法1:.stop
只处理自己的事件,阻止事件冒泡,写在子控件中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> </head> <body> <div id="app"> <ul @click="handleUl"> <li @click.stop="handleLi">我是li1</li> <li>我是li2</li> </ul> </div> </body> <script> let vm = new Vue({ el: '#app', data: { }, methods:{ handleLi(){ console.log('li被点击l') }, handleUl(){ console.log('ul被点击l') }, } }) </script> </html>
解决方法2:.self
只处理自己的事件,子控件冒泡的事件不处理,写在父控件中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> </head> <body> <div id="app"> <ul @click.self="handleUl"> <li @click="handleLi">我是li1</li> <li>我是li2</li> </ul> </div> </body> <script> let vm = new Vue({ el: '#app', data: { }, methods:{ handleLi(){ console.log('li被点击l') }, handleUl(){ console.log('ul被点击l') }, } }) </script> </html>
3 .prevent
阻止a链接的跳转
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> </head> <body> <div id="app"> <a href="https://www.baidu.com/" @click.prevent="handleClick">致命诱惑</a> </div> </body> <script> let vm = new Vue({ el: '#app', data: { }, methods:{ handleClick(){ console.log('a标签被点击了') }, } }) </script> </html>
4.once
事件只会触发一次(适用于抽奖页面)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> </head> <body> <div id="app"> <button @click.once="handleClick">秒杀</button> </div> </body> <script> let vm = new Vue({ el: '#app', data: { }, methods:{ handleClick(){ console.log('只能点一次哦') }, } }) </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> </head> <body> <div class="app"> <!-- 只处理自己的事件,冒泡上来的事件不处理--> <ul @click.self="handleUl"> <li @click.stop="handleLi1">li1,加了stop后,阻止了事件冒泡,事件不往上传递了</li> <li @click="handleLi2">li2</li> </ul> <hr> <a href="http://www.baidu.com" @click.prevent="handleA">点我看美女</a> <hr> <button @click.once="buttonClick">点我秒杀</button> </div> </body> <script> var vm = new Vue({ el: '.app', data: {}, methods: { handleLi1() { console.log('li1被点击了') }, handleLi2() { console.log('li2被点击了') }, handleUl() { console.log('ul被点击了') }, handleA(){ console.log('a被点击了') window.location='http://www.jd.com' // 手动跳转 }, buttonClick(){ console.log('button被点击了') } } }) </script> </html>
三、按键修饰符
1 按键修饰符
keydown:当用户按下键盘上的任意键时触发,如果按住不放的话,会重复触发此事件;
keypress:当用户按下键盘上的字符键时触发,如果按住不放的话,会重复触发此事件;
keyup:当用户释放键盘上的字符键时触发。
2 $event
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> </head> <body> <div id="app"> <input type="text" v-model="msg" @keyup="handleUp($event)"> </div> </body> <script> let vm = new Vue({ el: '#app', data: { msg:'' }, methods:{ handleUp(event){ console.log(event) }, } }) </script> </html>
3 案例:当敲回车,弹出输入的内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> </head> <body> <div id="app"> <input type="text" v-model="msg" @keyup.enter="handleUp($event)"> </div> </body> <script> let vm = new Vue({ el: '#app', data: { msg:'' }, methods:{ handleUp(event){ alert(this.msg) }, } }) </script> </html>