精华内容
下载资源
问答
  • vue组件化和模块化区别
    千次阅读
    2021-08-21 15:04:58

    什么是组件

    组件的出现,就是为了拆分Vue实列的代码里的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可。

    组件化和模块化的不同:

    模块化:是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个每个功能模块的职能一致。
    组件化:是从UI界面的角度进行规划;前端的组件化,方便UI组件的重用。

    全局组件定义的三种方式

    第一种

     <div id="app">
            <!-- 如果要使用组件,直接把组件的名称,以HTML标签形式,引入到页面中即可 -->
        <mycom1></mycom1>
        </div>
    
    <script>
            var com1 = Vue.extend({
            template:'<h3>使用Vue.extend 来创建全局的Vue组件</h3>'
            })
            //1,使用Vue.component('组件名',创建出来的组件模板对象)
            Vue.component('mycom1',com1)
     </script>
    

    第二种

    <script>
    Vue.component('mycom2',{template:'<div><h3>使用Vue.component 创建出来的组件</h3>s<span>template</span></div>'
            })
    </script>
    

    第三种

    <templat id="temp">
     <div>
       <h1>通过templat元素,在外部定义的组件结构,这个方式,有代码的智能提示和高亮</h1>
       <h4>好用,不错</h4>
      </div>
    </templat>
    
    
    <script>
     Vue.component('mycom2',{
                template:'temp'
            })
    </script>
    

    注意:不论是哪种方式创建出来的组件,组件的template属性指向的模板内容,必须有且只能有唯一的一个根元素。

    在工作项目开发中第三种方法最好用

    更多相关内容
  • 模块与组件、模块化组件化 模块 组件 模块化 组件化 非单文件组件 基本使用 注意点 组件的嵌套 VueComponent vmvc 一个重要的内置关系 单文件组件 步骤


    模块与组件、模块化与组件化

    模块

    1. 什么是模块?向外提供特定功能的js程序,一般就是一个js文件

    2. 为什么要用模块?因为js文件很多很复杂

    3. 有什么作用?复用js,简化js的便携,提高js运行效率

    组件

    1. 什么是组件?实现界面中局部(特定)功能代码资源的集合(代码指html、css、js,资源指mp3、mp4、ttf、zip)

    2. 为什么要用组件?一个界面的功能很复杂

    3. 有什么作用?复用编码,简化项目编码,提高运行效率

    在这里插入图片描述

    模块化

    当应用中的 js 都以模块来编写,那这个应用就是一个模块化的应用

    在这里插入图片描述

    组件化

    当应用中的功能都是多组件的方式来编写的,那这个应用就是一个组件化的应用

    在这里插入图片描述

    非单文件组件

    一个文件中包含有n个组件

    基本使用

    Vue中使用组件的三大步骤

    1. 定义组件(创建组件)
    2. 注册组件
    3. 使用组件(写组件标签)

    一 . 如何定义一个组件?

    使用Vue.extend(options)创建,其中optionsnew Vue(options)时传入的那个options几乎一样,但也有点区别,区别如下:

    1. el不要写,为什么? ——— 最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器。
    2. data必须写成函数,为什么? ———— 避免组件被复用时,数据存在引用关系。

    备注:使用template可以配置组件结构。template 组件模板应该只包含一个根元素
    在这里插入图片描述

    二 . 如何注册组件?

    局部注册:靠new Vue的时候传入components选项
    全局注册:靠Vue.component(‘组件名’,组件)
    在这里插入图片描述

    注意:如果使用全局注册组件的时候记得单独创建vm

    三 . 编写组件标签

    <school></school>
    

    在这里插入图片描述
    全部代码:

        <div id="root">
            <!-- 第三步:编写组件标签 -->
            <hello></hello>
            <xuexiao></xuexiao>
            <hr>
            <xuesheng></xuesheng>
        </div>
    
        <div id="root2">
            <hello></hello>
        </div>
        <script>
            Vue.config.productionTip = false
    
            // 第一步. 创建school组件
            const school = Vue.extend({
                template: `
                <div>
                    <h2>学校名称:{{schoolName}}</h2>
                    <h2>学校地址:{{address}}</h2>
                    <button @click="showName">点我提示学校名字</button>
                </div>
                `,
                // el: '#root',  // 组件定义时,一定不要写el配置项,因为最终所有的组件都要被一个vm管理,由vm决定服务于哪个容器
                data() {
                    return {
                        schoolName: 'zcst',
                        address: '珠海'
                    }
                },
                methods: {
                    showName() {
                        alert(this.schoolName)
                    }
                },
            })
    
            // 创建student组件
            const student = Vue.extend({
                template: `
                <div>
                    <h2>学生姓名:{{studentName}}</h2>
                    <h2>学生年龄:{{age}}</h2>
                </div>
                `,
                data() {
                    return {
                        studentName: '张三',
                        age: 18
                    }
                }
            })
    
            // 创建hello组件
            const hello = Vue.extend({
                template: `
                <div>
                    <h2>你好啊,{{name}}</h2>    
                </div>
                `,
                data() {
                    return {
                        name: 'Tom'
                    }
                }
            })
    
            // 第二步:全局注册组件
            Vue.component('hello', hello);
    
            // 创建vm
            new Vue({
                el: '#root',
                // 第二步. 注册组件(局部注册)
                components: {
                    xuexiao: school,
                    xuesheng: student
                }
            })
    
            // 创建vm
            new Vue({
                el: '#root2',
            })
        </script>
    

    注意点

    关于组件名

    1. 一个单词组成:
      第一种写法(首字母小写):school
      第二种写法(首字母大写):School
    2. 多个单词组成:
      第一种写法(kebab-case命名):my-school
      第二种写法(CamelCase命名):MySchool (需要Vue脚手架支持)
    3. 备注:
      (1) 组件名尽可能回避HTML中已有的元素名称,例如:h2H2都不行。
      (2) 可以使用name配置项指定组件在开发者工具中呈现的名字。
      在这里插入图片描述

    关于组件标签

    第一种写法:<school></school>
    第二种写法:<school/>
    在这里插入图片描述
    一个简写方式

    const school = Vue.extend(options) 可简写为:const school = options

    备注:Vue会帮你判断是否有写extend方法,没有会帮你调一个

    组件的嵌套

    <app>用来管理所有组件(规范写法)
    app 一人之下(root)万人之上

    如果要在组件里面再注册一个组件,这个子组件要在父组件的前面定义(创建),注意先后顺序

    在这里插入图片描述

        <div id="root">
            <app></app>
        </div>
    
        <script>
            Vue.config.productionTip = false
    
            // 定义student组件
            const student = Vue.extend({
                template: `
                    <div>
                        <h2>学生姓名:{{name}}</h2>
                        <h2>学生年龄:{{age}}</h2>
                    </div>
                `,
                data() {
                    return {
                        name: '张三',
                        age: 18,
                    }
                }
            })
    
    
            // 定义school组件
            const school = Vue.extend({
                template: `
                    <div>
                        <h2>学校名称:{{name}}</h2>
                        <h2>学校地址:{{address}}</h2>
                        <student></student>
                    </div>
                `,
                data() {
                    return {
                        name: 'zcst',
                        address: '珠海',
                    }
                },
                // 注册组件(局部)
                components: {
                    student
                }
            })
    
            // 定义hello组件
            const hello = Vue.extend({
                template: `<h1>{{msg}}</h1>`,
                data() {
                    return {
                        msg: '好困啊....'
                    }
                }
            })
    
            // 定义app组件
            const app = Vue.extend({
                template: `
                <div>
                    <hello></hello>
                    <school></school>
                </div>
                `,
                components: {
                    hello,
                    school
                }
            })
    
            // 创建vm
            new Vue({
                el: '#root',
                // 注册组件(局部)
                components: {
                    app
                }
            })
        </script>
    

    VueComponent

    1. school组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的。
      在这里插入图片描述

    2. 我们只需要写<school></school><school/>,Vue解析时会帮我们创建school组件的实例对象,即Vue帮我们执行的:new VueComponent(options)

    3. 特别注意:每次调用Vue.extend,返回的都是一个全新的VueComponent!!!!

    4. 关于this指向:
      (1)组件配置中:
      data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
      (2)new Vue(options)配置中:
      data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象(vm)】。

    5. VueComponent的实例对象,以后简称vc(也可称之为:组件实例对象)。
      Vue的实例对象,以后简称vm

    vm和vc

    1. vc有的功能,vm都有,但是vm有的一个功能,vc没有
    2. vm能够通过el决定能为哪个容器服务
    3. vm 可以 管理着 多个vc
    4. vc是个小型的vm
    5. 另外,vcdata必须写成函数形式data(){}在这里插入图片描述

    一个重要的内置关系

    1. 一个重要的内置关系:VueComponent.prototype.__proto__ === Vue.prototype(组件的原型的原型是Vue的原型)
    2. 为什么要有这个关系:让组件实例对象(vc)可以访问到 Vue原型上的属性、方法。(让Vue的原型对象兜底,如果连Vue的原型对象都没有的话,就去找Object的原型对象)

    在这里插入图片描述

    单文件组件

    一个文件中只包含1个组件

    代码要有高亮,可以用这个插件,但是template里面要有个div,否则会报错
    在这里插入图片描述
    安装后快捷键是<v然后回车,可以快速出来
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述

    步骤

    创建组件
    组件的命名为:
    schoolmy-school
    School MySchool 最好选择这种
    在这里插入图片描述
    组件导出
    在这里插入图片描述
    引入到App.vue
    在这里插入图片描述
    引入到main.js里面
    在这里插入图片描述
    这里还没有创建容器,去index.html里面创建容器

    引入到index.html 创建容器
    在这里插入图片描述

    打开后发现无法显示,这因为浏览器不支持es6的模块化语法,此时就需要搭建脚手架环境

    展开全文
  • Vue学习笔记(二)组件化模块化前言组件化模块化什么是模块化es5模块化解决方案es6模块化解决方案 前言 本章记录一下vue的组件化模块化,这是vue比较重要的知识点。会在实际开发中大量的使用到,因此,会比较...

    前言

    本章记录一下vue的组件化和模块化,这是vue比较重要的知识点。会在实际开发中大量的使用到,因此,会比较详细的记录。
    如需转载,请标明出处。
    若发现问题,还望指正。

    组件化

    什么是组件化

    组件化是一种思想,将一个复杂的页面分解成多个小的组件,每个组件都是独立的个体,互不影响,这样管理和维护起来就非常的容易。
    组件化也是vue.js中重要的思想。
    1、它提供了一种抽象,我们开发出一个个的组件来构成我们的应用。
    2、每一个应用都可以抽象成一颗组件树。

    1、基础使用

    分为三个步骤:创建组件构造器 -> 注册组件 -> 使用组件

        <div id="app">
            <!-- 步骤三:使用组件 -->
            <cpn></cpn>
        </div>
        <script src="../js/vue.js"></script>
        <script>
            // 步骤一:创建组件构造器
            const comp = Vue.extend({
                template: '<div>这是组件</div>'
            });
            // 步骤二:注册组件
            Vue.component('cpn', comp);
            const app = new Vue({
                el: '#app'
            });
        </script>
    

    注意:前两个步骤必须放在创建vue实例之前,否者无效。
    组件必须挂载在某个vue实例下,否者无效。

    2、全局组件和局部组件

    如上的使用方式即为全局组件的使用,它可以在任何的vue实例下使用,然后平时开发时通常都是使用局部组件。
    局部组件的使用如下,在需要的vue中添加属性components,并进行注册,此时,只有在该vue实例里是可以使用该组件,其他地方皆不可使用。

        <div id="app">
            <!-- 步骤三:使用组件 -->
            <cpn></cpn>
        </div>
        <script src="../js/vue.js"></script>
        <script>
            // 步骤一:创建组件构造器
            const comp = Vue.extend({
                template: '<div>这是组件2</div>'
            });
            // 步骤二:注册组件
            // Vue.component('cpn', comp);
            const app = new Vue({
                el: '#app',
                components: {
                    //cpn:组件的标签名
                    //创建的组件名。步骤一的对象
                    cpn: comp
                }
            });
    

    3、语法糖和模板抽离

    我们实际开发时是不会如上的方式去开发的,过于复杂了,我们会将代码进行简化,因为比较简单,此处直接上代码。

        <div id="app">
            <cpn></cpn>
        </div>
        <template id="mytemp">
            <div>
                我是组件
            </div>
        </template>
    
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app',
                components: {
                    cpn: {
                        template: '#mytemp'
                    }
                }
            });
        </script>
    

    模板抽离除了这种方式,还可以使用script标签的方式,此处不详细说明。
    template标签里必须有且只有一个根标签

    4、组件的data为什么是函数

    本来是记住的,但是记录的时候就又忘记了,因此这里记录下来。
    组件,是会复用的,如果将data设计成属性,那么,他们将指向同一个对象,一旦一个地方改变,复用的地方都会改变,这是有问题的。
    如果设计成函数,函数是有作用域,因此每个组件都有自己的作用域,返回的都是自己的对象。不会影响其他组件的值。

    5、父子组件

    5.1 父子组件

    父子组件即父组件和子组件,当一个组件在另一个组件里时,外层的组件即为里层组件的父组件,里层组件为子组件
    vue实例为root组件,即根组件,也是它里面组件的父组件。

    5.2 父子组件通信

    5.2.1 父传子值

    父传子值主要使用到了props属性,它是一个数组,里面每一个值都是字符串,如下。props里的值为val,在父组件里使用时,需要用到v-bind。

        <div id="app">
            <cpn :val='vals'></cpn>
        </div>
        <template id="mytemp">
            <div>
                我是组件 {{val}}
            </div>
        </template>
    
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    vals: '这是父传子值'
                },
                components: {
                    cpn: {
                        template: '#mytemp',
                        props: ['val']
                    }
                }
            });
        </script>
    

    5.2.2 子传父值

    需要注意两点:
    1、按钮上的属性是@click,而非@onclick
    2、this.$emit(‘bclick’, “hello”)需要加this

    <div id="app">
            <cpn @bclick="btnClick"></cpn>
        </div>
        <template id="mytemp">
            <div>
                我是组件
                <button @click="ccc">按钮</button>
            </div>
        </template>
    
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    vals: '这是父传子值'
                },
                methods: {
                    btnClick(val) {
                        console.log(val);
                    }
                },
                components: {
                    cpn: {
                        template: '#mytemp',
                        methods: {
                            ccc() {
                                this.$emit('bclick', "hello")
                            }
                        }
                    }
                }
            });
        </script>
    

    5.2.3 父访问子

    父组件访问子组件的内容,如方法、属性等。
    children:

    children这个很少使用,通常我们获取子组件的内容不使用它,一般在获取所有子组件时才使用

    <div id="app">
            <button @click="btnClick">父访问子</button>
            <cpn></cpn>
        </div>
        <template id="mytemp">
            <div>
                我是组件
            </div>
        </template>
    
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    vals: 'parent'
                },
                methods: {
                    btnClick(val) {
                        console.log(this.$children[0].va);
                        this.$children[0].ccc();
                    }
                },
                components: {
                    cpn: {
                        template: '#mytemp',
                        data() {
                            return {
                                va: 'son'
                            }
                        },
                        methods: {
                            ccc() {
                                console.log("this is child");
                            }
                        }
                    }
                }
            });
        </script>
    
    son
    this is child
    

    这里打印出this.$children[0]的值可见子组件的内容。如下
    在这里插入图片描述

    refs:
    既然不适用children,那么肯定有其他的代替,没错,就是refs,它的使用可以规避掉children的弊端(children需要下标去获取对应的组件,一旦动态改变的组件的顺序等就无法准确获取到相应的子组件)。
    它的使用需要在父组件的子组件标签中添加ref=“”的属性,类似于id的意思,需要唯一。然后再通过this.$refs获取对应的子组件。

    <div id="app">
            <button @click="btnClick">按钮</button>
            <cpn></cpn>
            <cpn ref="aa"></cpn>
            <cpn ref="bb"></cpn>
        </div>
        <template id="mytemp">
            <div>
                我是组件
    
            </div>
        </template>
    
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    vals: 'parent'
                },
                methods: {
                    btnClick() {
                        this.$refs.aa.c1();
                    }
                },
                components: {
                    cpn: {
                        template: '#mytemp',
                        data() {
                            return {
                                va: 'son'
                            }
                        },
                        methods: {
                            c1() {
                                console.log("子组件1");
                            },
                            c2() {
                                console.log("子组件2");
                            },
                            c3() {
                                console.log("子组件3");
                            }
                        }
                    }
                }
            });
        </script>
    

    5.2.4 子访问父

    子组件访问父组件的内容,如方法、属性等。
    子访问父可以使用 p a r e n t ,它的使用与 parent,它的使用与 parent,它的使用与children类似。这里就不再赘述。并且它使用的很少,因为如果使用了它就意味着于父组件的耦合度高了,不利于开发。
    还有另一个属性$root,它可以获取到顶级父元素,也就是vue实例的内容。不过它同样使得的比较少,此处也不再多说。

    6、插槽slot

    6.1 插槽的基本使用

    6.1.1 插槽的使用

    以前的代码是不具备扩展的,但是有了插槽就不一样了,可以很好的扩展,也可以很好的自定义。
    在子组件需要扩展的地方使用上slot,然后在父组件的子组件标签中写入需要的内容即可。

    <div id="app">
            <cpn><button>按钮</button></cpn>
            <cpn><span>嘿嘿</span></cpn>
            <cpn><i>hhha</i></cpn>
        </div>
        <template id="mytemp">
            <div>
                我是组件
                <slot></slot>
            </div>
        </template>
    
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app',
                components: {
                    cpn: {
                        template: '#mytemp'
                    }
                }
            });
        </script>
    

    6.1.2 插槽的默认值

    如果插槽里有很多地方都需要使用相同的内容,此时我们就可使用默认值,那么不使用默认值的地方加入新内容即可,其他需要就可以不写内容了。

    <div id="app">
            <cpn></cpn>
            <cpn><span>嘿嘿</span></cpn>
            <cpn><i>hhha</i></cpn>
        </div>
        <template id="mytemp">
            <div>
                我是组件
                <slot><button>按钮</button></slot>
            </div>
        </template>
    

    6.1.3 多个值替换插槽

    如果需要插入多个标签的内容,也是可以的,他会直接将这些内容整体替换。

    <div id="app">
            <cpn></cpn>
            <cpn>
                <span>嘿嘿</span>
                <b>呵呵呵呵呵呵</b>
                <span>哈哈</span>
            </cpn>
            <cpn><i>hhha</i></cpn>
        </div>
        <template id="mytemp">
            <div>
                我是组件
                <slot><button>按钮</button></slot>
            </div>
        </template>
    

    6.2 具名插槽

    说简单点,就是给插槽取个名字,使用的时候指明替换哪一个,例如导航组件部分,html内容部分如下。

        <div id="app">
            <cpn><button slot="center">替换</button></cpn>
        </div>
        <template id="mytemp">
            <div>
                <slot name="left"><button></button></slot>
                <slot name="center"><button></button></slot>
                <slot name="right"><button></button></slot>
            </div>
        </template>
    

    6.3 作用域插槽

    **slot-scope: **被废弃了,但是也能使用
    组件是有作用域的,父子之间也是可以进行通信的。
    使用插槽的时候也会涉及到作用域。当父组件需要使用子组件的值时,需要将值抛出,父组件通过slot-scope进行获取。下面的方式可能有些过时,如下。

    <div id="app">
            <cpn></cpn>
            <cpn><!--这种方式最后一项会多一个分隔符出来-->
                <div slot-scope="slot2">
                    <span v-for="item in slot2.data">{{item}} </span>
                </div>
            </cpn>
            <cpn><!--join()就可以规避上面那种的问题-->
                <div slot-scope="slot3">
                    <span>{{slot3.data.join(" - ")}}</span>
                </div>
            </cpn>
        </div>
        <template id="mytemp">
            <div>
                <slot :data="comics">
                    <ul>
                        <li v-for="item in comics">{{item}}</li>
                    </ul>
                </slot>
            </div>
        </template>
    
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app',
                components: {
                    cpn: {
                        template: '#mytemp',
                        data() {
                            return {
                                comics: ['斗破苍穹', '斗罗大陆', '灵笼', '完美世界', '雾山五行', '吞噬星空']
                            }
                        }
                    }
                }
            });
        </script>
    

    在这里插入图片描述
    **v-slot:**新版本使用

    <div id="app">
            <cpn>
                <template v-slot:default="slot2"><!--此处必须是template,否者无效-->
                    <span>{{slot2.data}} </span>
                </template>
            </cpn>
        </div>
        <template id="mytemp">
            <div>
                <slot :data="comics">
                    <ul>
                        <li v-for="item in comics">{{item}}</li>
                    </ul>
                </slot>
            </div>
        </template>
    

    独占默认插槽的缩写语法:
    在上述情况下,当被提供的内容只有默认插槽时,组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot 直接用在组件上:

    	<div id="app">
            <cpn v-slot:default="slot2">
                <span>{{slot2.data}} </span>
            </cpn>
        </div>
    

    这种写法还可以更简单。就像假定未指明的内容对应默认插槽一样,不带参数的 v-slot 被假定对应默认插槽:

    	<div id="app">
            <cpn v-slot="slot2">
                <span>{{slot2.data}} </span>
            </cpn>
        </div>
    

    只要出现多个插槽,请始终为所有的插槽使用完整的基于 的语法:也就是简写前的方式

    模块化

    背景:JavaScript设计初期只是实现简单的页面交互逻辑,当时的js代码直接写在script标签里。但是随着各方面的发展,很多后端的业务逻辑交给了前端完成,比如表单验证等,特别是随着ajax的广泛应用,前端的代码量迅速增长,使得不能使用原来的方式,这时,大量的js代码放入了js文件中,通过外部引入进html中,但是也会出现一些问题,比如命名问题,数据共享等,模块化就应运而生。

    什么是前端模块化

    将一个复杂的程序依据一定的规范封装成多个部分(文件),每个部分的内部数据和实现都是独立的,对外暴露一部分内容供其他部分调用。

    es5模块化解决方案

    在es5(ECMAScript第五个版本)中,为了解决作用域的问题,很多时候我们都是通过闭包的形式。但是,使用闭包也会有它的问题,比如,一个js文件确实需要用到另一个js里的变量、函数等。不重写几乎是用不到的。因为此时每个js都是一个独立的作用域,无法相互使用。
    我们会通过返回对象、再调用的方式去解决。如下。
    a.js

    var module1 = (function () {
        let obj = {}
        let name = '张三'
    
        obj.name = name
    
        return obj
    })()
    

    c.js

    (function () {
        console.log(module1.name);
    })()
    

    此处需要注意的是module1 不能重复,每一个模块使用唯一的名称

    es6模块化解决方案

    到了es6(ECMAScript第六个版本),自带了模块化。只需在html引用js时添加属性type=“module”,并在js使用export和import完成。

    	<script src="./a.js" type="module"></script>
        <script src="./c.js" type="module"></script>
    

    a.js

    let name = '张三'
    export {
        name
    }
    

    c.js

    import { name } from './a.js'
    console.log(name);
    

    export不仅可以导出变量,还可以将函数、类等导出,并且还能不在最后导出,声明时就导出。如下

    export function sum(num1,num2){
        return num1 + num2
    }
    

    联系题

    1、完成如下功能。
    在这里插入图片描述
    2、加强功能,未完待续

    展开全文
  • 将一个大的js拆分成多个小的js以实现模块化组件是实现应用中功能的集合 :html、css、js :mp3 mp4 ttf .zip :将所有功能写在一个组件中是没有意义的所以要分开写。组件的作用:复用编码,简化项目编码,提高运行...

    为什么使用组件化开发

    传统的编写模式

    在这里插入图片描述

    组件化的编写模式

    每个组件拥有自己的html片段(不是完整的html),css和js
    在这里插入图片描述

    • 所有组件都有vm进行指挥
    • 组件也可以嵌套
      在这里插入图片描述

    几个定义

    模块

    模块定义:模块即向外提供特定功能的js程序,一般一个模块就是一个js文件
    模块作用: 复用js,简化js的编写,提高js运行效率

    模块化

    当应用中的js都以模块来编写的,那这个应用就是一个模块化的应用。
    将一个大的js拆分成多个小的js以实现模块化

    组件的定义

    组件是实现应用中局部功能代码资源的集合
    代码:html、css、js
    资源:mp3 mp4 ttf .zip
    局部:将所有功能写在一个组件中是没有意义的所以要分开写。

    组件的作用:复用编码,简化项目编码,提高运行效率

    组件化

    当应用中的功能都是多组件的方式来编写的,那这个应用就是一个组件化的应用。
    将应用按功能点拆分,一个功能就是一个组件。
    组件中的js也可以拆分成多个js,实现js的模块化。

    组件的编写

    非单文件组件

    一个文件中包含有n个组件。
    一个html文件中可以包含多个组件
    组建的编写需要分成3步:创建组件、注册组件

    创建组件

    使用Vue.extend({配置对象})创建,其中配置对象和new Vue(options)时传入的那个options几乎一样,但也有点区别。
    区别如下:

    • el不要写。最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器。
      组件就是一块砖,哪里需要哪里搬
    • data必须写成函数。避免组件被复用时,数据存在引用关系。
      即如果data是一个配置对象,那么如果该组件被多个html引用,那么多个html的该组件的data是指向同一个对象的,则只要一个html改变data值,其他所有的html页面的该data值也改变,这样不好。

    定义组件时,要把组件中html对应的内容写在template中。使用template配置组件结构。

    eg:

    //   创建school组件
          const school = Vue.extend({
            //     el: "#root",不要写el配置项,由vm决定该组件给谁用
            data() {
              return {
                schoolName: "nefu",
                address: "哈尔滨",
              };
            },
            template: `
            <div>
                <h2>学校名字:{{schoolName}}</h2>
                <h2>地址:{{address}}</h2>
            </div>`,
          });
    

    注册组件

    注册局部组件

    在vue实例中注册组件,靠new Vue的时候传入components选项

    new Vue({
              components:{
    				组件名:定义的组件
              }
            });
    

    eg:

            const vm = new Vue({
              el: "#root",
              components:{
                school:school
              }
            });
    

    注册全局组件

    局部注册是说,只有在vue实例中注册该组件,才能使用该组件,不注册就不能使用。
    那如何不在vue实例中注册就可以使用组件呢?——全局注册
    全局注册靠Vue.component('组件名',组件位置)

    eg:

     Vue.component("school", school);
    

    使用组件

    在html中编写组件标签<school></school>

    <div id="root">
            <school></school>
    </div>
    

    例子

    局部注册:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script type="text/javascript" src="../js/vue.js"></script>
      </head>
      <body>
        <div id="root">
            <school></school>
          <hr />
          <student></student>
        </div>
    
        <script type="text/javascript">
          Vue.config.productionTip = false;
          //   创建school组件
          const school = Vue.extend({
            //     el: "#root",不要写el配置项,由vm决定该组件给谁用
            data() {
              return {
                schoolName: "nefu",
                address: "哈尔滨",
              };
            },
            template: `
            <div>
                <h2>学校名字:{{schoolName}}</h2>
                <h2>地址:{{address}}</h2>
            </div>`,
          });
    
          const student = Vue.extend({
            //     el: "#root",不要写el配置项,由vm决定该组件给谁用
            data() {
              return {
                studentName: "🐏",
                age: 18,
              };
            },
            template: `
            <div>
                <h2>名字:{{studentName}}</h2>
                <h2>年龄:{{age}}</h2>
            </div>`,
            
          });
    
    
            const vm = new Vue({
              el: "#root",
            //   第二步,注册组件
              components:{
                school:school,
                student:student,
              }
            });
        </script>
      </body>
    </html>
    
    

    在这里插入图片描述
    全局注册:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script type="text/javascript" src="../js/vue.js"></script>
      </head>
      <body>
        <h2>实例1:</h2>
        <div id="root">
          <school></school>
          <hr />
          <student></student>
        </div>
        <h2>实例2:</h2>
        <div id="root2">
          <school></school>
          <hr />
          <student></student>
        </div>
        <script type="text/javascript">
          Vue.config.productionTip = false;
          //   创建school组件
          const school = Vue.extend({
            //     el: "#root",不要写el配置项,由vm决定该组件给谁用
            data() {
              return {
                schoolName: "nefu",
                address: "哈尔滨",
              };
            },
            template: `
            <div>
                <h2>学校名字:{{schoolName}}</h2>
                <h2>地址:{{address}}</h2>
            </div>`,
          });
    
          const student = Vue.extend({
            //     el: "#root",不要写el配置项,由vm决定该组件给谁用
            data() {
              return {
                studentName: "🐏",
                age: 18,
              };
            },
            template: `
            <div>
                <h2>名字:{{studentName}}</h2>
                <h2>年龄:{{age}}</h2>
            </div>`,
          });
    
          //   第二步,注册组件(全局注册)
          Vue.component("school", school);
          Vue.component("student", student);
    
          const vm = new Vue({
            el: "#root",
            //   第二步,注册组件
            //   components:{
            //     school:school,
            //     student:student,
            //   }
          });
          new Vue({
            el: "#root2",
          });
        </script>
      </body>
    </html>
    
    

    在这里插入图片描述
    vue开发者工具
    在这里插入图片描述
    组件的名称在vue开发者工具中首字母自动变成大写

    单文件组件

    一个文件中只包含有1个组件。

    • 该文件名的后缀就是.vue
    • .vue文件格式
    <template>
    <!-- 组件的结构 -->
    </template>
    <script>
    // 组件交互的代码(数据、方法)
    </script>
    <style>
    /* 组建的样式 */
    </style>
    
    • 组件一般需要暴露出去
    • 可以将Vue.extend()省略,直接将组件的配置对象暴露出去
      eg:
    // 组件交互的代码(数据、方法),相当于非单文件中的除了template的配置
    <script>
    // export default Vue.extend(
    // {
    //     name:'School',
    //     data() {
    //     },
    // })
    export default {
        name:'School',
        data() {
        },
    }
    </script>
    

    单文件组件的编写

    • 先编写一个组件School组件
      School.vue
    <template>
        <!-- 组件的结构,相当于非单文件中的  template配置-->
        <div class="demo">
            <h2>学校名字:{{schoolName}}</h2>
            <h2>地址:{{ address }}</h2>
        </div>
    </template>
    <script>
    // 组件交互的代码(数据、方法),相当于非单文件中的除了template的配置
    export default {
        name:'School',
        data() {
            return {
                schoolName: "nefu",
                address: "哈尔滨",
            };
        },
    }
    
    </script>
    <style>
    
    /* 组建的样式 */
    .demo{
        background: orangered;
    }
    </style>
    
    • 定义app.vue汇总所有的组件
      app.vue的作用:
      在这里插入图片描述
      app.vue:
    <template>
        <div>
            <School></School> 
            <Student></Student>
        </div>
    </template>
    
    <script>
        //引入组件
        import School from './School'
        import Student from './Student' 
        export default {
            name: 'App',
            components: {
                    School,
                    Student
                }
            }
    </script>
    
    <style>
    
    </style>
    
    • 创建vm
      在main.js中创建 vue实例对象
      main.js
    import App from './App.vue'
    
    new Vue({
        el: "#root",
        // template:`<App></App>`,
        components:{App}
    })
    
    • 创建容器
      创建index.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div id="#root">
            <App></App>
        </div>
        <!-- 引入vue -->
        <script type='text/javascript' src='../../js/vue.js'></script>
        <!-- 引入main.js -->
        <script type='text/javascript' src='./main.js'></script>
    </body>
    </html>
    

    这样就完成了一个单文件组件的编写。
    单文件组件的目录结构:
    在这里插入图片描述

    脚手架概念引入

    .vue文件在浏览器是不能直接解析的,需要编译加工成.js文件。编译的方法有两种:一种是通过webpack等工具我们手动编译,另一种方式是利用vue提供给我们的脚手架进行编译(对webpack等工具的封装),我们一般采取脚手架方式。

    组件的注意点

    组件名

    • 一个单词的组件名:都小写,或者首字母大写。
      eg:school,School
    • 多个单词组成:都小写(当成一个单词处理),或者使用'单词-单词'的格式
      eg:
              components:{
                'my-school':school,
              }
    

    vue开发者工具:
    在这里插入图片描述
    也可以使用大驼峰式直接为组件命名,但是有一个前提是使用脚手架。

    • 组件名尽可能回避HTML 中已有的元素名称,例如: h2、H2都不行。
    • 可以使用name配置项在组件定义时指定组件在开发者工具中呈现的名字
      eg:
    const school = Vue.extend({
            name: "xuexiao",
            data() {
              return {
                schoolName: "nefu",
                address: "哈尔滨",
              };
            },
            template: `
            <div>
                <h2>学校名字:{{schoolName}}</h2>
                <h2>地址:{{address}}</h2>
            </div>`,
          });
    

    在这里插入图片描述

    组件标签

    第一种写法:<school></school>
    第二种写法: <school/>
    备注:不用使用脚手架时,<school/>会导致后续组件不能渲染。

    组件定义的简写

    一个简写方式:
    const school = Vue.extend(options)可简写为:const school = options

    组件的嵌套

    基本嵌套

    组件中还可以定义组件以实现组件的嵌套。
    如在school中嵌套student只需在school中定义components配置项,里面配置student组件,
    同时student组件的使用也需要在school的 template中使用。

    eg:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script type="text/javascript" src="../js/vue.js"></script>
      </head>
      <body>
        <div id="root">
          <h2>欢迎</h2>
          <school></school>
        </div>
        <script type="text/javascript">
          Vue.config.productionTip = false;
            //   创建student组件
          const student = Vue.extend({
            data() {
              return {
                studentName: "yang",
                age: "18",
              };
            },
            template: `
            <div>
                <h2>学校名字:{{studentName}}</h2>
                <h2>地址:{{age}}</h2>
            </div>`,
          });
    
    
          //   创建school组件
          const school = Vue.extend({
            data() {
              return {
                schoolName: "nefu",
                address: "哈尔滨",
              };
            },
            template: `
            <div>
                <h2>学校名字:{{schoolName}}</h2>
                <h2>地址:{{address}}</h2>
                <student></student>
            </div>`,
            components:{
                student: student,
            }
          });
          
          const vm = new Vue({
            el: "#root",
            data: {
              msg: "欢迎!",
            },
            //   第二步,注册组件
            components: {
              school: school,
            },
          });
          new Vue({
            el: "#root2",
          });
        </script>
      </body>
    </html>
    
    

    在这里插入图片描述
    在这里插入图片描述

    app组件

    app组件用于管理所有组件,app组件和vm的关系
    在这里插入图片描述
    VM只需管理app一个组件,由app管理所有组件。
    app组件:一人之下万人之上。

    eg:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script type="text/javascript" src="../js/vue.js"></script>
      </head>
      <body>
        <div id="root">
           <app></app>
        </div>
        <script type="text/javascript">
          Vue.config.productionTip = false;
            //   创建student组件
          const student = Vue.extend({
            data() {
              return {
                studentName: "yang",
                age: "18",
              };
            },
            template: `
            <div>
                <h2>学校名字:{{studentName}}</h2>
                <h2>地址:{{age}}</h2>
            </div>`,
          });
    
    
          //   创建school组件
          const school = Vue.extend({
            data() {
              return {
                schoolName: "nefu",
                address: "哈尔滨",
              };
            },
            template: `
            <div>
                <h2>学校名字:{{schoolName}}</h2>
                <h2>地址:{{address}}</h2>
                <student></student>
            </div>`,
            components:{
                student: student,
            }
          });
    
          //   创建hello组件
          const hello = Vue.extend({
            data() {
              return {
                hello:"hello,你好"
              };
            },
            template: `
            <div>
                <h2>{{hello}}</h2>
            </div>`,
            components:{
                student: student,
            }
          });
    
          //   创建app组件
          const app = Vue.extend({
            template: `
            <div>
                <hello></hello>
                <school></school>
            </div>
          `,
            components: {
              school:school,
              hello:hello,
            },
    
            })
          
          const vm = new Vue({
            el: "#root",
            data: {
              msg: "欢迎!",
            },
            //   第二步,注册组件
            components: {
                // 简写
              app
            },
          });
          new Vue({
            el: "#root2",
          });
        </script>
      </body>
    </html>
    
    

    在这里插入图片描述

    VueComponent

    组件是什么数据类型的呢?是一个名为VueComponent的构造函数。

     const school = Vue.extend({
       data() {
         return {
           schoolName: "nefu",
           address: "哈尔滨",
         };
       },
       template: `
       <div>
           <h2>学校名字:{{schoolName}}</h2>
           <h2>地址:{{address}}</h2>
       </div>`,
     });
     console.log(school);
    

    在这里插入图片描述

    • 组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue .extend生成的。
    • 我们只需要写<school/><school></school>,Vue解析时会帮我们创建school组件的实例对象,即vue帮我们执行的:new VueComponent(options)。options就是我们在组件中写的配置对象。
    • 特别注意:每次调用Vue.extend,返回的都是一个全新的VueComponent!!!
      验证:
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script type="text/javascript" src="../js/vue.js"></script>
      </head>
      <body>
        <div id="root">
          <school></school>
          <hello></hello>
        </div>
    
        <script type="text/javascript">
          Vue.config.productionTip = false;
          //   创建school组件
          const school = Vue.extend({
            data() {
              return {
                schoolName: "nefu",
                address: "哈尔滨",
              };
            },
            template: `
            <div>
                <h2>学校名字:{{schoolName}}</h2>
                <h2>地址:{{address}}</h2>
            </div>`,
          });
          //   创建school组件
          const hello = Vue.extend({
            data() {
              return {
                hello:"你好呀"
              };
            },
            template: `
            <div>
                <h2>{{hello}}</h2>
            </div>`,
          });
    
          console.log(school===hello);
    
          const vm = new Vue({
            el: "#root",
            //   第二步,注册组件
            components: {
              school: school,
              hello:hello,
            },
          });
        </script>
      </body>
    </html>
    
    
       console.log(school===hello);
    

    输出:
    在这里插入图片描述

    组件中this指向

    (1)组件配置中:
    data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【VueComponent实例对象】
    (2)new Vue(options)配置中:
    data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【Vue实例对象】

    VueComponent实例对象(vc)的功能和Vue实例(vm)很像,也有数据代理、生命周期,数据监测,参数的配置项也很相似。
    但是二者是不同的:1. vm可以指定el,而vc不可以; 2. data定义的区别。
    vm得功能>=vc

    VueComponent的实例对象,简称vc(也可称之为:组件实例对象)。.
    Vue的实例对象,简称vm.
    vm管理着一个个vc。

    在这里插入图片描述

    一个重要的内置关系

    一个重要的内置关系:VueComponent.prototype._proto_ === Vue.prototype.

    • 根据原型链的知识,可以理解vue和VueComponent的如下原型关系
      在这里插入图片描述

    • 但是VueComponent将原型链做如下修改VueComponent.prototype._proto_ === Vue.prototype.,即:
      在这里插入图片描述
      这样做的目的是:让组件实例对象(vc)可以访问到 Vue原型上的属性、方法

    • 这样在Vue的原型对象上定义一个属性,vueComponent实例对象可以通过原型链访问到。
      eg:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script type="text/javascript" src="../js/vue.js"></script>
      </head>
      <body>
        <div id="root">
          <school></school>
        </div>
    
        <script type="text/javascript">
          Vue.config.productionTip = false;
          Vue.prototype.x = 10
    
          const school = Vue.extend({
            data() {
              return {
                schoolName: "nefu",
                address: "哈尔滨",
              };
            },
            template: `
            <div>
                <h2>学校名字:{{schoolName}}</h2>
                <h2>地址:{{address}}</h2>
                <h2>Vue.prototype上的x:{{x}}</h2>
            </div>`,
          });
          const vm = new Vue({
            el: "#root",
            components: {
              school: school,
            },
          });
        </script>
      </body>
    </html>
    
    

    在这里插入图片描述

    展开全文
  • 我们前面学习很多关于 vue 的知识了,下面让我们来学习 vue 中一个重要的知识点——组件。这篇文章我们就来看看组件到底是什么吧。
  • 组件化和模块化区别

    千次阅读 2019-10-28 17:14:20
    组件一般用于前端,模块化在后台运用的比较多。例如vue中的组件,主要是为了拆分vue实例的代码量,让我们可以以不同的组件来划分不同的功能模块,将来我们需要什么样的功能,就直接调用对应的组件即可。 区别: ...
  • 什么是组件化:组件的出现,就是为了拆分Vue实例的代码量的, 能够让我们以不同的组件来划分不同的功能模块,将来我么需要什么样的功能, 就可以直接取调用对用的组件即可, UI组件 组件化模块化的不同 模块化...
  • 基于 Vue模块化/组件化/工程化编码应用例子
  • AT-UI 是一款基于 Vue.js 2.0 的轻量级、模块化前端 UI 组件库,主要用于快速开发 PC 网站产品。 专门为桌面应用程序构建,AT-UI 提供了一套 npm + webpack + babel 前端开发工作流程,以及一个体面的干净整洁的 UI ...
  • 什么是组件化 ... 组件化Vue.js中的重要思想 它提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用 任何的应用都会被抽象成一颗组件树 组件化思想的应用:
  • Vue 组件化开发

    千次阅读 2021-12-07 00:21:40
    模块化(组件化)开发 按照功能(或按照复用性)把一个页面拆成各个板块(模块),每一个模块都是一个单独的文件(单独的组件),最后把各个模块(组件)拼在一起即可!! 目的 :方便团队协作开发 实现复用 组件分类 功能型...
  • Vue全局组件教程Vue 组件的出现,就是为了拆分Vue 组件系统是 Vue 的一个重要概念,因为它是一种抽象,允许我们使用小型、独立通常可复用的组件构建...组件化和模块化区别组件化是从 UI 界面的角度进行划分的。...
  • 面试官:谈一下你对Vue组件化的理解

    千次阅读 多人点赞 2022-03-20 21:27:52
    假设说采取传统开发网页的方式去开发一个系统,在一定程度上,会...为了避免这些弊端可以采取组件化设计去开发一个多人协作、功能又较多的项目,组件化开发带来的可维护性和可复用性可以提升开发效率、降低代码耦合度。
  • vue组件化开发

    2022-01-27 17:32:05
    使用组件的好处 组件是可以复用性的 易于维护 有封装性,易于使用 大型项目中降低组件之间重复性 父传子 <!-- 父组件 --> <template> <div> <my-child :parentMessage="parentMessage">&...
  • 总结Vue第三天:模块化和webpack模块化打包
  • vue作为当前最流行的前端框架,随着更新迭代,组件化和模块化思想就成为了主流。 有关模块化: 1.代码重用时,引入js文件的数目可能少了,避免来代码的累赘。 2.代码复用高,开发效率也会提高。 3.方便后期的维护。 ...
  • 模块化、webapck中配置Vue和Vue组件化开发引入
  • Vue模块化和组件的理解

    千次阅读 2020-03-04 19:33:57
    模块化和组件的概念理解
  • 前端工程化包含这么四个方针:模块化组件化、规范化、自动化 具体可以查看:了解前端工程化 其中就有我们的组件化 ,它指的就是根据封装这么一个思想概念,将页面上可以重复使用的UI结构封装为组件,也叫做复用...
  • 组件化和模块化有什么区别? 看图哈 关系以及映射关系 1、什么是组件模块 1.1组件:把重复的代码提取出来合并成为一个个组件,组件最重要的就是重用(复用),位于框架最底层,其他功能都依赖于组件,可供不同...
  • Vue-组件化

    2022-02-27 15:13:56
    Vue-组件化一、定义vue组件二、 全局组件定义的三种方式1、使用vue.extend 来创建全局的vue组件2、直接...组件化和模块化的不同: 模块化:从代码逻辑的角度进行划分;方便代码分层开发,保证功能模块职能单一 组件化
  • Nuxt的模块化蚂蚁设计Vue 具有来自Ant Design Vue的基本布局(仪表板) 构建设置 # install dependencies $ yarn install # serve with hot reload at localhost:3000 $ yarn dev # build for production and ...
  • Vue组件化编程

    万次阅读 多人点赞 2022-07-08 10:22:21
    Vue组件化
  • 在复杂页面的开发中,内容比较多,所以我们需要将它们分模块,这样也...在components目录下建立一个topmenu子目录,在这个子目录下分别建立index.jstopmenu.vue两个文件;2.在topmenu.vue文件中输入以下内容:topm...
  • 最全、最详细Vue入门到精通系列文章,持续更新中
  • Vue 组件化编程、VueComponent实例对象

    千次阅读 2021-12-17 17:22:20
    文章目录模块与组件、模块化组件化非单文件组件单文件组件 模块与组件、模块化组件化 模块: 理解: 向外提供特定功能的 js 程序,一般就是一个 js 文件 为什么: js 文件很多很复杂 作用: 复用 js,简化 js的...
  • slot可以在子组件中开启插槽,在父组件引用该组建时,可以定义这个插槽内要展现的功能或模块,下面话不多说了,来一起看看详细的介绍吧 1.单个slot 子组件中在相应位置写slot标签,父组件在引用子组件时,在子组件...
  • 组件化模块化区别

    千次阅读 2021-07-13 22:39:30
    组件化:层层嵌套,基于UI层面的封装。组件最为重要的就是重用(复用),位于框架最底层,其他功能都依赖于组件,可供不同功能使用,独立性强 ,就像一个小小的单位,多个组件可以组合成组件库,方便调用复用,...
  • Vue 组件化

    千次阅读 2019-09-06 17:01:53
    回忆 ...h(app),new Vue()实例初始init()原来一样。$mount执行到第一个$mount,判断有无render函数,没有就生成render函数,这里我们是有的。执行第二个$mount,调用mountComponent,到了v...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 58,363
精华内容 23,345
热门标签
关键字:

vue组件化和模块化区别