Vue中的JS组件模板和标签组件模板

Vue中的组件编写方式很多，这个应该算是Vue的缺点吧，本文将介绍Vue的其他组件的编写方式

JS组件模板

吐槽*非常奇怪的用法，通过JS标签生成组件，使用方式和

1）通过component进行拓展

<div id="app">
     <test></test>
</div>  
<script type="x-template" id="test">
        <h1>这是一个通过JS标签生成的组件！</h1>
</script>
<script>
    Vue.component('test', {
        template: '#test'
    })

    new Vue({
        el: '#app'
    })
</script>

2）通过components进行拓展

<div id="app">
     <test></test>
</div>  
<script type="x-template" id="test">
        <h1>这是一个通过JS标签生成的组件！</h1>
</script>
<script>
    new Vue({
        el: '#app',
        components: {
            test: {
                template: '#test'
            }
        }
    })
</script>

标签组件模板

1）通过component进行拓展

这种方式比script组件高明不了多少，只是把JS换成了template标签

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

<template id="test">
    <h1>这是标签组件模板</h1>
</template>

<script>
    Vue.component('test', {
        template: '#test'
    })

    new Vue({
        el: '#app'
    })
</script>

2）通过components进行拓展

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

<template id="test">
    <h1>这是标签组件模板</h1>
</template>

<script>
    new Vue({
        el: '#app',
        components: {
            test: {
                template: '#test'
            }
        }
    })
</script>