Vue中定义模板的几种方法

指定模板

Vue实例的模板在Vue实例的选项·template·中定义，属性值的本质是一个字符串，如果组件的template过长难以阅读，可以将模板写在script标签中，或者使用Vue提供的内联模板功能,将组件模板设置在组件之外。
下面的例子中，根实例没有指定模板，不指定模板的情况下挂载点内部的内容就是其模板

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
    <my-component></my-component>
</div>
<script>
Vue.component('MyComponent', {
  data () {
    return { message: 'Hello Vue!' }
  },
  template: '<div><p>{{ message }}</p></div>'
})
new Vue({
  el: '#app'
})
</script>

1、字符串模板
通过template选项指定字符串作为模板,见上
2、 template选项指定模板字符串
通过template选项指定ES6的模板字符串作为模板

template: `<div>
        <p>{{ message }}</p>
    </div>`

3、X-Templates
script标签中设置type为text/x-template，配置id属性;在template选项指定script标签的id。

<div id="app">
    <my-component></my-component>
</div>
<script type="text/x-template" id="template">
<div>
    <p>{{message}}</p>
</div>
</script>
<script>
Vue.component('MyComponent', {
  data () {
    return { message: 'Hello Vue!' }
  },
  template: '#template'
})
new Vue({
  el: '#app'
})
</script>

4、内联模板（Inline Templates）
在内联模板中添加inline-template属性来告诉Vue，里面的内容就是模板,这种方式无需显示的配置template选项

<div id="app">
    <my-component inline-template>
        <div>
            <p>{{message}}</p>
        </div>
    </my-component>
</div>
<script>
Vue.component('MyComponent', {
  data () {
    return { message: 'Hello Vue!' }
  }
})
new Vue({
  el: '#app'
})
</script>

单文件组件

单文件组件是把组件写到单独的.vue 文件中，可以把html, css, js 写到一个文件中，从而实现了对一个组件的封装， 一个.vue 文件就是一个单独的组件。
由于.vue文件是自定义的，浏览器不认识，所以需要对该文件进行解析，如在webpack构建的应用中，需要安装vue-loader 对.vue文件进行解析，webpack会解析生成对应的 javascript、html、css 。

MyComponent.vue

<template>
  <div>
    <p>{{message}}</p>
  </div>
</template>

<script>
  export default {
    data () {
        return { message: 'Hello Vue!' }
      }
  }
</script>

<style>
</style>

Vue官方提供的一个脚手架工具vue-cli ,生成的项目模板，就是采用的单文件组件。

render函数

render函数直接用js语言来构建虚拟DOM（ VNode）。它接收一个 createElement 函数作为参数，render函数的返回值是VNode，也就是我们要渲染的虚拟节点。

createElement函数有三个参数：

序号	类型	说明
1	{String / Object / Function}	必填项，一个 HTML 标签名、组件选项对象，或者,resolve 了上述任何一种的一个 async 函数
2	{Object}	一个与模板中属性对应的数据对象，可选
3	{Array / String}	由 createElement()构建而成子级虚拟节点 (数组)，或使用字符串来生成“文本虚拟节点”。可选

<div id="app">
    <my-component></my-component>
</div>
<script>
Vue.component('MyComponent', {
  data () {
    return { message: 'Hello Vue!' }
  },
  render: function (createElement) {
    return createElement(
      'div',
      [
        createElement('p', this.message)
      ]
    )
  }
})
new Vue({
  el: '#app'
})
</script>

createElement可以简写为h，render函数可以用ES6语法进行简写

render: h => h(
    //...
  )

使用JSX语法

用render函数createElement() 构建虚拟Dom的语法比较繁琐，更方便的是用更接近于模板的JSX语法,浏览器不认识不能识别JSX语法，需要babel插件的帮助，如果使用的 Vue-cli 大于或等于 3.0 版本，安装了babel,会自动支持JSX语法。
下面是在Vue cli构建的应用中的一个单文件组件

<script>
export default {
  data () {
    return { message: 'Hello Vue!' }
  },
  render: function (h) {
    return (
      <div>
        <p>{this.message}</p>
      </div>
    )
  }
}
</script>

JSX是React发明的一种JavaScript的语法扩展，有其特定语法规则
在Vue 中使用 JSX 语法