Vue.js 定义组件模板的七种方式

Vue.js 定义组件模板的七种方式

· 字符串

1. 可读性差
2. 不能换行
3. 广泛的浏览器支持

总结：没有太多用处

<div id="app">
    <test></test>
</div>

<script>
    Vue.component('test',{
        template:'<div>hello</div><div>world</div>'
    })
    new Vue({
        el: "#app",
        data: {
        },
    });
</script>

· 模板字面量

1. 可以换行

2. 可读性还可以

3. 没有高亮

4. 组件也要根元素

   <div id="app">
        <test></test>
   </div>
   <script>
         Vue.component('test',{
           template:`
             <div>
               <div>hello</div>
               <div>world</div>
             </div>          
           `
         })
         new Vue({
           el: "#app",
           data: {
           },
         });
   </script>
   

· x-template

1. 把模板和组件定义的其它部分分离开来

<div id="app">
   <test></test>
</div>
// 模板被定义在script标签里
<script type="text/x-template" id="test-template">
    <div>
        <span>hello</span>
        <span>world</span>
    </div>
</script>

<script>
    Vue.component('test',{
        template:'#test-template' //用id引用
    })

    new Vue({
        el: "#app",
        data: {
        },
    });
</script>

· 内联模板

1. 通过在组件中添加 inline-template 属性，你可以向 Vue 指示内部内容是其模板，而不是将其视为分布式内容
2. 它与 x-templates 具有相同的缺点，不过一个优点是，内容在 HTML 模板的正确位置，因此可以在页面加载时呈现，而不是等到 JavaScript 运行

<div id="app">
    <test inline-template>
        <div>
            <span>hello</span>
            <span>world</span>
        </div>
    </test>
</div>
    
<script>
    Vue.component('test',{
    })

    new Vue({
        el: "#app",
        data: {
        },
    });
</script>

· render函数

1. render函数需要你将模板定义为 JavaScript 对象，这显然是最详细和抽象的模板选项
2. 你的模板更接近编译器
3. 允许你使用完整的 JavaScript 功能，而不是指令提供的子集
4. 详细又抽象

<div id="app">
     <test></test>
</div>
    
<script>
    Vue.component('test',{
        render(createElement){
            return createElement(
                'span',  //标签
                {
                    class:'test'   //属性
                },
                'hello world',   //内容
            )
        }
    })

    new Vue({
        el: "#app",
        data: {
        },
    });
</script>

· JSX

1. 不适应render函数的抽象写法时候用的

· 单文件组件