最近看Vue官方文档，多次看到字符串模板和DOM模板，一时不解这二者的区别，特意去查了然后记录下来，毕竟好记性不如烂笔头。
1、字符串模板
字符串模板是在Vue中写组件或页面时，写在文件中的template中的内容，如.vue的单文件组件的template模板和定义组件时的template属性模板。
字符串模板不会在页面初始化时参与页面的渲染，会被Vue编译解析之后再被浏览器渲染，所以不受限于HTML结构和标签的命名。
Vue.component('MyComponentA', {
template: '<div id="component"><MyComponentB>Hello World</MyComponentB></div>'
})
<div id="app">
<MyComponentA></MyComponentA>
</div>
2、DOM模板
DOM模板又称HTML模板，就是写在HTML文件中，一打开就会被浏览器渲染解析的，所以要遵循HTML结构和标签命名，否则浏览器不解析也就获取不了文件内容。
下面的例子不会被正确渲染，因为<MyConponent></MyComponent>会被解析成<mycomponent></mycomponent>，但是注册的vue的组件是MyComponent，因此无法渲染。
<!DOCTYPE <html>
<head>
<meta charset="utf-8">
<title>Vue Component</title>
</head>
<body>
<div id="app">
Hello Vue
<MyComponent></MyComponent>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script >
//全局注册
Vue.component('MyComponent', {
template: '<div>组件类容</div>'
});
new Vue ({
el: '#app'
});
</script>
</body>
</html>
因为HTML对大小写不敏感，所以在DOM模板中使用组件必须使用kebab-case命名法(短横线命名)。因此下面的例子就会被正确渲染解析。
<!DOCTYPE <html>
<head>
<meta charset="utf-8">
<title>Vue Component</title>
</head>
<body>
<div id="app">
Hello Vue
<my-component></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script >
//全局注册
Vue.component('my-component', {
template: '<div>组件类容</div>'
});
new Vue ({
el: '#app'
});
</script>
</body>
</html>
归纳总结：
在单文件组件、字符串模板和 JSX 中的组件如果没有内容应该是自闭合的，如<MyComponent/>，有内容的则是<MyComponent>内容</MyComponent>，而在DOM模板中只能是<my-component></my-component>，或者在所有地方中都可以直接使用<my-component></my-component>。
3559
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
