（2）Vue事件绑定的使用

发布于：2025-04-20 ⋅ 阅读:(98) ⋅ 点赞:(0)

文章目录

第2章 Vue事件绑定的使用

2.1 Vue基本使用

Vue.js 是一个用于构建用户界面的渐进式JavaScript框架。它提供了一套声明式的渲染数据到DOM的系统（其底层依赖于Vue提供的VM组件），以及组件化的开发模式。Vue.js 通过指令来扩展HTML的功能，使得开发者能够以声明式的方式将DOM的绑定至底层Vue实例的数据上。

2.1.1 插值表达式

Vue.js 中的插值表达式是一种简洁的方式，用来在模板中显示数据模型的变化。最常用的插值表达式是双大括号 {{ }}，它可以插入数据模型中变量的值。

  • 使用示例：

当在模板中使用双大括号 {{ }} 包裹一段表达式时，Vue 会计算这段表达式的值，并将其转换为字符串然后插入到 DOM 中。例如：

<span>{{ message }}</span>

如果 Vue 实例的数据（data）中有 message 属性，那么该属性的值将被渲染到页面上。

插值表达式中可以包含任何有效的 JavaScript 表达式，包括变量引用、字符串连接、算术运算等。

例如：

<p>{{ firstName + ' ' + lastName }}</p>

<p>{{ 1 + 2 }}</p>

<p>{{ ok ? 'YES' : 'NO' }}</p>

小练习：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>

        <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <!-- 准备一个容器 -->
        <div id="box">
            <h3>number:{{number}}</h3>

            <h3>message:{{message}}</h3>

            <h3>flag:{{flag}}</h3>

            <h3>car:{{car}}</h3>

            <h3>season:{{season}}</h3>

        </div>

    </body>

    <script type="text/javascript">
        // 是否开启devtools调试工具(开发版本默认为true,生产版本默认为false)
        Vue.config.devtools = true;

        new Vue({ // 创建一个Vue实例
            el: "#box", // 通过id选择器选择某个控件(代码Vue接管这片区域)
            data: { // Vue中存放数据的地方(Model)
                number: 100,
                message: "Hello Vue!",
                flag: true,
                car: {
                    brand: "长安汽车",
                    name: "长安CS95",
                    price: 158000
                },
                season: ["Spring", "Summer", "Autumn", "Winter"]
            }
        })
    </script>

</html>

2.1.2 注意事项

一个Vue只能绑定一个组件，即使选择器可以选择多个组件，那么也不会生效；

<body>
    <div class="box">
        {{msg}}
    </div>

    <div class="box">
        {{msg}}
    </div>

    <script type="text/javascript">
        new Vue({
            el: ".box",				// 通过class选择器选择组件
            data: {
                msg:"Hello Vue!"
            }
        })
    </script>

</body>

当然，我们也可以创建多个Vue实例来接管多个组件。

<body>
<div id="box1">
    {{msg}}
</div>

<div id="box2">
    {{msg}}
</div>

<script type="text/javascript">
    new Vue({
        el: "#box1",				// 通过class选择器选择组件
        data: {
            msg:"Hello Vue!"
        }
    })

    new Vue({
        el: "#box2",				// 通过class选择器选择组件
        data: {
            msg:"Hello Vue!"
        }
    })
</script>

</body>

2.2 Vue事件绑定

在Vue中提供 v-on 命令用于监听 DOM 事件，并在事件触发时执行一些 JavaScript 代码。它可以在 Vue 模板中被用来响应用户操作，如点击按钮、输入文本等。可以直接在 HTML 元素上使用 v-on 指令来绑定一个事件监听器到这个元素上的某个事件上。最简单的形式是将一个方法名（字符串）作为表达式传入 v-on 指令。

  • 示例代码：
<button v-on:click="doSomething">点击我</button>

当用户点击按钮时，将会调用 Vue 实例中的 methods 属性里定义的 doSomething 方法。

  • 简写方式：

为了简化书写，Vue 还提供了一个简短的语法来代替完整的 v-on 写法。只需要使用 @ 符号加上事件名即可。

<button @click="doSomething">点击我</button>

vue提供的事件非常多，几乎支持所有的原生JS事件，采用v-on:的方式监听。常用的Vue事件如下。

事件类型 描述
click 当用户点击鼠标按钮时调用。
dblclick 当用户双击鼠标按钮时调用。
mousedown 当用户按下鼠标按钮时调用。
mouseup 当用户释放鼠标按钮时调用。
mouseover 当用户将鼠标指针移到元素上时调用。
mouseout 当用户将鼠标指针从元素或其子元素移开时调用。
mouseenter 当用户将鼠标指针移到元素上时调用（不包括子元素）。
mouseleave 当用户将鼠标指针从元素或其子元素移开时调用。
contextmenu 当用户右击（或执行类似操作）来打开上下文菜单时调用。
keydown 当用户按下键盘上的键时调用。
keypress 当用户按下一个或多个键并且产生字符值时调用。
keyup 当用户释放键盘上的键时调用。
submit 当表单提交时调用。
focus 当元素获得焦点时调用。
blur 当元素失去焦点时调用。
change 当域的内容被改变时调用。
input 每当输入字段发生变化时调用。
reset 当表单被重置时调用。
select 当用户选择一些文本或更改了对象的选择时调用。
touchstart 触摸开始时调用。
touchmove 触摸移动时调用。
touchend 触摸结束时调用。
touchcancel 触摸被中断时调用。

2.1.1 点击事件

点击事件分为单机事件与双击事件，在Vue中分别采用click和dbclick来监听。

  • v-on:click：单机事件。
  • v-dbclick：双击事件。

示例代码：

<body>
<div id="box">
    <h3>单击事件</h3>

    <p><a href="http://www.baidu.com" v-on:click="fun1">我是按钮1</a></p>

    <p><a href="http://www.baidu.com" v-on:click="fun2('hello')">我是按钮2</a></p>

    <p><a href="http://www.baidu.com" v-on:click="fun3">我是按钮3</a></p>

    <!-- v-on: 可以简写成@ -->
    <!-- 如果event参数在后面,则必须显示的传递 -->
    <p><a href="http://www.baidu.com" @click="fun4('hello',$event)">我是按钮4</a></p>

    <h3>双击事件</h3>

    <p>
        <button v-on:dblclick="fun5">双击事件</button>

    </p>

</div>

<script type="text/javascript">
    new Vue({
        el: "#box",
        data: {
        },
        methods:{
            fun1:function(){
                alert(1)
            },
            fun2:function(msg){
                alert(msg)
            },
            fun3:function(event){				// Vue中定义的方法默认会传递一个event事件
                alert(event)
                event.preventDefault();			// 阻止事件的默认行为(跳转页面)
            },
            fun4:function(msg,event){
                alert(msg);
                alert(event);
            },
            fun5:function(){
                alert("双击事件！")
            }
        }
    })
</script>

</body>

2.2.2 键盘事件

  • v-on:keydown：鼠标按下事件
  • v-on:keyup：鼠标抬起事件

示例代码：

<body>
    <div id="box">
        <input type="text" v-on:keydown="down"><br> <!-- 键盘按下事件 -->
        <input type="text" v-on:keyup="up"> <!-- 键盘抬起事件 -->
    </div>

    <script type="text/javascript">
        new Vue({
            el: "#box",
            data: {},
            methods: {
                down() { // 简写方式
                    console.log("键盘按下了")
                },
                up(){
                    console.log("键盘抬起了")
                }
            }
        })
    </script>

</body>

2.2.3 移动事件

  • v-on:mouseover：鼠标移入事件
  • v-on:mouseout：鼠标移出事件

示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>
        <div id="box" style="width: 300px;height: 200px;background-color: gray;" 
             v-on:mousemove="inter" v-on:mouseout="outer">
        </div>

        <script type="text/javascript">
            new Vue({
                el: "#box",
                data: {},
                methods: {
                    inter(){
                        console.log("鼠标移入了")
                    },
                    outer(){
                        console.log("鼠标移出了")
                    }
                }
            })
        </script>

    </body>

</html>

2.3 按键修饰符

2.3.1 默认的按键修饰符

当进行键盘事件的监听时，我们可以通过event事件中的keyCode或者key来判断按下的是哪一个键，从而进行针对性的处理；同时Vue也为一些常用的按键分配了按键修饰符（相当于别名），这样就可以更加方便的来监听指定的按键，Vue中常用的按键别名如下：

  • 回车 => enter
  • 删除 => delete（捕获“删除”和“退格”键）
  • 退出 => esc
  • 空格 => space
  • 换行 => tab（没有keyup事件，只有keydown事件）
  • 上 => up
  • 下 => down
  • 左 => left
  • 右 => right

示例代码：

<body>
    <div id="box">
        <p><input type="text" v-on:keyup="fun1"></p>

        <p><input type="text" v-on:keyup.enter="fun2">enter</p>

        <p><input type="text" v-on:keyup.delete="fun3">delete</p>

        <p><input type="text" v-on:keyup.esc="fun4">esc</p>

        <p><input type="text" v-on:keydown.tab="fun5">tab</p>

    </div>

    <script type="text/javascript">
        new Vue({
            el: "#box",
            data: {},
            methods: {
                fun1(event){
                    console.log(event.keyCode,"---",event.key)
                },
                fun2(){
                    console.log("您按下了回车！")
                },
                fun3(){
                    console.log("您按下了delete！")
                },
                fun4(){
                    console.log("您按下了esc！")
                },
                fun5(){
                    console.log("您按下了tab！")
                }
            }
        })
    </script>

</body>

2.3.2 自定义按键修饰符

针对于Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为短横线命名；

例如：CapsLock—>caps-lock

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>

    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>
<div id="box">
    <p><input type="text" v-on:keyup="fun1"></p>

    <p><input type="text" v-on:keyup.Control="fun2">ctrl</p>

    <!-- 注意需要【短横线命名】-->
    <p><input type="text" v-on:keyup.caps-lock="fun3">CapsLock</p>

    <p><input type="text" v-on:keyup.delete="fun4">delete</p>

</div>

<script type="text/javascript">
    new Vue({
        el: "#box",
        data: {},
        methods: {
            fun1(event) {
                console.log(event.keyCode, "---", event.key)
            },
            fun2() {
                console.log("您按下了ctrl!")
            },
            fun3() {
                console.log("您按下了CapsLock!")
            },
            fun4() {
                console.log("您按下了delete或backspace键!")
            }
        }
    })
</script>

</body>

</html>

2.3.3 自定义按键修饰符注意事项

Vue自定义的按键修饰符修饰系统修饰键（用法特殊）时：（ctrl、alt、shift、meta），其中ctrl键除外；

  • 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
  • 配合keydown使用：正常触发事件。

另外，例如某些键监听不了；因此我们一般都使用Vue自身提供的按键修饰符或者采用keyCode/key来判断用户按下的键；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>
        <div id="box">
            <p><input type="text" v-on:keyup="fun1"></p>

            <p><input type="text" v-on:keyup.Control="fun2">ctrl</p>		
            <p><input type="text" v-on:keyup.Alt="fun3">alt</p>				<!-- 监听keyup时需要按其他键才能触发事件 -->
            <p><input type="text" v-on:keyup.Shift="fun4">shift</p>		<!-- 监听keyup时需要按其他键才能触发事件 -->
            <p><input type="text" v-on:keyup.Meta="fun5">meta</p>			<!-- 监听keyup时需要按其他键才能触发事件 -->
            <p><input type="text" v-on:keydown.0="fun6">0</p>				<!-- 只能监听数字0 -->
        </div>

        <script type="text/javascript">
            new Vue({
                el: "#box",
                data: {},
                methods: {
                    fun1(event){
                        console.log(event.keyCode,"---",event.key)
                    },
                    fun2(){
                        console.log("您按下了ctrl!")
                    },
                    fun3(){
                        console.log("您按下了alt!")
                    },
                    fun4(){
                        console.log("您按下了shift!")
                    },
                    fun5(){
                        console.log("您按下了windows!")
                    },
                    fun6(){
                        console.log("您按下了数字0!")
                    }
                }
            })
        </script>

    </body>

</html>

2.3.4 自定义别名

Vue支持根据keyCode来扩展自定义的按键，扩展的自定义按键解决了系统按键需要搭配其他键才能触发的问题（也有部分按键可能会有问题）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>
        <div id="box">
            <p><input type="text" v-on:keyup="fun1"></p>

            <p><input type="text" v-on:keyup.huiche="fun2">回车</p>		
            <p><input type="text" v-on:keyup.kongge="fun3">空格</p>		
            <p><input type="text" v-on:keyup.windows="fun4">windows</p>		
        </div>

        <script type="text/javascript">
            
            Vue.config.keyCodes.huiche = 13 			
            Vue.config.keyCodes.kongge = 32 			
            Vue.config.keyCodes.windows = 91 			
            
            new Vue({
                el: "#box",
                data: {},
                methods: {
                    fun1(event){
                        console.log(event.keyCode,"---",event.key)
                    },
                    fun2(){
                        console.log("您按下了回车")
                    },
                    fun3(){
                        console.log("您按下了空格!")
                    },
                    fun4(){
                        console.log("您按下了windows!")
                    }
                }
            })
        </script>

    </body>

</html>

2.4 事件修饰符

Vue中提供了简化了很多JS中的事件修饰符，Vue中的事件修饰符如下：

事件 说明
prevent 阻止默认事件；
stop 阻止事件冒泡；
capture 使用事件的捕获模式；
once 事件只触发一次；
self 只有event.target是当前操作的元素时才触发事件；
passive 事件的默认行为立即执行，无需等待事件回调执行完毕；
left (2.2.0) 只当点击鼠标左键时触发。
right(2.2.0) 只当点击鼠标右键时触发。
middle(2.2.0) 只当点击鼠标中键时触发。

（1）阻止默认事件。

<body>
<div id="box">
    <!--a标签的默认事件被阻止了,所以不会进行链接跳转-->
    <h3>阻止默认事件</h3>

    <p><a href="http://www.baidu.com" v-on:click.prevent="fun1">百度一下</a></p>

</div>

<script type="text/javascript">
    new Vue({
        el: "#box",
        data: {},
        methods: {
            fun1() {
                alert("Hello Baidu")
            }
        }
    })
</script>

</body>

（2）阻止冒泡事件。

<body>
<div id="box">
    <!-- 先点击到blue,然后向上传递给上层的空间(red)-->
    <h3>未阻止冒泡事件</h3>

    <div v-on:click="fun1" style="width: 150px;height: 150px;background-color: red;">
        <div v-on:click="fun2" style="width: 100px;height: 100px;background-color: blue;"></div>

    </div>

    <!--只有blue被触发时间了,不会向上传递事件,red不会触发点击事件-->
    <h3>阻止冒泡事件</h3>

    <div v-on:click="fun1" style="width: 150px;height: 150px;background-color: red;">
        <div v-on:click.stop="fun2" style="width: 100px;height: 100px;background-color: blue;"></div>

    </div>

</div>

<script type="text/javascript">
    new Vue({
        el: "#box",
        data: {},
        methods: {
            fun1() {
                console.log("red")
            },
            fun2() {
                console.log("blue")
            }
        }
    })
</script>

</body>

（3）事件捕捉。

<body>
<div id="box">
    <!--先blue(先捕捉到)，再red-->
    <h3>未进行事件捕捉</h3>

    <div v-on:click="fun1" style="width: 150px;height: 150px;background-color: red;">
        <div v-on:click="fun2" style="width: 100px;height: 100px;background-color: blue;"></div>

    </div>


    <!--先bred(先捕捉到)，再blue-->
    <h3>进行了事件捕捉</h3>

    <div v-on:click.capture="fun1" style="width: 150px;height: 150px;background-color: red;">
        <div v-on:click="fun2" style="width: 100px;height: 100px;background-color: blue;"></div>

    </div>

</div>

<script type="text/javascript">
    new Vue({
        el: "#box",
        data: {},
        methods: {
            fun1() {
                console.log("red")
            },
            fun2() {
                console.log("blue")
            }
        }
    })
</script>

</body>

（4）self修饰符。

<body>
<div id="box">
    <!-- 默认情况下,点击了blue事件会进行冒泡传递给red,但是用户并非实际点击red,而是冒泡传递过去的 -->
    <h5>没有使用self修饰符</h5>

    <div v-on:click="fun1" style="width: 150px;height: 150px;background-color: red;">
        <div v-on:click="fun2" style="width: 100px;height: 100px;background-color: blue;"></div>

    </div>

    <h5>使用了self修饰符</h5>

    <!-- 只有真正的点击自己时才触发事件,不接收冒泡传递过来的事件 -->
    <div v-on:click.self="fun1" style="width: 150px;height: 150px;background-color: red;">
        <div v-on:click="fun2" style="width: 100px;height: 100px;background-color: blue;"></div>

    </div>

</div>

<script type="text/javascript">
    new Vue({
        el: "#box",
        data: {},
        methods: {
            fun1(event) {
                console.log(event.target)
            },
            fun2(event) {
                console.log(event.target)
            }
        }
    })
</script>

</body>

（6）左、右、中键点击事件。

<body>
<div id="box">
    <h3>单击事件</h3>

    <button v-on:click.left="fun1">单击左键</button>

    <button v-on:click.right="fun2">单击右键</button>

    <button v-on:click.middle="fun3">单击中键</button>

</div>

<script type="text/javascript">
    new Vue({
        el: "#box",
        data: {},
        methods: {
            fun1() {
                console.log("您点击了左键")
            },
            fun2(event) {
                console.log("您点击了右键")
                event.preventDefault()  //阻止默认事件(浏览器右键菜单)
            },
            fun3() {
                console.log("您点击了中键")
            }
        }
    })
</script>

</body>


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>

    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

    <style>

        li {
            height: 100px;
        }
    </style>

</head>

<body style="height: 1000px;">
<div id="box">
    <h3>阻止默认事件</h3>

    <p><a href="http://www.baidu.com" v-on:click.prevent="fun1">百度一下</a></p>

    <h3>阻止事件冒泡</h3>

    <div v-on:click="fun2" style="width: 150px;height: 150px;background-color: red;">
        <div v-on:click.stop="fun3" style="width: 100px;height: 100px;background-color: blue;"></div>

    </div>

    <h3>只触发一次事件</h3>

    <p>
        <button v-on:click.once="fun4">我是按钮</button>

    </p>

    <h5>事件捕获</h5>

    <!-- 
        默认情况下,先进行事件冒泡,再进行事件捕获
            capture: 先进行事件捕获,在进行事件冒泡
     -->
    <div v-on:click.capture="fun5('red')" style="width: 150px;height: 150px;background-color: red;">
        <div v-on:click="fun6('blue')" style="width: 100px;height: 100px;background-color: blue;"></div>

    </div>

    <h5>self修饰符</h5>

    <!-- 只有真正的点击自己时才触发事件(冒泡不能触发事件) -->
    <div v-on:click.self="fun7" style="width: 150px;height: 150px;background-color: red;">
        <div v-on:click="fun8" style="width: 100px;height: 100px;background-color: blue;"></div>

    </div>

    <h5>passvie</h5>

    <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
    <ul v-on:wheel.passvie="fun9" style="width: 200px;height: 200px;background-color: red;overflow: scroll;">
        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

    </ul>

    <h5>.left</h5>

    <button v-on:click.left="fun10">left</button>

</div>

<script type="text/javascript">
    new Vue({
        el: "#box",
        data: {},
        methods: {
            fun1() {
                alert("Hello Baidu")
            },
            fun2() {
                alert("点击了大的div")
            },
            fun3() {
                alert("点击了小的div")
            },
            fun4() {
                console.log("按钮点击了")
            },
            fun5(color) {
                console.log(color)
            },
            fun6(color) {
                console.log(color)
            },
            fun7(event) {
                console.log(event.target)
            },
            fun8(event) {
                console.log(event.target)
            },
            fun9() {
                for (let i = 0; i < 100000; i++) {
                    console.log('aaa')
                }
            },
            fun10() {
                console.log("left")
            }
        }
    })
</script>

</body>

</html>

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布