js前端模板

<template>
  <div>
    <h1>{{ title }}</h1>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'My List',
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
      ],
    };
  },
};
</script>

<script id="template" type="text/x-handlebars-template">
  <div class="entry">
    <h1>{{title}}</h1>
    <div class="content">{{body}}</div>
  </div>
</script>

<script>
  // 编译模板
  var source   = document.getElementById("template").innerHTML;
  var template = Handlebars.compile(source);

  // 数据
  var data = {
    title: "My Post",
    body: "This is the body of my post."
  };

  // 渲染模板
  var html = template(data);
  document.body.innerHTML += html;
</script>