vue组件

全局声明

全局声明有四种声明方式，前三种已经不常用了，现在第四种用的比较多。

第一种

//引入vue.js:
    <script src="./vue-2.4.0.js"></script>
//html代码:
    <div id='app'>
        <login></login>
    </div>
//vue实例代码：
        let login = Vue.extend({
            template: '<h1>今天天气晴朗</h1>'
        })
        Vue.component('login', login)

第二种

//引入vue.js:
    <script src="./vue-2.4.0.js"></script>
//html代码:
    <div id='app'>
        <login></login>
    </div>
//vue实例代码：
         Vue.component('login', {
            template: '<h1>今天天气好</h1>'
        })

第三种

//引入vue.js:
    <script src="./vue-2.4.0.js"></script>
//html代码:
    <div id='app'>
        <login></login>
    </div>
    <script type="x-template" id="login">
        <h1>登录</h1>
    </script>
//vue实例代码：
       Vue.component('login', {
            template: '#login'
        })

第四种

//引入vue.js:
    <script src="./vue-2.4.0.js"></script>
//html代码:
    <div id='app'>
        <mine></mine>
    </div>
    <template id="mine">
        <h1>
            我的页面
        </h1>
    </template>
//vue实例代码：
       Vue.component('mine', {
            template: '#mine'
        })

私有声明

私有声明components与data和methods同级

//引入vue.js:
    <script src="./vue-2.4.0.js"></script>
//html代码:
    <div id='app'>
        <mine></mine>
        <div></div>
    </div>
   template id="mine">
        <div>我的页面
            <div>元素</div>
            <div>元素</div>
        </div>
    </template>
//vue实例代码：
        const vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            },
            components: {
                'mine': {
                    template: '#mine'
                }
            }
        })