Vue学习之路组件化开发之创建组件 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue组件化开发</title>

    </head>

    <body>
        <div id="app">
          <!-- 组件使用 -->
          <button-counter2></button-counter2>
          
          <hello-world></hello-world>
          <hello-wb></hello-wb>
        </div>
    </body>

    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">    
        /* 组件注册 */
        //组件是可以重用
        //每个组件都是封装的概念。独立的实例。
        //引用多个组件时。数据不会相互影响。
        /* data:必须是一个函数对象 */
        /*
        命名注意事项
        短横线方式:字母全部是小写。而且每个单词之间用-隔开
        驼峰式：每个单词首字母用大写
        
        如果使用驼峰式命名组件,那么在使用组件的时候。只能在字符串模板中用驼峰式的方式使用组件。
        但是在普通的标签中，必须使用短横线的方式使用组件。
        */
       /*----------------全局注册组件--------------------------*/
         Vue.component('button-counter',{
            data:function(){
                return {count:0,name:'按钮'}
            },
            template:'<button @click="handle">{{name}}</button>',
            methods:{
                handle:function(){
                    this.count+=2;
                    this.name='按钮'+this.count;
                }
            }
        });
        
        Vue.component('button-counter1',{
            data:function(){
                return {count:0,name:'按钮'}
            },
            template:'<div><button @click="handle">{{name}}</button><button>按钮2</button></div>',
            methods:{
                handle:function(){
                    this.count+=2;
                    this.name='按钮'+this.count;
                }
            }
        }); 
        //模板字符串
        //template必须是反引号
        //注意：全局组建是没有办法引用局部组件
        Vue.component('button-counter2',{
            data:function(){
                return {count:0,name:'按钮'}
            },
            template:
            `
            <div>
               <button @click="handle">{{name}}</button>
               <button>按钮2</button>
               <HelloWorld></HelloWorld>
            </div>
            `
            ,
            methods:{
                handle:function(){
                    this.count+=2;
                    this.name='按钮'+this.count;
                }
            }
        });
        
        Vue.component('HelloWorld',{
            data:function(){
                return {msg:'Hello World'}
            },
            template:'<div>{{msg}}</div>'
        });
        
        /*----------------局部注册组件--------------------------*/
        //局部组件只能在注册他的父组件中使用
        var HelleWorld={
            data:function(){
                return {msg:'HellWorld'}
            },
            template:'<div>{{msg}}</div>'
        }
        
        var HelleWb={
            data:function(){
                return {msg:'HellWB'}
            },
            template:'<div>{{msg}}</div>'
        }
        var vm = new Vue({
            el: "#app",
            data: {
             msg:''
            },
            //方法
            methods:{
                
            },  
            components:{
                'hello-world':HelleWorld,
                'hello-wb':HelleWb
            }
            
            
        
        })
    </script>
</html>

 

posted @ 2021-07-02 08:04  王彬-效率开发  阅读(46)  评论(0)    收藏  举报