页面进行某些操作事件时，Vue 对象实例对事件进行相应的处理

1. 绑定监听

事件的基本使用：

使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
事件的回调需要配置在methods对象中，最终会在vm上；
methods中配置的函数，不要用箭头函数！否则this就不是vm了；
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象；
@click="demo"和 @click="demo($event)"效果一致，但后者可以传参；

event可以获取标签内容
定义方式：

v-on:xxx="fun"
@xxx="fun"
@xxx="fun(参数)"
默认事件形参: event
隐含属性对象:$event
代码演示：

事件对象
- 默认事件形参: event
- 隐含属性对象: $event
- $event就是当前触发事件的元素，即使不传 $event，在回调函数中也可以使用 event 这个参数。

在绑定的事件定义了自己的参数，event形参就回消失，如果你需要获取标签里的元素就要在定义参数时同时也加上$event例如：@click="showinfo2(666,$event)"

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Vue中的数据代理</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../vuejs/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>欢迎您：{{ name }}</h2>
    <button v-on:click="showinfo">点击提示1(不传参)</button>
    <button @click="showinfo2(666,$event)">点击提示2(传参)</button>
    <button @click="showinfo3">点击提示3</button>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false
    const vm = new Vue({
        el: '#root',
        data: {
            name: 'Tom',
            address: '湖南'
        },
        methods:{
            showinfo(event){
                console.log('showinfo的输出：')
                console.log(event.target.innerText)
                console.log(this)//此时的this是vm
            },
            showinfo2(number,event){
                console.log('showinfo2的输出：')
                console.log(number)
                console.log(event.target.innerText)
            },
            showinfo3(event){
                console.log('showinfo3的输出：')
                console.log(event.target.innerText)
            }
        }
    })
</script>
</body>
</html>

演示效果：

2.事件修饰符

prevent：阻止默认事件（常用）；event.preventDefault()
1. 例如阻止跳转，用法：<a href="https://www.baidu.com" @click.prevent="showinfo">点击提示</a>
stop：阻止事件冒泡（常用）；event.stopPropagation()
once：事件只触发一次（常用）；
capture：使用事件的捕获模式；
self：只有event.target是当前操作的元素时才触发事件；

passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

代码部分：

<!DOCTYPE html>
<html>
 <head>
     <meta charset="UTF-8" />
     <title>事件修饰符</title>
     <!-- 引入Vue -->
     <script type="text/javascript" src="../js/vue.js"></script>
     <style>
         *{
             margin-top: 20px;
         }
         .demo1{
             height: 50px;
             background-color: skyblue;
         }
         .box1{
             padding: 5px;
             background-color: skyblue;
         }
         .box2{
             padding: 5px;
             background-color: orange;
         }
         .list{
             width: 200px;
             height: 200px;
             background-color: peru;
             overflow: auto;
         }
         li{
             height: 100px;
         }
     </style>
 </head>
 <body>
     <!-- 准备好一个容器-->
     <div id="root">
         <h2>欢迎来到{{name}}学习</h2>
         <!-- 阻止默认事件（常用） -->
         <a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

         <!-- 阻止事件冒泡（常用） -->
         <div class="demo1" @click="showInfo">
             <button @click.stop="showInfo">点我提示信息</button>
             <!-- 修饰符可以连续写 -->
             <!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
         </div>

         <!-- 事件只触发一次（常用） -->
         <button @click.once="showInfo">点我提示信息</button>

         <!-- 使用事件的捕获模式 -->
         <div class="box1" @click.capture="showMsg(1)">
             div1
             <div class="box2" @click="showMsg(2)">
                 div2
             </div>
         </div>

         <!-- 只有event.target是当前操作的元素时才触发事件； 
             只是点击button那只会执行button的showInfo，div的@click不会触发，
             只有点击div是才会触发div的showInfo -->
         <div class="demo1" @click.self="showInfo">
             <button @click="showInfo">点我提示信息</button>
         </div>

         <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； 当使用鼠标的滚轮
         的时候，滚动条会动，同时demo事件也会触发，是并行执行的-->
         <ul @wheel.passive="demo" class="list">
             <li>1</li>
             <li>2</li>
             <li>3</li>
             <li>4</li>
         </ul>

     </div>
 </body>

 <script type="text/javascript">
     Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

     new Vue({
         el:'#root',
         data:{
             name:'尚硅谷'
         },
         methods:{
             showInfo(e){
                 alert('同学你好！')
                 // console.log(e.target)
             },
             showMsg(msg){
                 console.log(msg)
             },
             demo(){
                 for (let i = 0; i < 100000; i++) {
                     console.log('#')
                 }
                 console.log('累坏了')
             }
         }
     })
 </script>
</html>

3.按键修饰符

1.Vue中常用的按键别名：
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right

2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
3.系统修饰键（用法特殊）：ctrl、alt、shift、meta
(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。@keyup.ctrl.y 只有按住 Ctrl+y的情况才触发
(2).配合keydown使用：正常触发事件。
4.也可以使用keyCode去指定具体的按键（不推荐）
5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>键盘事件</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="root">
            <h2>欢迎来到{{name}}学习</h2>
            <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
            <input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
      <!-- @keyup.ctrl.y 只有按住 Ctrl+y 的情况才触发-->
      <input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y="showInfo">
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        Vue.config.keyCodes.huiche = 13 //定义了一个别名按键

        new Vue({
            el:'#root',
            data:{
                name:'尚硅谷'
            },
            methods: {
                showInfo(e){
                    // console.log(e.key,e.keyCode)
                    console.log(e.target.value)
                }
            },
        })
    </script>
</html>

Java学习笔记

6-Vue 事件处理

1. 绑定监听

代码演示：

演示效果：

2.事件修饰符

代码部分：

3.按键修饰符