Vue2 模板template的四种写法总结

Vue2 模板template的四种写法总结：

Vue2 中，我们可以使用 template 来书写 HTML 模板，但是它也有多种写法，下面我们来总结一下。

1. 字符串模板形式

我们可以在组件中定义字符串模板。

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

2. script标签模板形式

我们可以在组件中使用 script 标签定义一个模板，类型可以是 text/x-template 或者 text/template。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items">{{ item }}</li>
    </ul>
  </div>
</template>

<script type="text/x-template" id="my-template">
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</script>

在这种方式中，模板内容是在 script 标签里定义的，type 属性可以是 text/x-template 或者 text/template。id 属性是我们引用该模板的标识符。

这种方式的一个好处是，我们可以通过这个方式将模板放到 html 文件之外，实现代码和模板的分离。

3. render模板形式

Vue 中，我们可以使用 render 函数来解析模板，render 函数会返回一个 VNode 节点。

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello Vue',
      content: 'Vue is awesome',
    }
  },
  render(h) {
    return h('div', [
      h('h1', this.title),
      h('p', this.content),
    ])
  }
}
</script>

这种方式是使用较为灵活的方式，但是需要对 Vue 渲染流程有一定的了解。

4. 函数式组件模板形式

Vue2 中，还支持使用函数式组件的形式书写模板。

函数式组件是无状态、无数据的纯展示组件，可以优化性能。

<template functional>
  <div>
    <h1>{{ props.title }}</h1>
    <p>{{ props.content }}</p>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    content: String,
  },
}
</script>

这种方式是一种无状态的展示组件，优点是可以减少内存占用，也可以更好地进行单元测试。

示例1：定义字符串模板

<template>
  <div>
    <h2>{{ title }}</h2>
    <p>{{ text }}</p>
  </div>
</template>

示例2：使用 script 标签定义一个模板

<template>
  <div>
    <h2>{{ title }}</h2>
    <p>{{ text }}</p>
  </div>
</template>

<script type="text/x-template" id="my-template">
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</script>