企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持知识库和私有化部署方案 广告
# 2、Vue模板语法 3.1模板语法概述 1.如何理解前端渲染? 把数据填充到HTML标签中 ![](https://img.kancloud.cn/5b/01/5b011506646ecd73ad8f45daa9f438b6_1024x439.png) 2.前端渲染方式 ●原生js拼接字符串 ●使用前端模板引擎 ●使用vue特有的模板语法 3.原生js拼接字符串 基本上就是将数据以字符串的方式拼接到HTML标 签中,前端代码风格大体上如右图所示。 **缺点**:不同开发人员的代码风格差别很大,随着业 务的复杂,后期的维护变得逐渐困难起来。 4.使用前端模板引擎 右侧代码是基于模板引擎art-template的一段代码,与拼接字符串相比,代码明显规范了很多它拥有自己的一套模板语法规则。 ~~~ <script id="abc" type="text/ html "> {{if isAdmin} } <h1>{ {title}}</h1> <ul > { {each list as value i} } <li>索引{{i + 1}} : {{value}}</li> { {/each}} </ul> {{/if}} </script> ~~~ 优点:大家都遵循同样的规则写代码,代码可读性明显提高了,方便后期的维护。 缺点:没有专门提供事件机制。