前端渲染（Vue基础指令铺垫）

1. 如何理解前端渲染？

• 把数据填充到HTML标签中

2. 前端渲染的方式

• 前端渲染的方式主要有三种：
  • 原生js拼接字符串
  • 使用前端模板引擎
  • 使用vue特有的模板语法

2.1 原生js拼接字符串

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

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+'</sapn><ul>';
    tag += '<li>白天天气：'+day[1]+'</li>'
    tag += '<li>白天温度：'+day[2]+'</li>'
    tag += '<li>白天风向：'+day[3]+'</li>'
    tag += '<li>白天风速：'+day[4]+'</li>'
    tag += '</ul>';
    var div = document.createElement('div');
    div.innerHTML = tag;
    info.appendChild(div);
}

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

2.2 使用前端模板引擎

• 下图代码是基于模板引擎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>

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

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

2.3 使用vue特有的模板语法（重点）

• Vue基础指令：

  • 差值表达式

  • 指令

  • 事件绑定

  • 属性绑定

  • 样式绑定

  • 分支循环结构