In most cases, we will use template to create HTML, and the development experience will be better. However, it is not optimal to use it to create HTML every time, so the official provides a render() function that is close to the native construction of HTML, so that Developers can choose a better construction method based on their own circumstances.
Some students will ask, when to choose template or render(). My answer is that you should master both. Template has its limitations, and the render() function can be a supplement to it, each with its own advantages and disadvantages. , if you use them in the right place, you can solve your problem more elegantly and simply. Every solution won't solve every problem, and you should try to master as many different solutions as possible.
Vue uses the render function (to generate components in the form of js files)
loading.js
export default {
//组件名
name: "strReverse",
//属性
props: {
msg: {
type: String,
default: "",
},
},
data:()=>{
return {
message:1
}
},
//方法
methods: {
reversedMessage() {
return this.msg.split("").reverse().join("");
},
add(){
this.message++
}
},
//生成html
render(h) {
return (<div>
{
this.message}
<button onClick={
() => this.add(this)}>message++</button>
</div>)
},
};
Vue template instance is registered as a component
loading.vue
<template>
<div class="contain">
<h1>Load....</h1>
<button @click="count++">{
{count}}++</button>
</div>
</template>
<script>
export default {
data(){
return {
count:1
}
}
}
</script>
<styl lang='less' scoped>
.contain{
border: 1px solid rebeccapurple;
width: 200px;
margin: 0 auto;
}
</styl>
Register in main.js
import Loading from '@/components/global/Loading.js'
import Load from '@/components/global/Load.vue'
Vue.component('Loading',Loading);
Vue.component('Load',Load);