欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Vue 组件开发

程序员文章站 2022-06-27 20:07:49
将页面拆分为多个组件，简化了页面开发，方便维护，组件也可以复用。 组件的类型 通用组件，比如表单、弹窗、菜单栏、分页组件等 业务组件，实现某一业务的组件，比如抽奖组件 页面组件，也叫做单页，一个页面就是一个组件，只完成功能，不复用 组件开发流程：声明、注册、使用 demo 组件使用流程

 

将页面拆分为多个组件，简化了页面开发，方便维护，组件也可以复用。

 

组件的类型

  • 通用组件，比如表单、弹窗、菜单栏、分页组件等
  • 业务组件，实现某一业务的组件，比如抽奖组件
  • 页面组件，也叫做单页，一个页面就是一个组件，只完成功能，不复用

 

组件开发流程：声明、注册、使用

 

 

demo  组件使用流程

　　 <div id="app"></div>
    
    
    <script>

        var myheader={  //声明一个组件
            template:'<div>this is the header area</div>'
        }
        
        var mybody={
            template:'<div>this is the body area</div>'
        }
        
        var myfooter={
            template:'<div>this is the footer area</div>'
        }
        
        new vue({
            el:'#app',
            components:{  //注册组件
                myheader,
                mybody,
                myfooter
            },
            template:'<div><myheader></myheader><mybody></mybody><myfooter></myfooter></div>' //使用组件
        });
        
    </script>

声明是全局声明，但需要在每一个使用vue对象中进行注册。

 

 

使用组件有2种方式

  • <myheader></myheader>  直接以变量名作为标签名
  • <my-header></my-header>  单词都转换为全小写，-连接

 

 

声明组件时是用了语法糖的

    // 原来的写法
    var myheader=vue.extend({
        template:'<div>this is the header area</div>'
    })
    
    // 语法糖
    var myheader={ 
        template:'<div>this is the header area</div>'
    }

效果都一样，但使用语法糖明显要简便些

 

 

 

组件声明、注册的另一种方式

　　// 声明+注册一个组件
    vue.component('myheader',{
        template:'<div>this is the header area</div>'
    })
    
    vue.component('mybody',{
        template:'<div>this is the body area</div>'
    })
    
    vue.component('myfooter',{
        template:'<div>this is the footer area</div>'
    })
        
    new vue({
        el:'#app',
        template:'<div><my-header></my-header><my-body></my-body><my-footer></my-footer></div>' //使用组件
    });

声明、注册都是全局的，在vue对象中可以直接使用

 

上一篇： 餐饮行业怎么才能玩转大数据？

下一篇： 高考志愿如何选择学校和专业，影响一生的选择

推荐阅读