Vue学习总结（二）-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45358200/article/details/133694175

本文详细介绍了JavaScript中Object.defineProperty的使用，数据代理的概念及其在Vue中的应用，包括事件处理（如绑定、修饰符和键盘事件）、计算属性的定义与简写，以及v-model的交互。

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

一、数据代理

1.回顾Object.defineProperty方法

<body>
    <script type="text/javascript">
        let number = 28
        let person = {
            name:'张三',
            sex:'男'
        }

        Object.defineProperty(person,'age',{
            // value:18,
            // enumerable:true, //控制属性是否可以枚举，默认值是false
            // writable:true,  //控制属性是否可以被修改，默认值是false
            // configurable:true //控制属性是否可以被删除，默认值是false

            //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
            get:function(){
                console.log('有人读取age的值了');
                return number
            },

            //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
            set(value){
                console.log('有人修改了age属性，且值是',value);
                number = value
            }
        })
            
       
        console.log(person);
    </script>
</body>

2.何为数据代理

数据代理：通过一个对象对另一个对象中属性的操作（读/写）

<body>
    <!-- 数据代理：通过一个对象对另一个对象中属性的操作（读/写） -->
    <script type="text/javascript">
        let obj = {x:100}
        let obj2 = {y:200}

        Object.defineProperty(obj2,'x',{
            get(){
                return obj.x
            },
            set(value){
                obj.x = value
            }
        })
    </script>
</body>

3.Vue中的数据代理

1.Vue中的数据代理

通过vm对象来代理data对象中属性的操作(读/写)。

2.Vue中数据代理的好处:

更加方便的操做data中的数据

3.基本原理:

通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性,都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性。
在这里插入图片描述

二、事件处理

1.事件的基本使用

1.使用v-on:xxx 或 @xxx 绑定事作,其中xxx是事件名。
2.事件的回调需要配置在methods对象中。最终会在vm上.
3.methods中配置的函数。不要用箭头函致!否则this就不是vm了。
4.methods中配置的函数。都是被Vue所管理的的函数。this的指向是vm 或组件实例对象5.@click=“demo” 和 @click=“demo($event)” 效果一致。但后者可以传参。

<body>
    <!-- 准备一个容器 -->
    <div id="root">
      <h2>欢迎{{name}}</h2>
      <!-- <button v-on:click="showInfo">点我提示信息</button> -->
      <button @click="showInfo1">点我提示信息（不传参）</button>
      <button @click="showInfo2(66,$event)">点我提示信息（传参）</button>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示

        //创建Vue实例   
        const vm = new Vue({
            el:'#root',  
            data:{ 
                name:'xiaoxiao'
            },
            methods:{
                showInfo1(){
                    alert('同学你好')
                },
                showInfo2(number){
                    console.log(number,event);
                    alert('同学你好hahaha')
                }
            }
        })
    </script>
</body>

2. 事件修饰符

Vue中的事件修饰符

1.prevent:阻止默认事作（常用)。
2.stop:阻止事件冒泡（常用)。
3.once:事件只触发一次（常用)。
4.capture:使用事件的捕获模式。
5.self:只有event.target是当前操作的元素时才触发事件。
6.passive：事件的默认行为立即执行。无需等待事件回调执行完毕。

<body>
    <!--
        Vue中的事件修饰符
            1.prevent:阻止默认事作（常用)。
            2.stop:阻止事件冒泡（常用)。
            3.once:事件只触发一次（常用)。
            4.capture:使用事件的捕获模式。
            5.self:只有event.target是当前操作的元素时才触发事件。
            6.passive：事件的默认行为立即执行。无需等待事件回调执行完毕。
    -->
    <!-- 准备一个容器 -->
    <div id="root">
      <h2>欢迎{{name}}</h2>
      <!-- prevent:阻止默认事作（常用） -->
      <a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>

      <!-- stop:阻止事件冒泡（常用)。 -->
      <div class="demo1" @click="showInfo">
        <button @click.stop="showInfo">点我提示信息</button>
      </div>

      <!-- once:事件只触发一次（常用)。 -->
      <button @click.once="showInfo">点我提示信息</button>

      <!-- 使用事件的捕获模式 -->
      <div class="box1" @click.capture="showMsg(1)">
        div1
        <div class="box2" @click="showMsg(2)">
            div2
        </div>
      </div>

      <!-- 只有event.target是当前操作的元素时才触发事件 -->
      <div class="demo1" @click.self="showInfo">
        <button @click="showInfo">点我提示信息</button>
      </div>

      <!-- 事件的默认行为立即执行。无需等待事件回调执行完毕 -->
      <!-- <ul @scroll="demo" class="list"> -->
      <ul @wheel.passive="demo" class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示

        //创建Vue实例   
        const vm = new Vue({
            el:'#root',  
            data:{ 
                name:'xiaoxiao'
            },
            methods:{
                showInfo(e){
                    //e.preventDefault()
                    alert('同学你好')
                },
                showMsg(){
                    console.log(msg);
                },
                demo(){
                    for(let i = 0;i < 100000; i++){
                        console.log('#');
                    }
                    console.log('真累');
                }
            }
        })
    </script>
</body>

3. 键盘事件

1.Vue中常用的按健别名:
回车 => enter
删除 => delete(捕获“删除"和“退格”键)
退出 => esc
空格 => space
换行 => tab（特殊，必须配合keydown使用）
上 => up
下 => down
左 => left
右 => right
2.Vue未t提供别名的按键。可以使用按健原始的key值去绑定，但注意要转为kebab-case(短横线命名)
3.系统修饰健（用法特殊):ctrl、alt、 shift、 meta
(1)配合keyup使用:按下修饰键的同时,再按下其他键。随后释放其他键。事件才被触发。
(2).配合keydown使用:正常触发事件。
4.也可以使用keycode去指定具体的按键(不推荐)。
5.Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名

<body>
    <!-- 准备一个容器 -->
    <div id="root">
      <h2>欢迎来到{{name}}</h2>
      <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示

        //创建Vue实例   
        const vm = new Vue({
            el:'#root',  
            data:{ 
                name:'北京'
            },
            methods:{
                showInfo(e){
                    //if(e.keyCode !== 13) return
                    console.log(e.target.value);
                }
            }
        })
    </script>
</body>

三、计算属性

1. 姓名案例_插值语法实现

<body>
    <!-- 准备一个容器 -->
    <div id="root">
        姓：<input type="text" v-model="firstName"><br><br>
        名：<input type="text" v-model="lastNmae"><br><br>
        姓名：<span>{{firstName}}-{{lastNmae}}</span>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示

        //创建Vue实例   
        const vm = new Vue({
            el:'#root',  
            data:{ 
                firstName:'张',
                lastNmae:'三'
            }
        })
    </script>
</body>

2. 姓名案例_methods实现

<body>
    <!-- 准备一个容器 -->
    <div id="root">
        姓：<input type="text" v-model="firstName"><br><br>
        名：<input type="text" v-model="lastName"><br><br>
        姓名：<span>{{fullName()}}</span>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示

        //创建Vue实例   
        const vm = new Vue({
            el:'#root',  
            data:{ 
                firstName:'张',
                lastName:'三'
            },
            methods:{
                fullName(){
                    return this.firstName + '-' + this.lastName
                }
            }
        })
    </script>
</body>

3. 姓名案例_计算属性实现

1.定义：要用的属性不存在，要通过已有属性计算得来。
2.原理：底层借助了0bjcet.defineproperty方法提供的getter和setter。
3.get函数什么时侯执行?
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4,优势：与methods实现相比，内部有缓存机制(复用），效率更高,调试方便。
5.备注：
1.计算属性最终会出现在vm上。直找读取使用即可。
2.如果计算属性要被修改,那必须写set函数去响应修改，且set中要引起计算时依载的数据发生。

<body>
    <!-- 准备一个容器 -->
    <div id="root">
        姓：<input type="text" v-model="firstName"><br><br>
        名：<input type="text" v-model="lastName"><br><br>
        姓名：<span>{{fullName}}</span>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示

        //创建Vue实例   
        const vm = new Vue({
            el:'#root',  
            data:{ 
                firstName:'张',
                lastName:'三'
            },
            computed:{
                fullName:{
                    //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
                    //get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时
                    get(){
                        return this.firstName + '-' + this.lastName
                    },
                    //set什么时候调用？当fullName被修改时
                    set(value){
                        console.log('set',value);
                        const arr = value.split('-')
                        this.firstName = arr[0]
                        this.lastName = arr[1]
                    }
                }
            }
        })
    </script>
</body>

4. 姓名案例_计算属性简写

<body>
    <!-- 准备一个容器 -->
    <div id="root">
        姓：<input type="text" v-model="firstName"><br><br>
        名：<input type="text" v-model="lastName"><br><br>
        姓名：<span>{{fullName}}</span>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示

        //创建Vue实例   
        const vm = new Vue({
            el:'#root',  
            data:{ 
                firstName:'张',
                lastName:'三'
            },
            computed:{
                // 完整写法
                // fullName:{
                //    get(){
                //         return this.firstName + '-' + this.lastName
                //     },
                //     set(value){
                //         console.log('set',value);
                //         const arr = value.split('-')
                //         this.firstName = arr[0]
                //         this.lastName = arr[1]
                //     }
                // }

                //简写
                 fullName(){
                    return this.firstName + '-' + this.lastName
                 }
            }
        })
    </script>
</body>