vue之v-on

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

我们可以用 v-on 指令绑定一个事件监听器，通过它调用我们 Vue 实例中定义的方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="demo">
        <button @click="counter += 1">{{counter}}</button>
        <button v-on:click="cl">{{message}}</button>
        <button @click="say('hi')">内联语句</button>
    </div>
    <script>
        var demo = new Vue({
            el:'#demo',
            data:{
                message: "hello",
                counter:0,
　　　　　　　　　　test:''
            },
            methods:{
                cl(){
                    this.message = this.message + ' vue!';
                },

　　　　　　　　　　say(message){

          　　　　　　　this.test = message;

          　　　　　　　alert(this.test);

        　　　　　},

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

事件修饰符

  • stop 阻止冒泡

  • prevent 阻止默认事件

  • capture 使用事件捕获模式

  • self 只在当前元素本身触发

  • once 只触发一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="demo">
        <button v-on:click="cl">{{message1}}</button>
        <button v-on:click.once="c2">{{message2}}</button>
        <a href="http://cnblogs.com" target="_blank">普通链接</a>
          <a @click.prevent href="http://cnblogs.com" target="_blank">取消默认行为</a>
    </div>
    <script>
        var demo = new Vue({
            el:'#demo',
            data:{
                message1: "hello",
                message2: "hello",
                counter:0,
            },
            methods:{
                cl(){
                    this.message1 = this.message1 + ' vue!';
                },
                c2(){
                    this.message2 = this.message2 + ' vue!';
                },
            }
        })
    </script>    
</body>
</html>

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

鼠标修饰符

  • left 左键

  • right 右键

  • middle 滚轮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="demo">
        <button @mouseup.right="right" @mouseup.middle="middle" @mouseup.left="left">{{message}}
    </div>
    <script>
        var demo = new Vue({
            el:'#demo',
            data:{
                message: "hello",
               text:'点我'
            },
            methods:{
                left(){
                  this.message = 'left'
                },
                right(){
                  this.message = 'right'
                },
                middle(){
                  this.message = 'middle'
                }, 
            }
        })
    </script>    
</body>
</html>

分别点击鼠标左键，右键和滚轮时，会触发不同的事件：

键值修饰符

在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加关键修饰符。

  • .enter

  • .tab

  • .delete (捕获 “删除” 和 “退格” 键)

  • .esc

  • .space

  • .up

  • .down

  • .left

  • .right

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="demo">
        <button v-on:keyup.enter="enter">{{message}}<br>
        <button @keyup.tab="tab">{{message}}<br>
        <button @keyup="show($event)">{{message}}<br>
    </div>
    <script>
        var demo = new Vue({
            el:'#demo',
            data:{
                message: "hello",
            },
            methods:{
                enter(){
                    this.message = 'enter'
                },
                tab(){
                    this.message = 'tab'
                },
                show(e){
                    this.message = e.keyCode
                }
            }
        })
    </script>    
</body>
</html>

表单事件

在进行表单提交时，页面会刷新，导致我们绑定的表单提交事件执行出问题，会避免刷新，我们需要使用阻止修饰符。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="demo">
        <form v-on:submit.prevent="onSubmit">
            <input type="text"><br />
            <input type="submit" value="提交">
        </form>
    </div>
    <script>
        var demo = new Vue({
            el:'#demo',
            data:{
                message: "hello",
            },
            methods:{
                onSubmit(){
                    alert('提交')
                },
            }
        })
    </script>    
</body>
</html>

以上是 vue之v-on 的全部内容， 来源链接： utcz.com/z/375590.html

回到顶部