Vue是怎么渲染template内的标签内容的?
我们在使用Vue做项目时,都会用到脚手架,相应的我们会在template写标签内容。那么你知道为什么会在template写标签吗?这当中经过了怎样的处理呢?
>
id="app">
id="nav">
>
/>
>
>
>
其实Vue在处理template时,是经过这样处理的,它是通过内置的render方法处理我们输入的标签,生成VNodes。下面我注释了template内的代码,你可以先看下效果,然后注释掉render方法内的内容,取消注释template。看下前后效果是否一样。
DOCTYPE html>
>
>
>render >
>
>
>
id="app">
>
>
<script type="text/javascript" src="https://unpkg.com/vue@2.6.11/dist/vue.js">>
<script type="text/javascript">
const vm = new Vue({
el:'#app',
data: {
text: 'hello world',
style1: {
width: '200px',
height: '200px',
border: '1px solid red'
},
style2: {
textAlign: 'center'
},
colorText: {
color:'blue'
}
},
// template:`:style='style1'>
// :style='style2'>
// :style='colorText' @click='cli()' id='text'>{{text}}>
//
>
// >`,
// methods:{
// cli(){
// alert(1)
// }
// },
render(createElement) {
return createElement('div', {
style: this.style1
}, [
createElement('p', {
style: this.style2
}, [createElement('span', {
style: this.colorText,
attrs:{
id:'text'
},
更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/119250657