标签：info Vue HTML 模版 前端 js vue https div
前端渲染
前端渲染就是把数据填充到HTML标签中
过程：模版+数据->前端渲染->HTML静态内容
前端渲染方式
1. 原生js拼接字符串
方式：数据以字符串的方式拼接到HTML标签。
缺点：不规范，代码不清晰，维护麻烦
2. 前端模版引擎
方式：基于art-template，代码更加规范，标准化
优点：可读性提高，方便后期维护
缺点：没有专门的事件机制，需要和js结合
3. 使用vue特有的模板语法
- 插值表达式
- 指令
- 事件绑定
- 属性绑定
- 样式绑定
- 分支循环结构
例子
1. 原生js拼接字符串
var info = document.getElementById('info');
info.innerHTML= '';
for ( var i=0; i < 10 ; i++)
{
tag = "<span>测试</span>"
var div = document.createElement('div');
div.innerHTML= tag;
info.appendChild(div);
}2. 前端模板引擎
<script id='abc' type='text/html'>
{{ if isadmin }}
<h1>{{title}}</h1>
<ul>
{{each list as value i }}
<li>索引：{{i+1}}:{{value}}</li>
{{/each}}
</ul>
</script>Vue的插值表达式
<div id='app'>
<!-- 插值表达式，div中添加v-cloak属性 -->
<div>{{msg}}</div>
<div>{{ 1+2 }}</div>
<div>{{ msg + '---' + 'Vue' }}</div>
</div>传送门：2021最新测试资料&大厂职位
博主：测试生财（一个不为996而996的测开码农）
座右铭：专注测试开发与自动化运维，努力读书思考写作，为内卷的人生奠定财务自由。
内容范畴：技术提升，职场杂谈，事业发展，阅读写作，投资理财，健康人生。
csdn：https://blog.csdn.net/ccgshigao
博客园：https://www.cnblogs.com/qa-freeroad/
51cto：https://blog.51cto.com/14900374
微信公众号：测试生财（定期分享独家内容和资源）
标签：info,Vue,HTML,模版,前端,js,vue,https,div 来源： https://blog.51cto.com/14900374/2680028
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。