Vue 【进阶】- 模板引擎

vue的源码学习流程和知识点分析

本次您将学习到的东西

前期准备

1. 简介

1.1 什么是模板引擎

模板引擎是将数据要变为视图最优雅的解决方案

1.2 v-for 实际就是一种模板引擎

1.3 历史上曾出现的数据变为视图的方法

1.3.1 纯dom法 --- jq、js

1.3.2 数组 json 法

1.3.3 es6模板语法

2. mustache库简介

2.1 mustache库基本使用

umd 的包，浏览器和Npm node 环境都可以使用

2.1.1 下载 https://www.bootcdn.cn/

代码复制到 mustache.js

2.1.2 语法

1. Mustache.render(tem,data) 循环对象数组
   
2. Mustache.render(tem,data) 不循环
   和 Vue 的模板用法一样
3. 循环简单数组
   
4. 数组可以嵌套
   
5. 布尔值（类似vue v-if）
   

<script src="./mustache.js"></script>
  <script>
    var tmp = `
      <ul>
        {{#arr}}
          <li>
            <div class="hd">{{name}}</div>
            <div class="bd">
              <p>{{name}}</p>
              <p>{{sex}}</p>
              <p>{{age}}</p>
            </div>
          </li>
        {{/arr}}
      </ul>
    `

    var data = {
      arr: [
        {name:'123', age: 12, sex: 1},
        {name:'123', age: 12, sex: 1},
        {name:'123', age: 12, sex: 1},
      ]
    }

    var domStr = Mustache.render(tmp, data)
    console.log(domStr)
  </script>

2.2 template 的写法

原理 由于script标签只要type不等于 text/javascript 就不会解析，可以利用来写模板，就不用写在es6的模板语法里面了

<script type="text/template" id="tmp">
    <ul>
      {{#arr}}
        <li>
          <div class="hd">{{name}}</div>
          <div class="bd">
            <p>{{name}}</p>
            <p>{{sex}}</p>
            <p>{{age}}</p>
          </div>
        </li>
      {{/arr}}
    </ul>
  </script>
  <script>
   var tmp = document.getElementById('tmp').innerHTML