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

发布时间：2023年12月19日

一、事件修饰符

? 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>

浏览器运行结果如下：

2s后：

计算属性和methods方法区别？

? 1.计算属性有缓存性，响应式依赖不发生改变，多次调用计算属性会返回之前得计算结果。
? 2.methods多次调用会多次执行函数，没有缓存性。
? 3.计算属性一般不用于异步操作，methods可以处理异步操作。
? 4.可以定于计算属性被修改，不仅可读。

计算属性和watch区别？

? 1.计算属性具有缓存性，响应式依赖不发生改变计算属性不会重新计算，会返回之前得计算结果
? 2.watch不具有缓存性，只要数据发生改变watch就会立即执行
? 3.watch一般用于异步操作(监听分页)或者开销较大操作
? 4.计算属性一般不用于异步操作，只提供getter需要修改需要设置setter函数

文章来源:https://blog.csdn.net/l12345666777/article/details/135095256
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！