Vue自学之路3-vue模版初探
16lz
2021-04-02
前端渲染
前端渲染就是把数据填充到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
微信公众号：测试生财（定期分享独家内容和资源）
你的鼓励让我更有动力
赞赏
0人进行了赞赏支持
更多相关文章
- 20210401 微服务测试
- Vue自学之路1-vue概述
- Playwright自动化测试工具之元素定位实战
- 信息安全深透测试与工房（四）Kali 环境下的模拟虚拟机和工具
- MySQL数据库测试数据导入脚本与基础查询操作
- 软测经典面试题（二）
- ModuleNotFoundError: No module named '_ctypes'
- 特斯拉AI团队招聘！马斯克：我不在乎学历，但编程测试得过
- 《软件测试的艺术》高清脑图总结（文末免费送书）