Vue组件使用

创建组件的方法

// An highlighted block
var foo = 'bar';
```【1】

    <div id="key">
        <!-- 3.使用组件名访问 -->
        <mycom></mycom>
    </div>
    <script>
        /*创建组件的方式一：Vue.component('name',templateObj) */
 /*     // 1.Vue.extend()创建组件
        var com=Vue.extend({
            // template：属性：指定组件中展示的元素
            template:'<h1>使用vue.extend创建的组件</h1>'
        })
        // 2. Vue.component('组件的名称','创建的组件模板对象')
        Vue.component('mycom',com) 
 */
·简化之后：
        Vue.component('mycom',Vue.extend({
            template:'<h1>使用vue.extend创建的组件</h1>'
        }))
        var vm=new Vue({
            el:"#key",
            data:{},
            methods:{}
        })
【2】
    <div id="key">
        <!--使用组件名访问 -->
        <mycom1></mycom1>
    </div>
    <script>
        /*创建组件的方式二：  Vue.component('name',{root element})*/
        注：无论哪种方式创建，组件的模板必须有且只有一个根元素root element
        Vue.component('mycom1',{
            template:'<div><h3>使用vue.component创建的组件</h3><p>this is p</p></div>'
        })
        var vm=new Vue({
            el:"#key",
            data:{},
            methods:{}
        })
    </script>
【3】
    <div id="key">
        <!--3.使用组件名访问 -->
        <mycom2></mycom2>
    </div>
    <!-- 2.使用template标签将root element包含起来(组件的模板必须有且只有一个根元素root element)
           填写组件中包含的元素 -->
    <template id="temp1">
        <div>
            <h1>通过temp元素定义的组件</h1>
        </div>
    </template>
    <script>
        /*创建组件的方式三： 
        1. 注册组件Vue.component('name',{template:"id元素"}})*/
        Vue.component('mycom2',{
            template:'#temp1'
        })
        var vm=new Vue({
            el:"#key",
            data:{},
            methods:{}
        })
    </script>