Vue组件

一.vue组件概述

组件：是由HTML、CSS、JavaScript所组成，是把网站中某块效果界面封装起来，提供了界面效果【代码】的复用性【类似于Bootstrap】

组件基础 — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://cn.vuejs.org/v2/guide/components.html 1.创建组件

// 1、创建组件
        /**
         * 参数一：组件名称
         * 参数二：组件的组成【对象】
         */
        Vue.component("button-count",{
            template:"{{count}}",
            data:function () {
                return {
                    count:0
                }
            },
            methods:{}
        });

2.使用组件

注意：

定义组件在JavaScript中，在JavaScript中区分大小写

在html中使用组件，html不区分大小写

 在JavaScript中定义组件，并且组件名称是组合词，首字母大写，那么在html中使用组件，默认是单词和单词之间用-分割

 ButtonCount button-count

 button-count button-count

二.组件注册方式

 组件注册方式：1、全局注册 2、局部注册

1.全局注册组件：当Vue创建，组件就会被加载，不管该组件使不使用，都会被加载【占内存】【入门程序】

Vue.component("组件名称",{
  template:"模板【html】",
  data:function(){
    return {}
  },
  methods:{}
});

2.局部注册组件：当我们使用到某个组件，该组件才会被创建，如果不使用该组件，那么该组件不会被创建

三.组件注册优化

1、模板需要写在template标签中，template标签写在容器外部

2、在template标签中只能有一个根标签

 四.is属性

在html中有一些父子标签，在父标签中只能有特定的子标签【严格规范】【table、ul、ol、dl.....】，如果把子标签封装成组件，在父标签中通过传统方式使用组件，那么会出现显示的效果问题，我们需

    
    
    





    

        

            

                
序号
                
姓名
                
年龄
            
        

        


        

            

                
尾部信息
            
        
    

要通过is进行使用组件