1-1 vue定义组件模板的七种方式

1、单文件组件

2、x-template

另一个定义模板的方式是在一个

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

3、字符串

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

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

4、模板字面量

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

Vue.component('custom-component02', {
    template: `
    

        
{{this.title}}
       

    
`,
    data() { return {title: '模板字面量' ,checkbox: true} }
});

5、内联模板inline-template

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

    
{{title}}

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

6、渲染函数(Render)

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

7、JSX语法