day57--事件处理

事件处理

使用v-on：xxx或者@xxx绑定事件，xxx是事件别名

在methods对象中配置回调函数

在methods中配置函数时，不要使用箭头函数

click事件

点击事件，点击对应的标签或者按钮会产生一个事件

@click='demo' 和@click='demo($event)'效果一致，但后者可以传参

代码如下：

首先创建div标签：

 <div id="root">
     <h2>欢迎来到{{name}}世界</h2>
 <!--    <button v-on:click="showInfo">点我提示信息1</button>-->
     <button @click="showInfo1">点我提示信息1不传参</button>
 <!--    简写-->
     <button @click="showInfo2(66,$event)">点我提示信息2 传参</button>
 
 </div>

之后设置vue实例：

 <script>
     const vm = new Vue({
         el:'#root',
         data:{
             name:'gugu'
         },
         methods:{
             showInfo1(event){
                 console.log(this)//此处的this是vm
                 alert('hello')
             },
             showInfo2(number,event){
                 alert('hello hello')
                 console.log(number)
             }
         }
     })
 </script>

总结：

 <!--
     事件的基本使用：
         1. 使用v-on:xxx 或@xxx绑定事件，其中xxx是事件名
         2. 事件的回调需要配置在methods对象中，最终会在vm上
         3. methods中配置的函数，不要用箭头函数，否则this指代的是window
         4. methods中配置的函数，都是被vue所管理的函数，this指向的是vm或者组件实例对象
         5. @click='demo' 和@click='demo($event)'效果一致，但后者可以传参
 -->

事件修饰符

常见修饰符

prevent:阻止默认事件，例如网页跳转
stop:阻止事件冒泡例如回调时触发其他事件

once：事件只触发一次，之后再点击无效

代码：

 <div id="root">
     <h2>welcom to {{name}} world</h2>
 
     <!--prevent:阻止默认事件-->
     <a href="http://www.bilibili.com" @click.prevent="showinfo">点我提示信息</a>
 
     <!--stop：阻止事件冒泡-->
     <div class="demo1" @click="showinfo">
         <button @click.stop="showinfo">点我提示信息</button>
         <!--点一次按钮出现两次弹窗，先出现button中的，后出现div中的-->
     </div>
 
     <!--once:事件只触发一次-->
     <button @click.once="showinfo">点我提示信息</button>
 </div>
 <script>
     new Vue({
         el:'#root',
         data:{
             name:'gugu'
         },
         methods:{
             showinfo(){
                 alert('hello!')
             },
             showMsg(msg){
                 console.log(msg)
             },
             demo(){
                 for (let i = 0; i < 100000; i++) {
                     console.log('#')
                 }
                 console.log('tired')
             }
         }
     })
 </script>

css配置：

<style>
     *{
         margin-top: 20px;
     }
     .demo1{
         height: 50px;
         background: aqua;
     }
     .box1{
         padding: 5px;
         background: aquamarine;
     }
     .box2{
         padding: 5px;
         background: orange;
     }
     .list{
         width: 200px;
         height: 200px;
         background: palegreen;
         overflow:auto;
     }
     li{
         height: 100px;
     }
 </style>

不常见修饰符

capture：使用事件的捕获模式，在捕获事件时执行
self：只有event.target是当前操作的元素时才触发事件
passive：事件的默认行为立即执行，无需等待事件回调执行完毕

<div id="root">
     <h2>welcom to {{name}} world</h2>
 
 <!--capture：使用事件的捕获模式,在捕获时执行-->
     <div class="box1" @click.capture="showMsg(1)">
         div1
         <div class="box2" @click="showMsg(2)">
             div2
         </div>
     </div>
 
     <!--self：只有event.target是当前操作的元素时才触发事件-->
     <div class="demo1" @click.self="showinfo">
         <button @click="showinfo">点我提示信息</button>
     </div>
 
     <!--passive:事件的默认行为立即执行，无需等待事件回调执行完毕-->
     <ul class="list" @wheel="demo" @click.passive>
         <!--scroll:滚动条滚动触发事件-->
         <!--wheel:鼠标滚轮滚动触发事件-->
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
     </ul>
 </div>

vue实例与css同上

键盘事件

@keyup，keydown绑定键盘事件

 <!--  keydown:摁下就触发事件  -->
 <!--  keyup:摁下松手才触发事件  -->

代码：

 <body>
 <!--
     1. vue中常用的按键别名：
         回车：enter
         删除：delete（捕获删除和退格键）
         退出：esc
         空格：space
         换行：tab(特殊，必须要使用keydown使用)
         上：up
         下：down
         左：left
         右：right
      2.vue未提供别名的按键，可以使用按键原始的key值去绑定，但要注意转为kebab-case
 
      3. 系统修饰键：ctrl，alt，shift，meta，tab
         (1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
         (2).配合keydown使用：正常触发事件。
      4. 也可以使用KeyCode去指定具体的按键
      5. Vue.config.KeyCode.自定义键名 = 键码，可以定制按键别名
 -->
 <div id="root">
     <h2>welcome to {{name}} world</h2>
     <input type="text" placeholder="按下回车提示输入" @keyup.huiche="showInfo">
 
     <!--  keydown:摁下就触发事件  -->
     <!--  keyup:摁下松手才触发事件  -->
 
 </div>
 
 </body>
 <script>
     Vue.config.productionTip = false
     Vue.config.keyCodes.huiche = 13 // 定义了一个别名
     new Vue({
         el:'#root',
         data:{
             name:"gugu",
         },
         methods:{
             showInfo(e){
                 // console.log(e.key,e.keyCode)
                 console.log(e.target.value)
             }
         }
     })
 </script>