vue教程二 vue组件(1) 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <title></title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <div id="app">
            <custom-button></custom-button>
            
            <my-button></my-button>
        </div>
        <script>
            //全局定义组件
            Vue.component('my-button',{
                template:'<button>this is my button</button>'
            });
            
            //局部组件 ,需要在vue对象中进行注册
            const customButton={
                template:'<button>this is a custom component</button>'
            };
            
            var app = new Vue({
                el: '#app',
                data: {
                    isVisible:true,
                },
                components:{
                    customButton
                }
                
            });
        </script>
    </body>
</html>

【前端全套视频教程】https://m.tb.cn/h.eR5xKOJ  点击链接，再选择浏览器咑閞；或椱ァ製这段描述￥EgZvYRaMUoS￥后到><

posted @ 2019-07-31 14:54  tomcuper  阅读(173)  评论(0)  编辑  收藏  举报