1、单文件组件

<template>
<div class="title">{{this.title}}</div>
</template>
<script>
export default { 
    data() {
        return {title: '单文件组件' }
    }
}
</script>

2、x-template

另一个定义模板的方式是在一个 <script>元素上，并为其带上 text/x-template 的类型，然后通过一个 id 将模板引用过去。例如：元素中，并为其带上 text/x-template 的类型，然后通过一个 id 将模板引用过去元素中，并为其带上 text/x-template 的类型，然后通过一个 id 将模板引用过去元素中

<script type="text/x-template" id="hello">
<div class="title">{title}}</div>
</script>

Vue.component('custom-component03',{
    template: '#hello',
    data() { return {title: 'x-template' } }
});

<custom-component03></custom-component03>

3、字符串

默认情况下，模板会被定义为一个字符串

Vue.component('custom-component01', {
    template: `<div>{{title}}</div>`,
    data() { return {title: 'Check me' } }
});
<custom-component01></custom-component01>

4、模板字面量

ES6 模板字面量允许你使用多行定义模板，这在常规 JavaScript 字符串中是不被允许的。此方式阅读体验更佳，并在许多现代浏览器中得到支持，不过安全起见你还是需要把代码转换成 ES5 。

Vue.component('custom-component02', {
    template: `
    <div>
        <div class="title">{{this.title}}</div>
       <div :class="{ checkbox: checkbox}"></div>
    </div>`,
    data() { return {title: '模板字面量' ,checkbox: true} }
});
<custom-component02></custom-component02>

5、内联模板inline-template

当 inline-template 这个特殊的特性出现在一个子组件上时，这个组件将会使用其里面的内容作为模板，而不是将其作为被分发的内容

<script>
Vue.component('custom-component04', { 
  data(){ return {title:'内联模板!'} } 
})
</script>
<custom-component04   inline-template>
    <div class="title">{{title}}</div>
</custom-component04>

不过，inline-template 会让你模板的作用域变得更加难以理解

6、渲染函数(Render)

渲染函数需要你把模板当作一个JavaScript对象来进行定义，它们是一些复杂并且抽象的模板选项。
然而，它的优点是你定义的模板更接近编译器，你可以使用所有JavaScript方法，而不是指令提供的那些功能。

<script>
Vue.component('custom-component05', {
    data(){
        return { 'title':'渲染函数'}
    },
    render(createElement) {
        return createElement( 'div', { attrs: { 'class': 'title' } }, [ this.title ] );
    }
})
</script>
<custom-component05></custom-component05>

7、JSX语法

<script>
Vue.component('custom-component05', {
  data(){
      return { title:'我是jsx模板'}
  },
  render() {
      return <div>
        {this.title}
      </div>
  }
})
</script>