Vue实例中的template
- 代码，
- 调试图片
- 原理说明图片
- 终极结论
- el，template，render属性优先性
本人的第一篇博客，作为一名从大二开始入坑的后端开发小哥哥[不要脸]，现在即将毕业一年，第一次写博客文章，结果是编写的前端技术文章[感慨]，本人虽为后端开发小哥哥，也有着一颗学习前端的心，本篇博客有借鉴很多心目中的大牛博客的一些片段，感谢 ，第一次写博客好激动好激动好激动 wawawa,淡定我可是一个安静的帅气的阳光的小哥哥， 嘻嘻嘻嘻
代码，
//别忘了引包
<body>
<div id="app-1">
{{msg}}
</div>
================
<div id="app-2">
{{msg}}
</div>
=================
<div id="app-3">
{{msg}}
</div>
<script>
//在vue.js中，可以使用template给元素添加模板，但是元素中只能有一个根元素，不能出现两个或两个以上的根同级元素。还可以在模板中绑定数据、表达式等。下面利用实例说明如何添加模板
// 创建 Vue 实例，得到 ViewModel
new Vue({
el: '#app-1',
data: {
msg:'这是通过el属性获取挂载元素的outerHTML方式渲染'
}
});
//结论:如果vue实例中有template属性，会将该属性值进行编译，将编译后的虚拟dom直接替换掉vue实例绑定的元素（即el绑定的那个元素);
//注意:template属性中的dom结构只能有一个根元素，如果有多个根元素需要使用v-if、v-else、v-else-if设置成只显示其中一个根元素；
new Vue({
el: '#app-2',
data: {
msg:'这是通过el属性获取挂载元素的outerHTML方式渲染'
},
template:'<div>这是template属性模板渲染</div>'
});
//render
new Vue({
el: '#app-3',
data: {
msg:'这是通过el属性获取挂载元素的outerHTML方式渲染'
},
template:'<div>这是template属性模板渲染</div>',
render: function(createElement){
return createElement('div',
// 参数2、这里相当于给标签加属性 例如：<div style='color:red,font-size: 14px'></div>
{
//给div绑定样式
style:{
width:'300px',
height:'400px',
color:'pink'
},
//给div绑定点击事件
on: {
click: () => {
console.log('点击事件')
}
}
},
// 参数3、参数中渲染的标签的子元素数组（可选）
// [
// // 文本节点直接写就可以
// 'text'
// ]
'这是render属性方式渲染。'
);
}
});
</script>
</body>
调试图片
原理说明图片
终极结论
el，template，render属性优先性
当Vue选项对象中有render渲染函数时，Vue构造函数将直接使用渲染函数渲染DOM树，当选项对象中没有render渲染函数时，Vue构造函数首先通过将template模板编译生成渲染函数，然后再渲染DOM树，而当Vue选项对象中既没有render渲染函数，也没有template模板时，会通过el属性获取挂载元素的outerHTML来作为模板，并编译生成渲染函数。
换言之，在进行DOM树的渲染时，render渲染函数的优先级最高，template次之且需编译成渲染函数，而挂载点el属性对应的元素若存在，则在前两者均不存在时，其outerHTML才会用于编译与渲染。
本文有参考大佬的博客文章，链接如下：1
https://www.cnblogs.com/camille666/p/vue_instance_prop_el_template_render.html ↩︎
