Vue2 第十二节 Vue组件化编程（一）

news2024/11/15 18:30:28

1.模块与组件，模块化与组件化概念

2. 非单文件组件

3. 组件编写注意事项

4. 组件的嵌套

一. 模块与组件，模块化与组件化

传统方式编写存在的问题

（1）依赖关系混乱，不好维护

（2）代码的复用率不高

组件方式编写应用

1.1 模块

① 模块：向外提供特定功能的js程序，一般就是一个js文件

② 为什么要引入模块化：因为按照传统方式进行编程，js文件很多，引入逻辑很复杂

③ 引入模块化的作用：简化js的编写，复用js，提高js的运行效率

1.2 组件

① 定义：用来实现局部（特定）功能效果的代码集合

② 为什么要引入组件：因为一个界面往往功能都比较多，也比较复杂

1.3 模块化和组件化

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

② 组件化：当应用中的功能都是多组件的方式来编写的（以功能点来拆分），那这个应用就是一个组件化的应用

二. 非单文件组件

2.1 概念理解

① 非单文件组件：一个文件中包含n个组件 xxx.html

② 单文件组件：一个文件中只有一个组件 xxx.vue (开发中常用)

2.2 编码示例

① Vue中使用组件的三大步骤

（1）定义组件（创建组件）

（2）注册组件

（3）使用组件（写组件标签）

② 创建组件示例：使用Vue.extend(options)创建，其中options和new Vue(options)传入的options几乎一样

注意：

el不要写，最终所有的组件都要经过一个vm的管理，由vm中的el属性决定服务哪个容器
data必须写成函数：避免组件被复用，数据存在引用关系
使用template配置项将结构写进去，注意所有结构需要包在一个div中

③ 注册组件

注册组件有两种方式：全局注册和局部注册

全局注册：靠Vue.components('组件名', 组件)

局部注册：靠new Vue的时候传入components选项（使用的比较多）

④ 使用组件： <school></school> 在模板中使用组件标签

三. 组件编写注意事项

3.1.关于组件名

由一个单词组成

① 第一种写法（首字母小写）：school

② 第二种写法（首字母大写）:School

多个单词组成

① 第一种写法（kebab-case命名）my-school，但是在使用的时候需要用引号包起来

② 第二种写法：（CamelCase命名）MySchool（必须在脚手架环境下才能运行）

注意：

组件名尽可能回避HTML中已有的元素名称，h2或者H2都不行
可以使用name配置项指定组件在开发者工具中呈现的名字

注册的时候用的名字是School

在模板中使用的时候也得用这个名字

上面name的配置项修改的是开发者工具中呈现的名字

3.2 组件标签

（1）第一种写法：<school></school>

（2）第二种写法(自闭合)：<school/> 这种写法必须在脚手架环境下才可以，如果不在脚手架环境，会导致后续组件不能渲染

3.3 组件简写形式

① 简写形式

 const s = {
        name:'atguigu',
        // 组件定义时不要写el配置项
        // el:'#root',
        template:`<div><h2>学校名称：{{schoolName}}</h2>
    <h2>学校地址: {{address}}</h2>
    <button @click="showName">点我提示学校名</button></div>`,
        data() {
            return {
                schoolName:'尚硅谷',
                address:'北京昌平'
            }
        },
        methods: {
            showName() {
                alert(this.schoolName)
            }
        },
    }

② 完整形式

        const s = Vue.extend({
            name: 'atguigu',
            // 组件定义时不要写el配置项
            // el:'#root',
            template: `<div><h2>学校名称：{{schoolName}}</h2>
        <h2>学校地址: {{address}}</h2>
        <button @click="showName">点我提示学校名</button></div>`,
            data () {
                return {
                    schoolName: '尚硅谷',
                    address: '北京昌平'
                }
            },
            methods: {
                showName () {
                    alert(this.schoolName)
                }
            },
        })