vue中的事件监听机制

Posted 2021-03-19 mrsdong

事件监听

基础用法

• 监听dom事件使用v-on指令： v-on:事件类型="一个函数" 。这个事件类型可以自定义。

• v-on 指令绑定事件后，就会监听相应的事件，并在触发时运行一些 javascript 代码。

　　

    <div id="box1">
      <button v-on:click="counter += 1">点我</button>
      <p>已点击 {{ counter }} 次</p>
    </div>
    <script>
        var practice1 = new Vue({
          el: '#box1',
          data: {
            counter: 0
          }
        })  
    </script>

 

展示效果

缩写

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，Vue 为 v-on 提供了特定简写：

 <!-- 完整语法 -->
 <a v-on:click="doSomething">click</a>

 <!-- 缩写 -->
 <a @click="doSomething">click</a>
 

• @click是 v-on:click 的简写形式， @ 即表示 v-on:。
• 它们看起来可能与普通的 html 略有不同，但 : 与 @ 对于特性名来说都是合法字符，在所有支持 Vue 的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记中。缩写语法是完全可选的。

作用

绑定事件监听，表达式可以是一个方法的名字或一个内联语句，
如果没有修饰符也可以省略，用在普通的html元素上时，只能监听原生DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。　　

常用事件

• v-on:click
• v-on:keydown
• v-on:keyup
• v-on:mouseenter
• v-on:mouseleave
• v-on:mousedown
• v-on:mouseover
• v-on:submit

示例

<!-- v-on:submit 阻止默认行为 -->
<form v-on:submit.prevent></form>

Vue.js 提供了一个 $event 变量，使用它可以访问原生 DOM 事件。$event 变量可以通过方法传入。

<div id="app">
    <!-- 内联语句 -->
    <a href="www.163.com" v-on:click="openUrl('被禁用喽',$event)">被禁用喽</a>
</div>    

<script>
    var app = new Vue({
        el:"#box",
        data: {
            count:0
        },
        methods: {
            openUrl:function (param,event) {
                event.preventDefault();
                console.log("param"+ param);
            }
        }
    })
</script>

输出结果：

param:被禁用咯

这个示例利用传入的 event 参数，禁用了原有的链接跳转逻辑。

事件修饰符

.stop

<!-- v-on:click.stop 阻止事件冒泡 -->
<button v-on:click.stop="show">B</button>

.prevent

<!-- v-on:click.prevent 阻止默认行为 -->

<a href="http://www.baidu.com/" v-on:click.prevent>A</a> 
<!-- 没有表达式-->

<a href="http://www.baidu.com/" v-on:click.prevent="show">B</a>
<!-- 有表达式 -->

<!-- 举例 -->
<div id="app">
        <a href="http://www.baidu.com/" v-on:click.prevent>A</a>
        <br />
        <a href="http://www.baidu.com/" v-on:click.prevent="show">B</a>
    </div>

</div>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        methods:{
            show(){
                console.log("1")
            }
        }
    })
</script>

A链接的默认事件是跳转到baidu.com，添加了prevent后，点击A，默认事件无效。

B链接的默认事件也是跳转到baidu.com，添加了带有表达式的prevent后，点击B，跳转事件无效，但手动添加的show方法有效，
控制台中显示1，因为show不是默认事件。

.capture

<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">text</div>

.self

<!-- v-on:click.self  -->
<div v-on:click.self="show2"></div>

功能：当事件是从侦听器绑定的元素本身触发时才触发回调。

举例：

<div id="app">
    <div style="width: 100px;height: 100px;background-color: #008000;" v-on:click="show1">
        第一层
        <div v-on:click.self="show2">
            第二层
            <div v-on:click="show3">
                第三层
                <div v-on:click="show4">
                    第四层
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        methods: {
            show1() {console.log("1")},
            show2() {console.log("2")},
            show3() {console.log("3")},
            show4() {console.log("4")}
        }
    })
</script>

假设我们没有在第二层的div上添加self，那么我们点击第四层的时候，控制台将会出现结果4 3 2 1（冒泡），
添加了之后，点击第四层，控制台显示4 3 1，因为第二层的self把第二层的事件设置成了仅自己调用时才有效，
所以冒泡把第二层跳过了。

.keyCode | keyAlias

<!-- .{keyCode | keyAlias} 用特定按键触发事件 -->
<input type="text"  v-on:keydown.13="show1" /><br/>
<!-- 使用KeyCode 13代表enter键 -->

<input type="text"  v-on:keydown.right="show2" />
<!-- 使用别名，right代表方向键右 -->

.native

功能：监听组件根元素的原生事件。

<div id="app">
    <mycomponent v-on:click.native="myfn"></mycomponent>
</div>
<script type="text/javascript">
    Vue.component('mycomponent',{
        template:`<a href="#">点我</a>`
    })
    var vm = new Vue({
                el: '#app',
        methods:{
            myfn(){
                console.log(1);
            }
        }
    });
</script>

• 使用native修饰符需要先创建一个自定义组件，然后在html中调用组件时，再使用。
• 如果v-on:click不加.native,那么点击是无效的，控制台不会出现任何内容。

.once

功能：只触发一次回调。多次点击，控制台只出现一次结果。
<mycomponent v-on:click.native.once="myfn"></mycomponent>

• 使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 @click.prevent.self 会阻止所有的点击，而 @click.self.prevent 只会阻止元素上的点击。

动态参数

2.6.0 新增

从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：

<a v-on:[eventName]="doSomething"> ... </a>

在这个示例中，当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus。