回答

模板可以写在html中

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>模板引入</title>
</head>
<body>

    <div>
        <my-component-b></my-component-b><!--可以把my-component-b看做一个对象-->


    </div>
    <template id="my-template">

        <div>
            <h2>{{name}}</h2>
            <button  @click="count++">{{count}}</button>
            <ul>

                <li v-for="item in numArray">{{item}}</li>
            </ul>

        </div>
    </template>



    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.2.2.min.js"></script>
    <script>


        new Vue({




            components: {
                "my-component-b": {
                    template: '#my-template',
                    data() {
                        return {
                            name: '欢迎来到bfw',
                            numArray: [1, 2, 3, 4, 5],
                            count: 0
                        }
                    }


                }
            }



        }).$mount('div');
    </script>
</body>
</html>

component可以动态引入，代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动态组件</title>
</head>
<body>
    <div>
        <button @click="selectName='my-component-a' ">a</button>
        <button @click="selectName='my-component-b' ">b</button>
        <button @click="selectName='my-component-c' ">c</button>

        <component :is="selectName"></component>

    </div>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.2.2.min.js"></script>
<script>

    new Vue({
        data: {
            selectName: 'my-component-a'

        },




        components: {
            "my-component-a": {
                template: '<h1>欢迎来到bfw</h1>'

            },

            "my-component-b": {
                template: "<a href='https://www.bfw.wiki'> bfw.wiki</a>"

            },
            "my-component-c": {
                template: "<p>一个it人必备的网站</p>"

            },


        }



    }).$mount('div');
</script>
</body>
</html>