Vue自学之路3-vue模版初探

前端渲染前端渲染就是把数据填充到HTML标签中过程：模版+数据-前端渲染-HTML静态内容前端渲染方式1. 原生js拼接字符串方式：数据以字符串的方式拼接到HTML标签。缺点：不规范，代码不清晰，维护麻烦2. 前端...

前端渲染

前端渲染就是把数据填充到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

微信公众号：测试生财（定期分享独家内容和资源）