Vue组件创建方式

1. 使用Vue.extend

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

    <script>

        var com1 = Vue.extend({
            template:'
我是extend创建的组件
' // 就是组件展示的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元素里面的内容1p>
            <p>我是template元素里面的内容2p>
        div>
    template>


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

3.利用脚手架