class04:Vue3的底层
创始人
2024-06-02 10:05:49
0

目录

  • 一、Vue3的底层
    • 1. Vue3实例的返回对象
    • 2. 扩展
  • 二、指令
    • 1. v-show和v-if 隐藏/显示
      • a. v-show
      • b. v-if
      • c. template
    • 2. v-bind绑定属性
      • a. 动态绑定class
      • b. 动态绑定style
      • c. 总结

一、Vue3的底层

Vue3底层使用TypeScript,使用proxy 数据代理。

1. Vue3实例的返回对象

let data = {name:"Evan You",age:"36",sex:"男"
}let vm = new Proxy(data, {get(target, handler){console.log(arguments);},set(){}
})

let vm = new Proxy(data, {get(target, handler){console.log(target, handler)return target[handler]},set(){}
})

2. 扩展

扩展1:属性删除

let data = {name:"Evan You",age:"36",sex:"男"
}let vm = new Proxy(data, {get(target, handler){console.log(arguments);console.log(target, handler);return target[handler];},set(target, handler, value){target[handler] = value;},// 属性删除deleteProperty(target, handler){return delete target[handler]}
})

扩展2:反射(封装方法,统一返回)

let _data = new Proxy(data, {get(target, handler) {return Reflect.get(target,handler)},set(target, handler, value) {Reflect.set(target,handler, value)},// 属性删除deleteProperty(target, handler) {return Reflect.deleteProperty(target,handler)}
})

二、指令

指令作用:标签的属性 => 用于给标签指定功能。如:v-bind 单向绑定数据、v-model 双向绑定数据(表单)、v-html 重写节点内容。

1. v-show和v-if 隐藏/显示

文档说明:条件渲染 — Vue.js (vuejs.org)

a. v-show


v-show => 隐藏/显示 => 简单的切换 display ,不删除元素。(display = block/none)

写法:v-show = “表达式”; 表达式的返回值最好是布尔值

:页面用v-show = "bol"显示”个人信息”,当bol为true则显示,当bol为false则隐藏。

个人信息

使用vue调试工具查看效果:

b. v-if


v-if => 隐藏/显示 => 开始 为 false 直接不渲染 => true 渲染;使用中 false 直接干掉 => true 重新创建插入进去

写法:v-if = “表达式”;

使用v-if

v-if显示/隐藏的原理:

开始:为 false 直接不渲染 ,变为 true则 渲染;

使用中:false 直接删掉节点 ,变为 true 重新创建插入进去。

v-else-if=“表达式”;v-else =“表达式”; 配合v-if使用。

00000 v-if
// 表达式num已固定,除非num的bol值改变,否则不会执行后面程序
11111 v-else-if
22222 v-else-if
33333 v-else

**注意:**v-if、v-else-if、v-else 三者一起使用时,中间不能被插入其他内容。

c. template


template标签本身不会被渲染到页面中,只有它里面的内容会渲染,相当于占据了书写位置,不占据实际的dom位置。

便于一次性处理多个内容。


总结:

v-show:简单的切换 display显示隐藏,可以获取到元素节点 ,用于切换频率高的场景,Vue3 template 不支持使用v-show ;

v-if:创建和销毁进行隐藏显示,和v-else-if 、v-else一起使用时结构不能打断,不能获取元素节点,用于切换频率低场景;

v-else:特点: 不展示的dom直接销毁;

2. v-bind绑定属性

文档说明:Class 与 Style 绑定 — Vue.js (vuejs.org)

v-bind:动态绑定。在将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象数组

a. 动态绑定class


Hello Vue
HUAWEI
XIAOMI
OPPO
xiaomi,oppo,vivo
xiaomi,oppo,vivo,MEIZU
xiaomi,oppo,vivo,MEIZU

样式表:


效果展示

动态数组写法效果演示

b. 动态绑定style


原生写法
动态绑定style
动态绑定多个style
对象写法
数组写法

注意:data()中的属性名和div中绑定style样式的属性名都不能用-作为命名方式,推荐使用小驼峰命名法。style后面的属性名可以自定义,但是最好见名知义,vue会根据属性值判断style样式的渲染。如 :style=“{fontSize:fontSize + ‘px’}”,vue会自动判断为字体大小;但是如果有多种颜色则只渲染命名规范的样式,如 :style=“{color:fontColor, backgroundColor:bg}”,当属性名color、backgroundColor为自定义的任意字符abcd等,则都不渲染,若颜色只有一种样式且属性名为任意字符,则默认渲染为字体颜色

c. 总结


:class 写法
:class=“xxx” xxx可以是字符串、数组、对象;
字符串写法适用于类名不确定,需要动态指定;
数组写法适用于类名个数不确定,样式不确定,样式名不确定;
对象写法适用于绑定的样式确定,名字也确定,但要动态决定是否使用。

:style 写法
:style=“{color:xxx}” xxx是一个动态值;
:style=“[a,b]” 绑定多个, a b是样式。

相关内容

热门资讯

新还珠格格,欣荣和永琪有个孩子... 新还珠格格,欣荣和永琪有个孩子?不是说永琪从来都没碰过她吗?绵忆到底是他和小燕子的还是欣荣的啊求正解...
中级会计怎么备考?今年几月考试... 中级会计怎么备考?今年几月考试?您好,很高兴为您解答中级会计师考试,教材是根本和基础,所有的题目都是...
继兴业、招商、中信后,邮储银行... (来源:现代商业银行杂志)金融资产投资公司(AIC)队伍再添新员。邮储银行近日发布公告称,该行拟以自...
中央巡视组对陕西开展两个半月常... 转自:北京日报客户端日前,中央第十五巡视组进驻陕西省,将开展为期两个半月左右的常规巡视,并会同陕西省...
柳州幻境空间在哪里 柳州幻境空间在哪里柳州幻境空间是位于广西柳州市城中区华联商闷郑城4楼的室内主题乐园,提供了各种游戏和...
中央巡视组进驻山东 联动巡视济... 转自:央视新闻客户端经党中央批准,二十届中央第六轮巡视将对16个省(自治区、直辖市)开展常规巡视,并...
继续发布暴雨蓝色预警!北京等地... 转自:央视新闻客户端中央气象台19日早6时继续发布暴雨蓝色预警。预计,19日早8时至20日早8时,青...
降妖伏魔篇演员有哪些 降妖伏魔篇演员有哪些文章舒淇程小东黄勃
晚上十一点在河边抓鱼听到有人叫... 晚上十一点在河边抓鱼听到有人叫我小名声音跟我一个朋友一样,电筒照却没有发现有人而且我女朋友也听见了不...
属猴的为什么吸引属狗的人 属猴的为什么吸引属狗的人属相狗虽不善甜言蜜语,为人多有情感之被捉,然其铅轮内心却多有向往甜蜜幸福之生...