sequence:
1. Official document address ===》Rendering function & JSX | Vue.js
2. Blogger’s WeChat public account: “Programmer Wild Zone”, follow the public account and reply “Add group” to enter the blogger’s WeChat group
text:
Don’t be afraid. Don’t jump over it just because the official API says it’s an advanced API. It’s easy to use.
In a simple sentence, he is a createElement (create node),
For example: If you have come into contact with JQuery, it will be easier. Take a look at the following jquery code
var str="<a href='#'>111<a>"
$(str).html("22")Do you understand? The above is the jquery code, which turns this string into a virtual dom node, and then changes the content of this node from 111 to 22, and $(str) is to turn a string into a dom node.
1. Simple h() case
code part
<template>
<btn/>
</template>
<script setup lang="ts">
import {h} from "vue"
import { $ } from "vue/macros";
const btn=()=>{
return h("div",{class:"c_blue"},"你好啊")
}
</script>Browser section
f12 element review section
do you understand.
The first parameter after h is the element tag to be created. You can also use span or a tag.
The second parameter is what attributes this tag has. For example, if I add a data-id to the div, I can write it like this
const btn=()=>{
return h("div",{"data-id":"1",class:"c_blue"},"你好啊")
}
The third attribute is what text should be displayed in the content. Of course, if your text is processed first before being displayed, see my code below.
const btn=()=>{
return h("div",{"data-id":"1",class:"c_blue"},{default:()=>{return 1==1?"1111":"2222"}})
}Do you understand? It can be returned in the form of function return .
2. How to add nodes under h() to div
<template>
<btn/>
</template>
<script setup lang="ts">
import {h} from "vue"
import { $ } from "vue/macros";
const btn=()=>{
return h(
"div",
{
"data-id":"1",
class:"c_blue"
},
[
h("span","你好"),
h("a",{href:"#"},"不好")
]
)
}
</script>
Do you understand? In fact, the h() blogger understands that there is function overloading, that is, there is no need to configure attributes, and the returned text is directly set. If you nest like this, can you nest many subsets?
What the blogger wrote is very simple, it depends on your understanding! Let’s talk about the third point next
4. Passing value
Well, the following code depends on your understanding.
<template>
<btn c="c_blue" b="标题"/>
</template>
<script setup lang="ts">
import {h} from "vue"
import { $ } from "vue/macros";
const btn=(obj)=>{
debugger
return h(
"div",
{
class:obj.c,
"data-tit":obj.b
},
"你好啊"
)
}
</script>By the way, on the attribute side, you can write onClick events, and you can also enter breakpoints.
5. Expansion
1. What are its benefits? You will probably know if I mention one point. It can be encapsulated in your .ts file. You don’t need to use a separate .vue to write common components (because some components are really simple, a recharge function. Pop-up windows sometimes contain a message and an h("input")).
2. It can also be used in dynamic components.
<template>
<component :is="btn" c="c_blue" b="标题"></component>
<!-- <btn c="c_blue" b="标题"/> -->
</template>
<script setup lang="ts">
import {h} from "vue"
import { $ } from "vue/macros";
const btn=(obj)=>{
debugger
return h(
"div",
{
class:obj.c,
"data-tit":obj.b
},
"你好啊"
)
}
</script>Just tell me whether it works or not.
By the way, remember to follow the blogger’s WeChat public account: “Programmer Wild Zone”
This blog post is original, please read and cherish it. After all, I am already 35, and I may not be able to blog for a few more years. So if this blog post is helpful to you, remember to also follow the blogger’s official account. There are good things in the official account menu. The letter is