跟着尚硅谷学vue-day4
前言：事件处理，事件修饰符和键盘事件的了解和熟悉
1.事件处理
事件的基本使用:
1.使用v-on:xxx或@xxx绑定事件，其中xxx是事件名;2.事件的回调需要配置在methods对象中，最终会在vm上;
3.methods中配置的所数，不要用箭头函数!否则this就不是vm了;
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象:
5.@click="demo”和 @click="demo($event)”效果一致，但后者可以传参;
6.methods中的函数会绑定到vm上，和变量不同的是，变量是数据绑定。
<button v-on:click="showInfo">点我出现小猫</button>
给一个元素绑定事件 ，当这个元素被点击的时候，执行一个回调函数
执行回调函数需要在vm实例当中写到methods里面，可以写入点击按钮之后出现的操作。
1.1.回调函数参数问题
当没传参的时候 event.target 指向的是<button>点我出现小猫</button>该按钮
event.target.innerText,出现点我出现小猫
缩写：v-on: ==>@
注意
1.2.例子
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script type="text/javascript" src="../js/vue.js"></script>
</head><body><div id="root"><h2>我的小猫：{{name}}</h2><h2>小猫在哪：{{address}}</h2><button v-on:click="showInfo">点我出现一只小猫</button><br /><!-- 给一个元素绑定事件 ，当这个元素被点击的时候，执行一个回调函数 --><button v-on:click="showInfo1(66,$event)">点我出现两只小猫</button></div><script type="text/javascript">Vue.config.productionTip = false;const vm = new Vue({el: '#root',data: {name: 'douzi',address: 'alsjjj'},methods: {showInfo(event) {console.log(this)console.log(event.target.innerText);console.log(event.target);// console.log(a,b,c,d)alert('泥嚎,田园猫')},//配置项showInfo1(number, event) {// console.log(this)// console.log(event.target.innerText);// console.log(event.target);// console.log(a,b,c,d)console.log(number, event)alert('泥嚎，大橘')}//配置项}})</script>
</body></html>2.事件修饰符
<button @click.once="showInfo">点我跳转百度</button>
<a href="https://www.baidu.com" @click.prevent="showInfo">点我跳转百度</a>
<div class="demo1" @click="showInfo">
<ul @wheel.passive="demo11" class="list">
Vue中的事件修饰符:
1.prevent:阻止默认事件(常用);
2.stop:阻止事件冒泡(常用);如果一个容器外还有一个容器，且这两个容器都绑定了点击事件，那么当点里面那个容器的时候，会出现弹框出现两次。冒泡冒到div上了。弹框可以理解成为测试过程中，更加明显的显示问题所在。
3.once:事件只触发一次(常用);
4.capture:使用事件的捕获模式:当点击之后，先经过捕获，在进行冒泡，冒泡阶段进行事件处理，所以结果是2,1,当给外层div进行捕获,在捕获阶段就进行了事件处理，所以结果是1,2
5.self:只有event.target是当前操作的元素时候才触发事件:不给外层div加self的时候，点击按钮，会触发两次按钮事件，但是给外层div增加self之后，点击按钮，点击按钮这个事件和外层div无关，所以外层div不会有反应。
6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕
注意：事件修饰符stop和 prevent可以混用，@click.stop.prevent="showInfo" 先阻止事件冒泡，再阻止默认事件。
2.1scroll和wheel的区别
scroll 滚动条滚动
wheel,鼠标滚轮的滚动，滚动条可能走了非常远，当滚动了之后，触发事件，执行回调函数(在函数中加入时间比较长的循环，所以时间差很明显)，再执行默认行为（滚动条下滑）
加了passive之后，会发现，先执行默认行为，之后，才执行回调函数事件当中的代码。如果是移动端项目，可以使用。
2.2代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script type="text/javascript" src="../js/vue.js"></script><style>* {margin-top: 20px;}.demo1 {height: 50px;background-color: blue;}.box1 {padding: 5px;background-color: rgb(29, 195, 76);}.box2 {padding-left: 10px;background-color: rgb(211, 128, 20);}.list {width: 200px;height: 200px;background-color: brown;overflow: auto;}li {height: 100px;}/* 子元素从父元素溢出，条数不够，增加滚动条 */</style>
</head><body><div id="root"><h2>我的小猫：{{name}}</h2><h2>小猫在哪：{{address}}</h2><!-- Vue中的事件修饰符: --><!-- 1.prevent:阻止默认事件(常用); --><a href="https://www.baidu.com" @click.prevent="showInfo">点我跳转百度</a><!-- 2.stop:阻止事件冒泡(常用); --><div class="demo1" @click="showInfo"><a href="https://www.baidu.com" @click.stop="showInfo">点我跳转百度</a></div><!-- 3.once:事件只触发一次(常用); --><button @click.once="showInfo">点我跳转百度</button><!-- 4.capture:使用事件的捕获模式: --><div class="box1" @click.capture="showmsg(1)">div1<div class="box2" @click="showmsg(2)">div2</div></div><!-- 5.self:只有event.target是当前操作的元素是才触发事件: --><div class="demo1" @click.self="showInfo"><button @click="showInfo">点我跳转百度</a></div><!-- 6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕: --><ul @wheel.passive="demo11" class="list"><li>1</li><li>2</li><li>3</li><li>4</li></ul></div><script type="text/javascript">Vue.config.productionTip = false;new Vue({el: '#root',data: {name: 'douzi',address: 'alsjjj'},methods: {showInfo(e) {// e.stopPropagation();//stop// e.preventDefault() //preventalert('nihao')console.log(e.target)},showmsg(e) {console.log(e)},demo11(e) {for (let i = 0; i < 1000; i++) {console.log('#')}console.log('1')}}})</script>
</body></html>3.键盘事件
3.1按键
<input type="text" placeholder="按下回车输入" @keyup.enter="showInfo">
在输入框输入内容之后，按下enter，就可以得到值。
3.1.1.Vue中常用的按键别名方式1
Vue中常用的按键别名:
回车=>enter e.keyCode == 13
删除 => delete(捕获“删除”和“退格”键)
退出 =>esc
空格 =>space
换行 =>tab ( tab作用是转移焦点，keyup需要按下并抬起，tab在按下的时候，就已经转移到别的地方了，所以需要配合keydown keydown.tab)
上=> up
下=> down
左=>left
右=> right
3.1.2.Vue中常用的按键别名方式2
在vue实例中的methods中，在方法中进行判断
showInfo(e){if(e.keyCode !== 13){console.log(e.keyCode);return ;}}e.key 获取键盘的按键名。 e.keyCode 获取键盘的按键编码。 e.target.value获取输入框值。
3.2.自定义按键
Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)，比如 CapsLock 需要写成keyup.caps-lock ,注意有些按键不能绑定别名
3.3.系统修饰健(用法特殊):ctrl、alt、shift、meta
(1).配合keyup使用:按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。比如ctrl+y ==>@keyup.ctrl.y
(2).配合keydown使用:正常触发事件。
3. 4.也可以使用keyCode去指定具体的按键(不推荐)
因为不同的键盘的keyCode值不一样 @ keyup.13
3.5.Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名
Vue.config.keyCodes.huiche = 13; @keyup.huiche="showInfo"
3.6代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script type="text/javascript" src="../js/vue.js"></script>
</head><body><div id="root"><h2>我的小猫：{{name}}</h2><h2>小猫在哪：{{address}}</h2><input type="text" placeholder="按下回车输入" @keyup.huiche="showInfo"><!-- ctrl.y --><!-- keyup keydown --><!-- 1.Vue中常用的按键别名:回车=>enter删除 => delete(捕获“删除”和“退格”键)退出 =>esc空格 =>space换行 =>tab 转移焦点，按下并抬起，keyup keydown keydown.tab上=> upF=> down左=>left右=> right自定义按键2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)有些按键不能绑定别名 keyup.caps-lock3.系统修饰健(用法特殊):ctrl、alt、shift、meta(1).配合keyup使用:按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。ctrl+y(2).配合keydown使用:正常触发事件。4.也可以使用keyCode去指定具体的按键(不推荐) 因为不同的键盘的keyCode值不一样5.Vue.config.keyCodes.自定义键名 =键码，可以去定制按键别名 --></div><script type="text/javascript">Vue.config.productionTip = false;Vue.config.keyCodes.huiche = 13;new Vue({el: '#root',data: {name: 'douzi',address: 'alsjjj'},methods: {showInfo(e) {console.log(e.key, e.keyCode)// CapsLock 20// if(e.keyCode !== 13){// console.log(e.keyCode);// return ;// }//按下回车返回value值console.log(e.target.value)//不需要enter,就返回value值。}}})</script>
</body></html>