字符串模板

vue 自己自己定义的模板语法：

写在.vue文件<template></template>中的内容

<template>
<div>This is string template!</div>
</template>

<script></script>

创建组件时写在template属性中的内容

app.component('HelloWorld', {
    template: '<div>This is string template!</div>'
})

字符串模板不会在页面初始化（浏览器渲染index.html）时被渲染，而是经过 vue 编译之后再被浏览器渲染，所以其元素的结构和命名没有限制，所以使用自定义组件时既可以混用 PascalCase 和 kebab-case。

app.component用来注册全局组件，第一个参数是组件名称：

如果是 PascalCase 的名称，则使用组件时既可以是 PascalCase 也可以是 kebab-case
如果是 kebab-case 的名称，则使用组件时只能是 kebab-case

DOM 模板

就是通用的 HTML 模板，浏览器加载 HTML 文件时就会直接渲染该文件的模板内容，因此需要符合 HTML 模板的规范，例如在 DOM 模板中使用自定义的 vue 组件必须使用 kebab-case，因为 HTML 模板不区分标签名称的大小写，HelloWorld会被识别为helloworld，然而我们注册的组件是HelloWorld。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>This is a title</title>
    </head>
    <body>
        <div id="app">
            <hello-world></hello-world>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
        <script>
            Vue.component('HelloWorld', {
                template: '<div>This is string template!</div>'
            })
        </script>
    </body>
</html>

目录CONTENT

vue 字符串模板和 dom 模板

字符串模板

DOM 模板

评论区