vue的模板使用的是mustache语法，即{{}}，循环数据只需要使用v-for ="item in arr",将数据渲染到视图

历程

从原生dom渲染>数组join=>es6模板字符串=>mustache模板引擎

Mustache

<script src="./mustache.js"></script>
    <div id="container"></div>
    <script>
      let templateStr = `<ul id="list">
        {{#arr}}
        <li>
          <div class="hd"></div>
          <div class="bd">
            <p>姓名:{{name}}</p>
            <p>年龄: {{age}}</p>
            <p>性别: {{sex}}</p>
          </div>
        </li>
        {{/arr}}
        </ul>`
      var data = {
        arr: [
          { name: '张三', age: '1', sex: '男' },
          { name: '李四', age: '2', sex: '男' },
          { name: '王五', age: '3', sex: '女' }
        ]
      }
      let dom = Mustache.render(templateStr, data)
      container.innerHTML = dom
    </script>

正则简单实现模板填充

    <script>
      var templateStr = `<h1>买了一个{{thing}},好{{mood}}</h1>`
      var data = {
        thing: '手机',
        mood: '开心'
      }
      // replace函数的第二个参数可以是个函数，提供捕获的参数，$1
      function render(templateStr, data) {
        return templateStr.replace(/\{\{(\w+)\}\}/g, function (findStr, $1) {
          // 正则中 ()可以表示捕获其中的内容
          return data[$1]
        })
      }
      const result = render(templateStr, data)
      console.log(result)
    </script>
https://github.com/378406712/learnVue

to be continued...

赏

爬。