创建组件的三种方式

创建组件的三种方式

第一种方式

<div>
   如果要使用组件,直接把组件的名称,以html标签的形式,引入到页面中 
    <mycoml></mycoml>
</div>
<script>
    //1.1  使用Vue.extend来创建全局的Vue组件
    // var coml = Vue.extend({
    //     template:'<h3>只是使用Vue.extend创建的组件</h3>'  //通过t
    emplate属性,指定了组件要展示的html结构
    // })
    //1.2  使用Vue.component('组建的名称',创建出来的组件模板对象)
    //Vue.component('myComl',coml)
    //若果使用Vue.component定义全局组件的时候,组件名称使用了驼峰命名法,
    	则在引用组建的时候,
        //需要把大写的驼峰改为小写的字母,同时,两个单词之间,使用 - 连接
    //如果不使用驼峰,则直接拿名称来使用即可;
    //Vue.component('mycoml',coml);



    //Vue.component第一个参数:组建的名称,将来在引用组件的时候,
    		就是一个标签形式来引入它的
    //第二个参数:Vue.extend创建的组件,其中template就是组件将来
    		要展示的HTML内容
    Vue.component('mycoml',Vue.extend({
        template:'<h3>只是使用Vue.extend创建的组件</h3>'
    }))
    //创建Vue实例,得到ViewModel
    var vm = new Vue({
        el:'#app',
        data:{},
        methods:{}
    });
</script>

第二种方式

<script>
    //注意:不论是哪种方式创建出来的组件,组建的template属性指向的模板内容,
    		//必须有其只能由唯一的一个根元素
    Vue.component('mycom2',{
        template:'<div><h3>只是直接使用Vue.component创建出来的组件
        	</h3><span>123</span></div>'
    })

    var vm = new Vue({
        el:'#app',
        data:{},
        methods:{}
    })
</script>

第三种方式

<template id="tmpl">
    <span>
        <h1>这是通过template元素,在外部定义的组件结构,这个方式,
        		有代码的只能提示和高亮</h1>
        <h4>Very Nice</h4>
    </span>
</template>
    <script>
        Vue.component('mycom3',{
            template:'#tmpl'
        })

        var vm = new Vue({
            el:'#app',
            data:{},
            methods:{}
        })
    </script>