Vue(6)-CSDN博客

本文链接：https://blog.csdn.net/mu_tong_/article/details/129225459

本文详细介绍了Vue.js中的自定义指令，包括函数式和对象式的创建方法，以及常见问题。接着，探讨了组件的生命周期，从引出生命周期的概念到分析挂载、更新和销毁流程。此外，还讲解了组件的基本使用、全局注册和组件嵌套，提到了VueComponent构造函数的重要角色。

摘要由CSDN通过智能技术生成

文章目录

1. 自定义指令
2. 生命周期
3. 组件

1. 自定义指令

上文说完了常见的指令后，下面来学习一下自定义指令

1.1 函数式

图一：

在这里插入图片描述

图二：

在这里插入图片描述

1.2 对象式

在这里插入图片描述

1.3 自定义指令常见坑

1. 命名的坑，如果是多个单词推荐使用 - 进行分割，然后配置的时候，需要使用 ""

在这里插入图片描述

2. 在自定义指令内， this 是 window ( 这里不管是函数式还是对象式都是 window)

在这里插入图片描述

1.4 创建全局指令

在这里插入图片描述

总结：

在这里插入图片描述

学习完自定义指令，下面学习一下 vue 中非常重要的知识 , 生命周期 .

2. 生命周期

这里通过一个页面效果来引出生命周期 :

在这里插入图片描述

2.1 引出生命周期

图一：

在这里插入图片描述

图二：

在这里插入图片描述

这里周期其实就是 vue 在不同时期调用不同的函数 .

这里 mounted 等函数 (不止 moundted 这一个函数 )，称为生命周期函数 .

关于生命周期可以与人的生命周期进行对比学习 .

比如：人的一生（人的生命周期）

呱呱坠地了 ===> 检查身体各项指标 ,

学会说话了， ===> 引导孩子多学习新的词汇

学会走路了 , ===> 买一双合脚的鞋

…

vm的一生 (vm的生命周期) :

1.??? 了 ===> 调用 ??? 函数

2.挂载完毕了 ===> 调用 mounted 函数

3.??? 了 ===> 调用 ???？函数

小结 :

生命周期：

又名：生命周期回调函数 , 生命周期函数，生命周期钩子.
是什么： Vue在关键时刻帮我们调用的一些特殊名称的函数
生命周期函数的名字不可更改，但函数的具体内容是程序猿根据需求编写的
生命周期函数中的this 指向是 vm 或组件实例对象

2.2 分析生命周期

这里可以通过官网的图进行分析 :

在这里插入图片描述

引用 :

在这里插入图片描述

挂载流程 :

图一 :

在这里插入图片描述

图二 :

在这里插入图片描述

图三 :

在这里插入图片描述

图四 :

在这里插入图片描述

到此挂载流程就看完了, 下面来看看更新流程

更新流程:

在这里插入图片描述

销毁流程

在这里插入图片描述

最后 beforeDestroy 和 destroyed 函数修改数据并不会触发更新 (也就是不会再去调用 update 这个函数了).

2.3 总结

图一：

在这里插入图片描述

图二：

在这里插入图片描述

3. 组件

3.1 认识组件

在学习组件前，这里先来解决两个问题：

1.啥是组件

2.组件化编程和传统方式编程相比有啥优势 (即使用组件的好处 )

关于这两个问题， vue 官网是说过了的 .

图一：

在这里插入图片描述

图二：

在这里插入图片描述

看完上面这两张图：那么提出的两个问题就可以回答了。

1.啥是组件？

答：组件是实现应用中局部功能代码和资源的集合

2. 使用组件的优势

答： 1. 依赖关系不混乱，文件好维护， 2. 代码复用率高

知道了啥是组件，下面再来看一些概念：

模块

理解 (啥是模块) ：向外提供特定功能的 js 程序，一般就是一个js 文件
为什么 ( 使用模块 ) : js 文件很多很复杂
作用（模块）：复用 js ，简化 js 的编写，提高 js 运行效率

模块化

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

其实就是：将 js 拆分成多个，比如一个 js 很大，这里就将它拆成了 a.js ， b.js ， c.js 等 .

组件化：

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

3.2 使用组件 (非单文件组件)

在 vue 有两种组件， 1. 非单文件组件 2. 单文件组件 .

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

在这里插入图片描述

单文件组件：一个文件中只包含一个组件

在这里插入图片描述

下面来学习一下如何创建组件，注册组件，使用组件

图一：

在这里插入图片描述

图二 :

在这里插入图片描述

附上代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本使用</title>
    <script src="../../js/vue.js"></script>
</head>

<body>


    <div id="root">

        <school></school>
        <hr>
        <student></student>
        
    </div>

    <script>



        // 1. 创建 school 组件

        // extend : 扩展
        let school = Vue.extend({
            data() {
                return {
                    schoolName: '翻斗幼儿园',
                    address: 'm78',
                }
            },
            template:
                `
            <div>
                <h2>名称: {{schoolName}}</h2>
                <h2>地址: {{address}}</h2>    
            </div>

            `
        })

        // 创建 student 组件 

        let student = Vue.extend({
            data() {
                return {
                    studentName: "大古",
                    age: 18
                }
            },
            template:
                `
                <div>
                    <h2>姓名: {{studentName}}</h2>
                    <h2>年龄: {{age}}</h2>
                </div>
                `
        })






        new Vue({
            el: "#root",
            // 注册组件 使用 components 配置项 

            components: {
                school,
                student
            }
        })





    </script>

</body>

</html>

3.3 全局组件

使用全局注册组件 (此时所有实例都能使用)

在这里插入图片描述

总结：

vue 中使用组件的三大步骤 : 1. 定义组件 (创建组件) 2. 组测组件 3. 使用组件 (写组件标签)

如何定义一个组件 ?

a. 使用 Vue.extend （options）创建 , 其中 options 和 new Vue(options) 时传入的那个 options 几乎一样 , 当也有点区别 :
- 区别如下：
  - el 不用谢，为什么？ —> 最终所有的组件都要经过一个 vm 的管理，由 vm 中的 el 决定服务那个容器
  - data 必须写成函数，为什么？ —> 避免组件被复用时，数据存在引用关系
- 备注：使用 template 可以配置组件结构
如何注册组件？
- 局部注册：靠 new Vue 的时候传入 components 选项
- 全局注册：靠 Vue.component(‘组件名’ ，组件)
编写组件标签：如：<school></school>