Vue组件创建方式

1. 使用Vue.extend

    <div id="app">
        <my-comp></my-comp>
    </div>

    <script>

        var com1 = Vue.extend({
            template:'<p>我是extend创建的组件</p>' // 就是组件展示的HTML
        })

        var vm = new Vue({
            el:'#app',
            components:{
                'myComp':com1,
            }

        })
    </script>

注意

• 在components 里面绑定组件时候，可以使用驼峰命名，但使用标签时候，只能使用 “-” 连接

2. 使用template元素

    <div id="app">
        <p>我是app的内容</p>
        <temp-abc></temp-abc>
    </div>
    
    <template id="temp1">
        <div>
            <p>我是template元素里面的内容1</p>
            <p>我是template元素里面的内容2</p>
        </div>
    </template>


    <script>
        var vm = new Vue({
            el:'#app',
            components:{
                'tempAbc':{
                    template:'#temp1',
                    data() {
                        return {
                            
                        }
                    },
                }
            }
        })
    </script>

3.利用脚手架