vue中的事件修饰符、表单双向数据绑定和计算属性

最新推荐文章于 2025-02-25 14:38:19 发布

原创最新推荐文章于 2025-02-25 14:38:19 发布

· 722 阅读

11 ·

版权

文章标签：

#vue.js #前端 #javascript #前端框架

本文详细介绍了Vue.js中的事件修饰符如stop、prevent和capture等的使用，表单双向数据绑定（v-model）及其修饰符，以及计算属性的缓存机制和与methods的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、事件修饰符

stop 阻止事件冒泡
prevent 阻止事件默认行为
capture 事件捕获阶段执行
self 仅当当前元素是event.target触发
once 执行一次事件
passive 与scroll滚动事件连用

<div id="app">
        <!-- capture 事件捕获阶段执行 -->
        <div class="outer" @click.capture="outer">
        <!-- stop事件修饰符阻止事件冒泡 -->
        <div class="inner" @click.stop="inner"></div>
        </div>

        <!-- self 事件修饰符 仅当前元素是event.target(当前事件触发元素)时才触发 事件修饰符可以连用 -->
        <div class="outer" @click.capture.self="outer">
            <div class="inner" @click.capture="inner"></div>
        </div>

        <!-- once 事件修饰符 事件只绑定(生效)一次 -->
        <div class="outer" @click.capture="outer">
            <div class="inner" @click.capture.once="inner"></div>
        </div>

        <!-- prevent事件修饰符 阻止元素默认行为 -->
        <a href="https://wwww.baidu.com" @click.prevent="toJump">百度一下</a>

        <!-- passive 事件修饰符 提升移动端滚动性能 -->
        <div class="scroll" @scroll.passive="scroll">
            我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div
            我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div
            我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div
        </div>

        <!-- 按键修饰符 按下按键之后才会触发 -->
        <input type="text" @keyup.13="keyup">
        <input type="text" @keyup.enter="keyup">
    </div>
    <script>
        let vm = new Vue({
            // 与模板绑定
            el: "#app",
            // 数据模型 存放vue变量
            data: {

            },
            // 存放方法和事件处理程序
            methods: {
                keyup(){
                    console.log(event.keyCode);
                },
                scroll(){
                    console.log('正在滚动');
                },
                toJump() {
                    // 阻止a标签默认行为
                    // event.preventDefault();
                },
                outer() {
                    console.log('outer');
                },
                inner() {
                    console.log('inner');
                    // 阻止事件冒泡
                    // event.stopPropagation();
                }
            },
        });

    </script>

二、表单双向数据绑定

v-model 监听用户输入事件以更新数据创建双向数据绑定
v-model修饰符：
lazy 输入事件input事件 change事件失焦或者按下回车
number 将输入框双向绑定得数据设置为number类型
trim 过滤绑定数据前后空格

<div id="app">
        <!-- v-model语法糖 可以根据表单控件类型正确更新元素  监听用户输入事件更新数据 -->
        {{form}}
        用户名:<input type="text" v-model="form.username">
        <br>
        密码:<input type="password" v-model="form.password">
        <br>
        <label>男:<input type="radio" v-model="form.gender" value="male"></label>
        <label>女:<input type="radio" v-model="form.gender" value="famale"></label>
        <br>
        爱好:
        游泳:<input type="checkbox" v-model="form.hobbies" value="swimming">
        篮球:<input type="checkbox" v-model="form.hobbies" value="basketball">
        足球:<input type="checkbox" v-model="form.hobbies" value="football">
        <br>
        描述:<textarea v-model="form.desc" cols="30" rows="10"></textarea>
        <br>
        城市:
        <select v-model="form.city">
            <optgroup label="一线城市">
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="guangzhou">广州</option>
            </optgroup>
        </select>
    </div>
    <script>
        let vm = new Vue({
            // 与模板绑定
            el:"#app",
            // 数据模型 存放vue变量
            data:{
                form:{
                    hobbies:[]
                },
            },
            // 存放方法和事件处理程序
            methods: {

            },
        });
        
    </script>

模拟双向数据绑定（双向数据绑定底层原理）

利用Object.defineProperty()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 实现v-model -->
    <p>极简版双向数据绑定</p>
    <input type="text">
    <script>
        var p = document.querySelector('p');
        var input = document.querySelector('input');
        let obj = {
            name:""
        }
        Object.defineProperty(obj,'name',{
            get(){
                return obj.name
            },
            set(newValue){
                p.innerHTML = newValue
            }
        })
        // 监听用户输入框输入的事件
        input.oninput = function(){
            obj.name = event.target.value;
        }
    </script>
</body>
</html>

浏览器运行结果如下：

三、计算属性

对data中数据进行逻辑处理返回一个响应式数据,基于响应式依赖(data),只要响应式依赖不发生改变，计算属性就不会重新计算，多次调用计算属性会返回之前计算得结果。有缓存性，计算属性默认只提供getter，只允许读取，不允许修改，想要修改计算属性，需要提供setter函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{msg.split('').reverse().join('')}}
        {{reverseMsg}}
        {{reverseMsg}}
        {{reverseMsg}}
        {{reverseMsg}}
        {{reverse()}}
        {{reverse()}}
        {{reverse()}}
        {{reverse()}}
    </div>
    <script>
        let vm = new Vue({
            // 与模板绑定
            el:"#app",
            // 数据模型 存放vue变量
            data:{
                msg:'hello'
            },
            // 存放方法和事件处理程序
            methods: {
                reverse(){
                    console.log('methods方法');
                    return this.msg.split('').reverse().join('')
                }
            },
            // 计算属性--一般对data中数据处理后再返回一个数据 基于响应式依赖缓存  返回一个响应式依赖
            computed:{
                reverseMsg(){
                    console.log('计算属性');
                    return this.msg.split('').reverse().join('')
                }
            }
        });
        setTimeout(()=>{
            vm.msg = 'world'
        },2000)
    </script>
</body>
</html>

浏览器运行结果如下：