七叶笔记 » golang编程 » Vue基础入门，第11节 鼠标事件与键盘事件，事件修饰符的使用

Vue基础入门，第11节 鼠标事件与键盘事件，事件修饰符的使用

分类: golang编程 | 浏览: 200

v-on的作用是 为元素绑定监听事件

标准写法是：v-on:事件名=”函数名”，

也可以简写成：@事件名=’函数名’。

v-on绑定的事件触发后，methods对应的函数将触发。

不仅可以绑定鼠标事件，也可以绑定键盘事件

获取按键的内容

v-on:事件名后可以跟修饰符

常用的修饰符有

1、once：仅执行1次。

2、prevent：禁止默认行为

3、stop：在嵌套过程中，当多个元素响应同一个事件，防止发生冒泡。

4、self：避免自身受其他元素事件影响。

5、capture：添加事件侦听器。

举2个例子：

once

prevent

以上示例源码 

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue前端入门，第11节 鼠标事件与键盘事件，事件修饰符的使用</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>
<div id="app">
    <p>{{text}}</p>
    <p><input type="button" value="单击事件：v-on:click" v-on:click="btnClick"></p>
    <p><input type="button" value="单击事件：@click" @click="btnClick"></p>
    <p><input type="button" value="双击事件：v-on:dblclick" v-on:dblclick="dblclick"></p>
    <p><input type="button" value="双击事件：@dblclick" @dblclick="dblclick"></p>
    <p><input type="button" value="鼠标移入：@mouseenter" v-on:mouseenter="mouseenter"></p>
    <p><input type="button" value="鼠标移出：@mousemove" v-on:mousemove="mousemove"></p>
    <p>按键抬起：@keyup<input type="text" v-on:keyup="keyup"></p>
    <p>按键按下：@keypress<input type="text" v-on:keypress="keyup"></p>
    <p>输入内容后按下回车键后响应：@keydown.enter<input type="text" v-on:keydown.enter="keyup"></p>
    <p><input type="button" value="单击事件,仅响应一次：v-on:click" v-on:click.once="btnClickonce"></p>
    <p><a :href="link" v-on:click.prevent="click_prevent">链接</a></p>
</div>
<script>
    Vue.config.productionTip = false
    new Vue({
        el: "#app",
        data: {
            "text": "Vue前端入门，第9节 v-text的简单学习",
            "link": "#34;,
            "content": `<a href="#34;>Vue前端入门，第9节 v-text的简单学习</a>`
        },
        methods: {
            btnClick: function () {
                this.text = "单击事件"
            },
            dblclick: function () {
                this.text = "双击事件"
            },
            mouseenter: function () {
                this.text = "鼠标进入"
            },
            mousemove: function () {
                this.text = "鼠标移出"
            },
            keyup: function (e) {
                console.log(e.keyCode) //获取键盘码
                console.log(e.key)  //获取按键
                console.log(e.target.value)//获取对应的value的值
            },
            btnClickonce: function (e) {
                console.log(e.target.value)//获取对应的value的值
            },
            click_prevent: function (e) {
                console.log("click_prevent")//获取对应的value的值
            },

        }
    })
</script>
</body>
</html>

相关文章