微客导航 » 文章资讯 » Vue是怎么渲染template内的标签内容的

Vue是怎么渲染template内的标签内容的

2023-07-23 16:33:03 244

我们在使用Vue做项目时，都会用到脚手架，相应的我们会在template写标签内容。那么你知道为什么会在template写标签吗？这当中经过了怎样的处理呢？

其实Vue在处理template时，是经过这样处理的，它是通过内置的render方法处理我们输入的标签，生成VNodes。下面我注释了template内的代码，你可以先看下效果，然后注释掉render方法内的内容，取消注释template。看下前后效果是否一样。




render


#text{
font-weight:bold;
font-size:26px;
}

constvm=newVue({ el:'#app', data:{ text:'helloworld', style1:{ width:'200px', height:'200px', border:'1pxsolidred' }, style2:{ textAlign:'center' }, colorText:{ color:'blue' } }, //template:` // //{{text}} //

`, //methods:{ //cli(){ //alert(1) //} //}, render(createElement){ returncreateElement('div',{ style:this.style1 },[ createElement('p',{ style:this.style2 },[createElement('span',{ style:this.colorText, attrs:{ id:'text' }, on:{ click:()=>{ alert(1) } } },this.text)]) ]) } })

到此这篇关于Vue是怎么渲染template内的标签内容的的文章就介绍到这了,更多相关Vue渲染template内容内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

返回顶部
3162201930
czq8825@qq.com

Vue是怎么渲染template内的标签内容的

热门推荐

随机推荐