vue模板语法概述

模板语法概述#

前端渲染方式#

　　原生js拼接字符串

　　使用前端模板引擎

　　使用vue特有的模板语法

原生js拼接字符串#

基本上就是将数据以字符串的方式拼接到HTML标签中，前端代码风格大体上如图所示。

缺点：不同开发人员的代码风格差别很大，随着业务的复杂，后期的维护变得逐渐困难起来。

使用前端模板引擎#

右侧代码是基于模板引擎art-template的一段代码，与拼接字符串相比，代码明显规范了很多，它拥有自己的一套模板语法规则。 

优点：大家都遵循同样的规则写代码，代码可读性明显提高了，方便后期的维护。

缺点：没有专门提供事件机制。

模板语法概览#

1、差值表达式

2、指令

3、事件绑定

4、属性绑定

5、样式绑定

6、分支循环结构