参考文章：https://cn.vuejs.org/v2/guide/components.html#%E5%B1%80%E9%83%A8%E6%B3%A8%E5%86%8C
vue 模板类型
- html 模板
- 字符串模板
- 内联模板字符串
- <script type="x-template">模板
- 注意事项
1：html 模板
直接跟原生的html标签混合在一起的
<body>
<!-- html模板 -->
<div id="demo">
<span :customId="id">{{message}}</span>
</div>
<script>
let obj = {
message: 'hello,world',
id: '123'
}
var vm = new Vue({
el: '#demo',
data: obj
})
</script>
</body>
2：字符串模板
以下代码一种是定义的全局的组件，一种是定义在父组件中的组件，均是通过字符串来定义的。
注意：通过模板字符串来声明的模板，会替换挂载元素
<body>
<div id="template"></div>
<script>
Vue.component('my-component', {
props: ['param'],
template: `
<div>A custom component{{param}}</div>
`
})
new Vue({
el: '#template',
data: {
name: 'donghai'
},
components: {
'se-com': {
props: ['param'],
template: `<div>我是第二个组件{{param}}</div>`
}
},
// 字符串模板，替换全部的模板，内联字符串模板
template: `
<ol>
<tr is="my-component" :param="name"></tr>
<tr is="se-com" :param="name" ></tr>
<se-com :param="name"></se-com>
</ol>
`
})
</script>
</body>
3：内联字符串模板
内联字符串模板是在父组件中引用其他的组件
new Vue({
el: '#template',
data: {
name: 'donghai'
},
components: {
'se-com': {
props: ['param'],
template: `<div>我是第二个组件{{param}}</div>`
}
},
// 字符串模板，替换挂载元素
template: `
<ol>
<tr is="my-component" :param="name"></tr>
<tr is="se-com" :param="name" ></tr>
<se-com :param="name"></se-com>
</ol>
})
4：<script type="x-template">模板
通过script标签来声明
<body>
<div id="app">
<select>
<option is="optioncomp"></option>
</select>
</div>
<!--模板内容存放区域-->
<script type="text/x-template" id="optioncompTemp">
<option>a</option>
</script>
<script>
new Vue({
el: '#app',
components: {
'optioncomp': {
template: '#optioncompTemp'
}
}
})
</script>
</body>
5：注意事项
由于HTML本身的限制，某些元素内只能是某些元素，例如<ul>、<ol>、<table>、<select> 这样的元素里允许包含的元素有限制，而另一些像 <option> 这样的元素只能出现在某些特定元素的内部。
<table>
<my-row>...</my-row>
</table>
自定义组件 <my-row> 会被当作无效的内容，因此会导致错误的渲染结果。变通的方案是使用特殊的 is 特性：
<table>
<tr is="my-row"></tr>
</table>
应当注意，如果使用来自以下来源之一的字符串模板，则没有这些限制：
