Vue学习日记2——组件注册的三种方式

本文使用直接在html中引用vue.js的方式测试组件注册方法。

新建test.html文件，作为测试代码源文件。

将vue.js放入test.html相同的目录，然后编写如下代码。

<!DOCTYPE html>
<html>

 <script src="vue.js"></script>
 <h1>vue learn & test</h1>
    
    <div id="componentsdemo">
        <bc1></bc1>
        <bc2></bc2>
        <bc3></bc3>
        
    </div>

    <script type="text/javascript">
    
    #第一种方式调用全局注册组件函数（参数1：组件名，参数2：扩展的组件构造器）
   Vue.component("bc",
    Vue.extend({
    data: function () {
    return {
        count: 0
    }
    },
    template: '<button v-on:click="count++">You clicked bc {{ count }} times.</button>'
    })
    )
   #第二种方法 创建vue实例时，传入extend的构造器
   var bc1=Vue.extend({
        data: function () {
        return {
            count: 0
        }
        },
        template: '<button v-on:click="count++">You clicked bc1 {{ count }} times.</button>'
        });
   #第三种方法 创建vue实例时，传入选项对象
   var bc2={

    data: function () {
    return {
        count: 0
    }
    },
    template: '<button v-on:click="count++">You clicked bc2 {{ count }} times.</button>'
    }

    new Vue({ 
    el: '#componentsdemo'
    ,
    components:{bc1,bc2}
   })
    </script> 
   
</html>