vue.js基础（8）

最新推荐文章于 2023-08-03 15:31:24 发布

power_to_go_l7

最新推荐文章于 2023-08-03 15:31:24 发布

阅读量190

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/power_to_go_l7/article/details/79835443

版权

前端学习专栏收录该内容

17 篇文章 0 订阅

订阅专栏

事件处理

监听事件

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

<div id="example-1">
    <button v-on:click="counter += 1">Add 1</button>
    <p>The button above has been clicked {{counter}} times.<p>
</div>

var example1 = new Vue({
    el:"#example-1",
    data:{
        counter:0
    }
})

事件处理方法

v-on还可以接收一个需要调用的方法名称
例：

<div id="example-2">
    <!--'greet' 是在下面定义的方法名-->
    <button v-on:click="greet">Greet</button>
</div>

var example2 = new Vue({
    el:"#example-2",

    data:{
        name:"vue.js"
    }
    //在methods对象中定义方法
    methods:{
        greet:function(event){
            //this在方法里指向当前Vue实例
            alert("Hello" + this.name + '!')
            //event是原生DOM事件
            if(event){
                alert(event.target.tagname)
            }
        }
    }
})

//也可以用Javascript直接调用方法
example2.greet()    //=>"Hello Vue.js"

内联处理器中的方法

除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法：

<div id="example-3">
    <button v-on:click="say('hi')">Say hi</button>
    <button v-on:click="say('what')">Say hi</button>
</div>

new Vue({
    el:"#example-3",
    methods:{
        say:function(message){
            alert(message)
        }
    }
});

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：

<button v-on:click="warn('Form cannot be submitted yet.',$event)">
    Submit
</button>

methods:{
    warn:function(message,event){
        //现在可以访问原生事件对象
        if(event) event.preventDefault()
        alert(message)
    }
}

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。

但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。
- .stop
- .prevent
- .capture
- .self
- .once

<!--阻止单击事件继续传播-->
<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>

不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。

Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

这个 .passive 修饰符尤其能够提升移动端的性能。

不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

<!-- 同上 -->
<input v-on:keyup.enter="submit">

<!-- 缩写语法 -->
<input @keyup.enter="submit">

全部的按键别名：
- .enter
- .tab
- .delete(捕获“删除”和“退格”键)
- .esc
- .space
- .up
- .down
- .left
- .right

可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

自动匹配按键修饰符

可直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符：

<input @keyup.page-down="onPageDown">

在上面的例子中，处理函数仅在 $event.key === ‘PageDown’ 时被调用。

有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，它们的内置别名应该是首选。

系统修饰键

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
- .ctrl
- .alt
- .shift
- .meta
注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。

.exact修饰符

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

鼠标按钮修饰符

.left
.right
.middle
这些修饰符会限制处理函数仅响应特定的鼠标按钮。

为什么在HTML中监听事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app1">
            <button v-on:click="counter +=1">增加一</button>
            <p>已被点击{{counter}}次</p>
        </div>

        <div id="app2">
            <!--greet是下面定义的方法名-->
            <button v-on:click="greet">Greet</button>
        </div>
        <div id="app3">
            <button v-on:click="say('hi')">Say hi</button>
            <button v-on:click="say('what')">Say What</button>
        </div>
    </body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
    new Vue({
        el:"#app1",
        data:{
            counter:0
        }
    });

    new Vue({
        el:"#app2",
        data:{
            name:"Vue.js"
        },
        //在methods对象中定义方法
        methods:{
            greet:function(event){
                //this在方法里指当前Vue实例
                alert("Hello" + this.name + "!");
                //event是原生Dom事件
                if(event){
                    alert(event.target.tagName);
                }
            }
        }
    });
    new Vue({
        el:"#app3",
        methods:{
            say:function(message){
                alert(message);
            }
        }
    });
</script>