📑博客主页:@丘比特惩罚陆
💖欢迎关注:点赞收藏⭐留言✒
💬系列专栏:web前端、嵌入式、笔记专栏
🎮 加入社区: 丘比特惩罚陆
🥇人生格言:选对方向,每走一步都是进步!
✒️欢迎大佬指正,一起学习!一起加油!👏 希望大家能小手一动,帮忙点个赞!
😁资源邮箱:2237814512@qq.com
目录
1.指令的本质是什么?
在Vue中,内置指令有,v-text、v-html、v-show、v-if、v-else、v-else-if、v-for、v-on、v-bind、v-model、v-slot、v-pre、v-clock、v-once,这一些都是语法糖,我们的标志位;
<template>
<div>
h2>v-text</h2>
<div v-text="'hello vue'">hello world</div>
<h2>v-html</h2>
<div v-html="'<span style=&qot;color: red">hello vue</spans'">hello world
</div>
<h2>v-show</h2>
<div v-show-"show">hello vue</div>
<button @click="show = !show" >change show</button>
<h2>v-if v-esle-if v-else</h2>
<div v-if=""number === 1">hello vue {{ number }}</div>
<div v-else-if=""number ===2">hello world {{ number }}</div>
<div v-else>hello geektime {{ number }}</div>
<h2>v-for v-bind</h2>
<div v-for="num in [1,2,3]"v-bind: key="num" >hello vue {{ num }}</div>
<h2>v-on</h2>
<button v-on:click="number = number + 1"">number++/button>
<h2>v-model</h2>
<input v-model="message"/>
<h2>v-pre</h2>
<div v-pre>{{ this will not be compiled }}</div>
<h2>v-once</h2>
<div v-once>
{{number }}</div>
</div></template>
<template>
<div>
<button @click="show = !show">
销毁
</button>
<button v-if="show" v-append-tex"hello ${number) " eclick="number++"">按钮
</button>/div>
</template><script>
export default {directives:{appendText: {
bind() {
console.log("bind");},
inserted(el,binding){
el.appendChild(document.createTextNode(binding.value);console.log("inserted",el,binding);
),
update({
console.log("update );,
componentupdated(el, binding){
el.removeChild(el.childNodes [el.childNodes.length - 11);el.appendChild(document.createTextNode(binding.value)D;console.log("componentUpdated""};
},
unbind(){
console.log("unbind");
)
2.常用的高级特性provide inject
如上图一般就是 A 传属性给 B 实现通信,B 通过 this.$emit 传事件给 A 实现通信。而 A 与 E 通信则需要层层传递(借助 C),这样子成本是比较高的而且比较脆弱。 用特性就是 A 提供数据然后 E 通过层层冒泡去 A 那取数据 (injext注入)。
</template>
<script>
import ChildrenB from "./ChildrenB":
import ChildrenC from "./ChildrenC";
import ChildrenD from "./ChildrenD";
export default {
components:{
ChildrenB,
ChildrenC,
ChildrenD
},
provide() {
return {
theme: {
color: this.color
}
};
},
//provide() {
// return {
//1
//theme: this
// };
data() {
return
color: "blue"
};
},
methods: {
changeColor(color) {
if (color) {
this.color = color;
} else {
this.color = this.color === "blue" ? "red" : "bLue ;
}
}
}
</script>
E 通过 inject 的方式注入 theme,找到颜色,故为蓝色。
F 是利用 form 起了个别名 theme1 避免当前组件的 theme 与 注入的 theme 起冲突。
I 是函数式组件,所以注入不太一样。
我们发现点击第一个按钮没有用,因为 color 并不是响应式的,我们可以直接取 this,毕竟 data、method 什么的就是挂载在 this 下面的,可以响应式。
provide(){
return {
theme:this
};
}
<template>
<div class="border1">
<h2>C结点</h2>
<ChildrenE />
<ChildrenF />
</div>
</template>
<script>
import ChildrenE from " /ChildrenE" ;
import ChildrenF from "./ChildrenF";
export default {
components: {
ChildrenE ,
ChildrenF
provide() {
return {
theme: {
color: "green"
}
};
};
</script>
3.如何获取跨层级组件实例(拒绝递归)
<template>
<div class="border">
<h1>A结点</h1>
<button @click="getEH3Ref">获取E h3 Ref</button>
<ChildrenB />
<ChildrenC />
<ChildrenD />
</div>
</template>
<script>
import ChildrenB from "./ChildrenB";
import ChildrenC from "./ChildrenC";
import ChildrenD from "./ChildrenD";
export default {
components: {
ChildrenB,
ChildrenC,
ChildrenD
},
provide() {
return {
setChildrenRef: (name, ref) > {
this[name] = ref;
getChildrenRef: name => {
6
return Fhis [namel;
},
8
getRef: () => {
return this ;
}
};
},
data() {
return {
color: "blue"
};
<template>
<div class="border1">
<h2>D 结点</h2>
<ChildrenG />
<ChildrenH v-ant-ref-"c D setChi ldrenRef('childrenH', C)" />
<ChildrenI />
</div>
</ template>
<script>
import ChildrenG from "./ChildrenG" ;
import ChildrenH from "./ChildrenH" ;
import ChildrenI from "./ChildrenI" ;
export default {
components: {
ChildrenG,
ChildrenH,
ChildrenI
inject: {
setChildrenRef: {
default: () => {}
}
};
4.template 和 JSX 的对比以及它们的本质
JSX 不只是模板语法,因为可以写很多逻辑非常灵活!
也就是说首先推荐使用 template,如果系统越来越复杂,需要逻辑则可以使用 JSX 或者 render 函数。 目前如果是需要根据传来的 number 去控制显示 h 几则 template 是需要一个个去判断的。
<template>
<h1 v-if="level == 1">
<slot></slot>
</h1>
<h2 v-else-if="level == 2">
<slot></s Lot>
</h2>
<h3 v-else- if="level = 3">
<sLot></slot>
</h3>
<h4 v-else-if="level == 4">
<slot></slot>
</h4>
<h5 v-else-if="level === 5">
<slot></slot>
</h5>
<h6 v-else-if="level == 6">
<slot></slot>
</h6>
</template>
<script>
export default {
props: {
level: {
type: Number,
default:1
}
}
};
</script>
但是如果是利用 JSX 则只需要获取这个 number 然后输出就行.
export default
props: {
level: {
type: Number ,
default: 1
}
},
render: function(h) {
const Tag =”h${this. level}” ;
return <Tag>{this.$s lots. default}</Tag>;
}
};
export default {
props: {
level: {
type: Number,
default: 1
}
},
render: function(createElement) {
return createElement (
"h”+ this.level, //标签名称
this. $s lots.default //子元素数组
);
}
};
<script>
import AnchoredHeading1 f rom ". /AnchoredHeading.vue";
import AnchoredHeading2 from "./AnchoredHeading.js";
import AnchoredHeading3 from "./AnchoredHeading.jsx";
export default {
components: {
AnchoredHeading1,
AnchoredHeading2,
AnchoredHeading3,
VNodes: {
functional: true,
render: (h, ctx) => ctx. props. vnodes
}
},
data() {
return {
msg: "hello vue"
};
methods: {
getJSXSpan() {
return <span>Message: {this ,msg}</span>;
},
getAnchoredHeading(level) {
const Tag =' h$(level}' ;
return <Tag>Hello world!</Tag>;
}
}
};