文章目录

一、Vue如何处理事件？

1.1 v-on指令用法

v-on指令用法：

<button v-on:click='num++'>点击</button>

v-on简写形式:

<button @click='num++'>点击1</button>

二、 事件函数的调用方式

2.1 直接绑定函数名称

<button @click='handle'>点击1</button>

2.2 调用函数

<button @click="handle()">点击2</button>

//1、直接绑定函数名称：
<button @click='handle'>点击1</button>
//2、调用函数
<button @click="handle()">点击2</button>
<script>
    let vm=new Vue({
        el:"#app",
        data:{
            num:0,
        },
        methods: {
            handle:function(){
                if(this === vm);
                this.num++;
            }
        }
    });
</script>

三、 事件修饰符

3.1 .stop 阻止冒泡

3.2 .prevent 阻止默认行为

<div v-on:click='handle0'>
    <button v-on:click.stop='handle1'>点击1</button>
</div>
<a href="https://www.baidu.com" @click.prevent='handle2'>百度</a>
<script>
    let vm = new Vue({
        el:"#app",
        data:{
            num:0
        },
        methods: {
            handle0:function(){
                this.num++
            },
            handle1:function(){
                // 原生JS阻止冒泡
                // event.stopPropagation();
            },
            handle2:function(){
                // 原生JS阻止默认行为
                // event.preventDefault();
            }
        },
    })
</script>

效果：
在这里插入图片描述

四、按键事件修饰符

官方文档：Vue.js 事件修饰符

4.1 .enter 回车键

<input v-on:keyup.enter='submit'>

4.2 .delete 删除键

<input v-on:keyup.delete='handle'>

实例：

<div id="app">
    <form action="">
        <div>
            用户名:
            <input type="text" v-on:keyup.delete='clearContent' v-model='uname'>
        </div>
        <div>
            密码:
            <input type="text" @keyup.enter='handleSubmit' v-model='pwd'>
        </div>
        <div>
            <input type="button" @click='handleSubmit' value="提交">
        </div>
    </form>
</div>
<script>
    let vm = new Vue({
        el:"#app",
        data:{
            uname:'',
            pwd:'',
            age:0
        },
        methods: {
            clearContent:function(){
                // 按delete键的时候，清空用户名
                this.uname = '';
            },
            handleSubmit:function(){
                console.log(this.uname,this.pwd);
            }
        },
    })
</script>

解读：
当在第一个文本框当中输入内容过后，按删除键，就会直接清空输入框
当在第二个文本框当中按下回车键，就会直接执行handleSubmit方法
效果：
在这里插入图片描述

4.3 自定义按键修饰符

全局 config.keyCodes 对象
Vue.config.keyCodes.f1 = 112

<div id="app">
    <input type="text" v-on:keyup='handle' v-model='info'>
    <input type="text" v-on:keyup.65='handle' v-model='info'>
    <!-- <input type="text" v-on:keyup.a='handle' v-model='info'> -->
</div>
<script>
    /*
        事件绑定:自定义按键修饰符
        规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值
    */
    Vue.config.keyCodes.a=65;
    let vm = new Vue({
        el:"#app",
        data:{
            info:''
        },
        methods:{
            handle:function(event){
                console.log(event.keyCode);
            }
        }
    });
</script>

效果：
在这里插入图片描述
解读：
input框只会监听a键

五、属性绑定

5.1 v-bind指令用法

<a v-bind:href="url">百度</a>
缩写形式：
<a :href="url">百度1</a>

<body>
    <div id="app">
        <a v-bind:href="url">百度</a>
        <a :href="url">百度1</a>
        <button v-on:click='handle'>切换</button>
    </div>
    <script src="vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                url :'https://www.baidu.com',
            },
            methods:{
                handle:function(){
                    this.url = 'http://www.lzy.edu.cn';
                }
            }
        });
    </script>
</body>

六、v-model的低层实现原理分析

6.1 MVVM设计思想

在这里插入图片描述

6.2 v-model的低层实现原理分析

注：v-model可以实现数据的双向绑定

这里我们手写一个双向数据绑定的例子。
注：input 是一个DOM事件，当input框输入内容时触发。

<body>
    <div id="app">
        <div>{{msg}}</div>
        <input type="text" v-bind:value='msg' v-on:input='handle'>
        <!-- <input type="text" v-bind:value='msg' v-on:input='msg=$event.target.value'> -->
        <!-- <input type="text" v-model='msg'> -->
    </div>

    <script src="vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                msg:"hello",
            },
            methods:{
                handle:function(event){
                    //使用输入域中的最新数据覆盖原来的数据
                    this.msg=event.target.value;
                }
            }
        });
    </script>
</body>
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue