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

时间：2021-05-26

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

<template> <div id="app"> <div id="nav"> </div> <router-view/> </div></template><style lang="less"></style>

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

<!DOCTYPE html><html><head> <title>render</title></head><style type="text/css"> #text{ font-weight: bold; font-size: 26px; }</style><body> <div id="app"> </div></body><script type="text/javascript" src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script><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:`<div :style='style1'> // <p :style='style2'> // <span :style='colorText' @click='cli()' id='text'>{{text}}</span> // </p> // </div>`, // 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' }, on:{ click:()=>{ alert(1) } } }, this.text)]) ]) } })</script></html>

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章