vue2 基础知识点(由尚硅谷视频总结)

本文详细介绍了Vue.js中的数据绑定方式,包括`el`的两种指定方法和`data`的两种写法。重点讲解了Vue的事件修饰符,如`prevent`、`stop`等,并阐述了计算属性和观察者(watch)的使用,特别是深度监视的场景。此外,还探讨了Vue中绑定样式的方法以及`key`在虚拟DOM中的重要性,强调了合理选择`key`以优化性能的重要性。
摘要由CSDN通过智能技术生成

视频网址https://www.bilibili.com/video/BV1Zy4y1K7SH?p=53&spm_id_from=pageDriver

el 两种指定方法

        el:'#root',

        v.$mount('#root') 

data两种写法

        data:{

                a:'1'

        }

        最好使用第二种(模板中第一种不能用)

        data(){

                return{

                        a:'1'

                }

        }

        vue中的数据都是和dom元素进行绑定的,更新数据dom做出相应的改变,数组要特殊注意,使用push()、pop()、shift()、unshift()、splice()、sort()、reverse()这些函数修改页面再能做出同步修改!!!

Vue中的事件修饰符:

                        1.prevent:阻止默认事件(常用);

                        2.stop:阻止事件冒泡(常用);

                        3.once:事件只触发一次(常用);

                        4.capture:使用事件的捕获模式;

                        5.self:只有event.target是当前操作的元素时才触发事件;

                        6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕;

计算属性:

computed:{

                //完整写法

                fullName:{

                    get(){

                        return this.firstName + '-' + this.lastName

                    },

                    set(value){

                        const arr = value.split('-')

                        this.firstName = arr[0]

                        this.lastName = arr[1]

                    }

                } 

                //简写  只用get方法

                fullName(){

                    return this.firstName + '-' + this.lastName

                }

            }

监视属性watch:

                    1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作

                    2.监视的属性必须存在,才能进行监视!!

                    3.监视的两种写法:

                            (1).new Vue时传入watch配置

                                        

                                watch:{

                                        isHot:{

                                            immediate:true, //初始化时让handler调用一下

                                            //handler什么时候调用?当isHot发生改变时。

                                            handler(newValue,oldValue){

                                            console.log('isHot被修改了',newValue,oldValue)

                                            }

                                }

                            (2).通过vm.$watch监视

                                

                               vm.$watch('isHot',{

                                       immediate:true, //初始化时让handler调用一下

                                       //handler什么时候调用?当isHot发生改变时。

                                       handler(newValue,oldValue){

                                       console.log('isHot被修改了',newValue,oldValue)

                                    }

                                })

深度监视:

                        (1).Vue中的watch默认不监测对象内部值的改变(一层)。

                        (2).配置deep:true可以监测对象内部值改变(多层)。

                备注:

                        (1).Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以!

                        (2).使用watch时根据数据的具体结构,决定是否采用深度监视。

绑定样式:

                    1. class样式

                                写法:class="xxx" xxx可以是字符串、对象、数组。

                                        字符串写法适用于:类名不确定,要动态获取。

                                        对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。

                                        数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。

                    2. style样式

                                :style="{fontSize: xxx}"其中xxx是动态值。

                                :style="[a,b]"其中a、b是样式对象。

面试题:react、vue中的key有什么作用?(key的内部原理)

                        

                        1. 虚拟DOM中key的作用:

                                        key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据【新数据】生成【新的虚拟DOM】, 

                                        随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较,比较规则如下:

                                        

                        2.对比规则:

                                    (1).旧虚拟DOM中找到了与新虚拟DOM相同的key:

                                                ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM!

                                                ②.若虚拟DOM中内容变了, 则生成新的真实DOM,随后替换掉页面中之前的真实DOM。

                                    (2).旧虚拟DOM中未找到与新虚拟DOM相同的key

                                                创建新的真实DOM,随后渲染到到页面。

                                                

                        3. 用index作为key可能会引发的问题:

                                            1. 若对数据进行:逆序添加、逆序删除等破坏顺序操作:

                                                            会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

                                            2. 如果结构中还包含输入类的DOM:

                                                            会产生错误DOM更新 ==> 界面有问题。

                        4. 开发中如何选择key?:

                                            1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。

                                            2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,

                                                使用index作为key是没有问题的。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值