Vue之事件处理

监听事件

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

事件的基本使用：

1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；

2.事件的回调需要配置在methods对象中，最终会在vm上；

3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；

4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象；

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

代码举例：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8" />
 5         <title>事件的基本使用</title>
 6         <!-- 引入Vue -->
 7         <script type="text/javascript" src="../js/vue.js"></script>
 8     </head>
 9     <body>
10         <!-- 准备好一个容器-->
11         <div id="root">
12             <h2>欢迎来到{{school}}学习</h2>
13             <button @click="showInfo1">点我提示信息1（不传参）</button>
14             <button @click="showInfo2($event,99)">点我提示信息2（传参）</button>
15         </div>
16     </body>
17 
18     <script type="text/javascript">
19         Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
20 
21         const vm = new Vue({
22             el:'#root',
23             data:{
24                 school:'西华大学',
25             },
26             methods:{
27                 showInfo1(event){
28                     // console.log(event.target.innerText)
29                     // console.log(this) //此处的this是vm
30                     alert('小倩同学你好呀！')
31                 },
32                 showInfo2(event,number){
33                     console.log(event,number)
34                     // console.log(event.target.innerText)
35                      console.log(this) //此处的this是vm，点击可在控制台查看到传入的参数
36                     //alert('小倩同学你好呀！')
37                 }
38             }
39         })
40     </script>
41 </html>

事件修饰符

　　在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

Vue中的事件修饰符：

1.prevent：阻止默认事件（常用）；

2.stop：阻止事件冒泡（常用）；

3.once：事件只触发一次（常用）；

4.capture：使用事件的捕获模式；

5.self：只有event.target是当前操作的元素时才触发事件；

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

引用官网解释：前三个要记住，常用，后三个了解就行，不常用

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 
v-on:click.self.prevent 只会阻止对元素自身的点击。
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，
.passive 会告诉浏览器你不想阻止事件的默认行为。

按键修饰符

1.Vue中常用的按键别名：

回车 => enter

删除 => delete (捕获“删除”和“退格”键)

退出 => esc

空格 => space

换行 => tab (特殊，必须配合keydown去使用)

上 => up

下 => down

左 => left

右 => right

2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

3.系统修饰键（用法特殊）：ctrl、alt、shift、meta

(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。

(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">
    <!-- 输入数据按下回车，在控制台就能看到输入的内容，表明自定义事件触发成功，其他按键可自行测试 -->
            <input type="text" placeholder="按下回车提示输入" @keydown.huiche="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>