Vue.js 自定义组件的创建与应用

通过：Vue.component('my-component-name', { /* ... */ }) 创建自定义组件

html
 

    <!--vue-app是根容器-->
    <div id="vue-app">
        <hw></hw>             //自定义标签
    </div>

js
 

Vue.component("hw",{
    template:"<div><p>{{ name }}，你好</p><button v-on:click='change'>改变</button></div>",
    data:function(){
        return {
            name:"张三"
        }
    },
    methods:{
        change:function(){
            this.name="李四"
        }
    }
});
//实例化vue对象
new Vue({
    el:"#vue-app"
});

效果图：

注意：

data里面的对象，必须是以方法返回值的形式

 

 

如果您有什么不明白的地方或其它想问的可以关注我的公众号,给我留言,我会尽可能的帮您解决遇到的问题

ps:如果您对摄影感兴趣,也可以关注我的公众号,不定时会分享自己的摄影经验和调色设定,欢迎交流,哈哈哈哈哈