Vue组件

一、Vue组件：用于扩展HTML元素，封装可重用的代码；

　　主要分为：全局组件，局部组件；

二、全局组件：

　　1）创建：Vue.component(tagName, options)；

　　2）调用：<tagName></tagName>

　　3）注释事项：

　　　　1）只有div被vue绑定，才能使用vue 的组件；

　　　　2）template：必须有一个根元素；

　　　　3）data的写法不同：data：function(){return{ json格式键值对 }}

　　4）示例：

<div id="app">
    <module></module>
</div>
<script>
    Vue.component("module",{
        template:"<div><p>{{title}}</p><button @click='btnFn'>java</button></div>",
        data:function () {
            return{
            title:"你好"
            }
        },
        methods:{
            btnFn:function () {
                alert("java");
            }
        }
    })
    new Vue({
        el:'#app'
    })
</script>

三、局部组件：

　　//只能在el标记的div中使用；

<div id="app">
    <model></model>
</div>
<script>
    new Vue({
        el:'#app',
        components:{
            model:{
                template:"<div><p>{{title}}</p><button @click='btnFn'>java</button></div>",
                data:function () {
                    return{
                        title:"你好"
                    }
                },
                methods:{
                    btnFn:function () {
                        alert("java");
                    }
                }
            }
        }
    })
</script>