Vue 模板语法

Vue.js 使用了基于 HTML 的模板语法，在的底层实现上，Vue.js 把模板编译成虚拟的 DOM 元素，结合响应系统，在应用状态改变的时候，判断出最少渲染的组件数量，并且，最大限度地减少 DOM 操作次数。

[ Vue 代码运行原理 - 编译：Vue 语法 --> 原生语法 ]

简单来说，前端渲染时，所有 Vue.js 的模板都是合法的 HTML ，能被遵循规范的浏览器和 HTML 解析器解析。

如果你熟悉虚拟 DOM 且偏爱 JS 的原始力量，也可以不用模板，直接写渲染 render 函数，使用可选的 JSX 语法。

[1] 如何理解前端渲染 ？

即，把数据填充到 HTML 标签中。

[2] 前端渲染的方式

• 原生 js 拼接字符串

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

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

    <script>
      var d = data.weather;
      var info = document.getElementById('info');
      info.innerHTML = '';
      for(var i=0;i<d.length;i++){
        var date = d[i].date;
        var day = d[i].info.day;
        var night = d[i].info.night;
        var tag = '';
        tag += '<span>日期：' + date + '</span><ul>';
        tag += '<li>白天天气：' + date[i] + '</li>';
        tag += '<li>白天温度：' + date[2] + '</li>';
        tag += '<li>白天风向：' + date[3] + '</li>';
        tag += '<li>白天风速：' + date[4] + '</li>';
        tag += '</ul>'
        var div = document.createElement('div');
        div.innerHTML = tag;
        info.appendChild(div);
      }
    </script>

• 使用前端模板引擎

为了解决上述问题，后来便诞生了前端模板引擎。以下是基于模板引擎 art-template 的一段代码，与拼接字符串相比，代码明显规范了很多，它拥有自己的一套模板语法规则。

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

缺点：没有专门提供事件机制 — 渲染完成后，需要通过原生 JS 的方式处理事件。

    <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>

• 使用 vue 特有的模板语法

主要包括以下内容：插值表达式、指令、事件绑定、属性绑定、样式绑定、分支循环结构。