目录
一、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则隐藏。
<div id="root">
<p v-show = "bol">个人信息</p>
</div>
<script>
let vm = new Vue({
el: "#root",
data(){
return {
name:"尤雨溪",
age:"36",
sex:"男",
bol:false
}
}
})
</script>
使用vue调试工具查看效果:
b. v-if
v-if => 隐藏/显示 => 开始 为 false 直接不渲染 => true 渲染;使用中 false 直接干掉 => true 重新创建插入进去
写法:v-if = “表达式”;
例:
<div v-if="bol">使用v-if</div>
v-if显示/隐藏的原理:
开始:为 false 直接不渲染 ,变为 true则 渲染;
使用中:false 直接删掉节点 ,变为 true 重新创建插入进去。
v-else-if=“表达式”; 或 v-else =“表达式”; 配合v-if使用。
例:
<div v-if="num">00000 v-if</div> // 表达式num已固定,除非num的bol值改变,否则不会执行后面程序
<div v-else-if="num == 1">11111 v-else-if</div>
<div v-else-if="num == 2">22222 v-else-if</div>
<div v-else="num == 3">33333 v-else</div>
**注意:**v-if、v-else-if、v-else 三者一起使用时,中间不能被插入其他内容。
c. template
template标签本身不会被渲染到页面中,只有它里面的内容会渲染,相当于占据了书写位置,不占据实际的dom位置。
便于一次性处理多个内容。
例:
<template v-if="bol">
<div>尤雨溪</div>
<div>Evan You</div>
<div>男</div>
<div>36</div>
<div>汉</div>
<div>Colgate University</div>
<div>前端框架Vue.js的作者</div>
<div>HTML5版Clear的打造人</div>
<div>独立开源开发者</div>
</template>
总结:
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
例:
<div id="root">
<!-- 动态绑定:常用 -->
<div :class="arg">Hello Vue</div>
<div v-bind:class="arg">HUAWEI</div>
<!-- 多个类名的情况 -->
<!-- 原生+动态 -->
<div class="xiaomi" :class="arg">XIAOMI</div>
<!-- 原生写法 -->
<div class="xiaomi oppo">OPPO</div>
<!-- vue动态写法 -->
<!-- 动态数组:可更改数组内容 => 适用类名、样式都不确定的情况 -->
<div :class="arr">xiaomi,oppo,vivo</div>
<!-- 对象写法: -->
<div :class="{glo:bol}">xiaomi,oppo,vivo,MEIZU</div> <!--单个 -->
<div :class="obj">xiaomi,oppo,vivo,MEIZU</div> <!--多个 -->
</div>
<script>
let vm = new Vue({
el: "#root",
data(){
return {
bol:true,
global:"glo",
arg:"sty",
arr:["xiaomi","oppo","vivo"],
obj:{
// 属性名只能用css样式中的类名,不能用data中的属性名
glo:false,
sty:true,
xiaomi:true,
vivo:true,
},
}
}
})
</script>
样式表:
<style>
.sty{
background-color: blueviolet;
}
.xiaomi{
color: brown;
}
.oppo{
font-weight: bold;
}
.vivo{
font-size: larger;
}
.size{
font-size: 50px;
}
.glo{
background-color: blue;
}
</style>
效果展示:
动态数组写法效果演示:
b. 动态绑定style
例:
<div id="root">
<!-- 原生写法 -->
<div style="color: aquamarine;">原生写法</div>
<!-- 动态绑定style -->
<div :style="arg">动态绑定style</div>
<!-- 动态绑定多个style -->
<div :style="{fontSize:fontSize + 'px', color:fontColor}">动态绑定多个style</div>
<!-- 对象写法 -->
<div :style="obj">对象写法</div>
<!-- 数组写法 -->
<div :style="[obj, mov]">数组写法</div>
</div>
<script>
let vm = new Vue({
el: "#root",
data(){
return {
arg:"color:red",
fontSize:50,
fontColor:"green",
obj:{
backgroundColor:"blueviolet",
fontSize:"20px",
color:"orange"
},
mov:{
fontStyle:"italic",
}
}
}
})
</script>
注意: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是样式。