5.22作业

news/2025/1/12 5:53:16/

1.ref作用:


        放到 dom 节点上 >> 获取原生 dom
        组件身上 >> 获取组件实例 >> 可以获取组件内部所有的方法和数据

2. vue组件通信?


        父传子
                在⼦组件的标签上定义属性 ⼦组件通过props来进⾏接受,可以通过数组的⽅式进⾏接受,也可以通过对象的⽅式来进⾏接收,如果⽗组件没有传递属性,⼦组件可以default来设置默认值。
        ⼦传父
                首先在使用子组件的标签上定义一个自定义事件 在子组件里通过 this.$emit 去调用这个自定义事件 $emit 方法的第一个参数是自定义事件的名字 第二个参数是就是子组件要传递给父组件的变量 最后在父组件接收使用就可以了
        ⾮⽗⼦组件通信
                通过中央事件总线,我们也称之为eventBus,在 main.js 中 把一个空的 vue 实例挂载在 vue 的原型上起名叫b u s 传 数 据 的 时 候 用 t h i s . bus 传数据的时候用this.bus传数据的时候用this.bus.e m i t 传 在 要 接 受 数 据 的 子 组 件 在 c r e a t e d 钩 子 函 数 中 用 emit传 在要接受数据的子组件 在 created钩子函数中 用emit传在要接受数据的子组件在created钩子函数中用on 方法接收

 3.生命周期:


        vue:从创建vue对象到销毁vue对象的过程
        钩子函数:
                    vue框架中内置函数,在vue生命周期的不同阶段自动执行
                    初始化
                        beforeCreate
                        created
                    挂载
                        beforeMount
                        mounted
                    更新
                        beforeUpdate
                        updated
                    销毁
                        beforeDestroy
                        destroyed
                    统称:生命周期回调函数、生命周期函数、生命周期钩子    
                        new Vue({
                            beforeCreate,
                            data,methods
                            created
                            el
                                模板虚拟dom渲染真实dom
                            beforeMount 执行对应的真实dom
                            el 
                                模板中数据从虚拟dom渲染为真实dom
                            mounted 挂载完成
                            
                        })


4.声明周期划分四个


       1- 初始化
                        beforeCreate
                        created
                        过程:
                            1- new Vue()
                            2- 初始化事件与生命周期函数
                            3- beforeCreate:立即执行函数,不能操作data 与 methods
                            4- vue内部添加data 或者 methods
                            5- created 立即执行函数, 可以访问 data,methods
                            6- 开始编译,是否有el选项 el选项挂载到哪里
                                6.1- 没有调用$mount
                                6.2- 有 是否有模板
        2- 挂载
                        beforeMount
                        mounted
                        过程:
                            1- 有 模板  编译模板template 返回render渲染函数
                            2- 没有 编译el选项对应的模板
                            3- 虚拟dom渲染为真实dom -- 准备工作 html结构
                            4- beforeMount 立即执行
                            5- 将虚拟dom挂载到真实dom -- 数据
                            6- 挂载完毕 Mounted 立即执行
          3- 更新
                        beforeUpdate
                        updated
                            1- 当data数据被更新、修改时 触发钩子函数 beforeUpdate 此阶段获取不到更新的真实dom
                            2- 虚拟dom 重新渲染到真实dom
                            3- 触发钩子函数 updated 
                            4- 当data数据再次发生改变时 ,重复执行此操作 
        4- 销毁
                        beforeDestroy
                        destroyed
                        1- 当$destroy 触发时 (比如组件的dom被移除)
                        2- beforeDestroy 被触发
                        3- 拆卸数据监视器 、 子组件 和事件侦听器
                        4- 当实例销毁后 触发destroyed
           
        面试题:
                页面第一次加载时会触发几个钩子
                    beforeCreate created beforeMount mounted
                dom渲染在哪个周期完成?
                    mounted中完成


5.五.vuex的五个核心


          1. state:存放状态(全局状态数据) 必填项
          2. mutations:对于 state 成员进行同步修改操作(也可以支持异步操作)
          3.getters:获取 state 中的数据,类似于组件中的计算属性
         4. actions:进行异步操作,异步得到结果后通知 mutation 修改 state 成员
         5. modules:模块化状态管理,多状态文件管理时使用,开发项目时多为多模块项目
在多模块 vuex 中会有配置namespaced:true开启命名空间

6.vuex优点


          1. 能够在 vuex 中集中管理共享的数据,便于开发和后期进行维护
          2. 能够高效的实现组件之间的数据共享,提高开发效率
          3. 存储在 vuex 中的数据是响应式的,当数据发生改变时,页面中的视图也会同步更新
          4.vuex中的数据操作可以在开发阶段通过开发调试工具来进行追踪,便于开发
          简单来说,vuex 就是为了实现组件间通信的。使用 vuex 的好处:可以跨层级进行通信;vuex 中的所有操作都有记录;vuex 独立于组件系统,是专门用来管理数据的框架。


http://www.ppmy.cn/news/80563.html

相关文章

霍尔电流传感器在直流列头柜的应用

摘要:数据中心供电电源质量的好坏直接影响到IT设备的安全运行,因此对数据中心直流列头柜电源进出线实行监测非常重要,而通过霍尔电流传感器可以采集主进线电流、多路支路直流电流和漏电流。 关键词:数据中心;直流列头柜…

【周末闲谈】你知道物联网技术吗?

连接万物,创造未来。从智能家居到智慧医疗,从智能车联到智慧城市,物联网技术的影响已经悄然渗透到了我们的方方面面。欢迎大家积极讨论联网技术如何影响了我们的生活。 个人主页:【😊个人主页】 系列专栏:【…

ES(Elasticsearch)的docker安装部署教程

0、 服务器版本信息 Red Hat 4.8.5-44 CentOS Linux release 7.9.2009 (Core) 1、ES部署 1.1 拉取docker镜像 docker pull elasticsearch:7.10.1拉取成功的镜像,可以使用如下命令查看: docker images 上图2年之前表示该elasticsearch的7.10.1镜像版…

Python 爬虫(七):pyspider 使用

1 简介 pyspider 是一个支持任务监控、项目管理、多种数据库,具有 WebUI 的爬虫框架,它采用 Python 语言编写,分布式架构。详细特性如下: 拥有 Web 脚本编辑界面,任务监控器,项目管理器和结构查看器&#…

Solidity中的可支付函数是什么?

学习Solidity中可支付函数的相关知识,了解它们在处理以太币存款方面的重要性,以及如何在智能合约中创建和使用它们。 目标 通过本指南,您应该能够: 理解Solidity中可支付函数的目的和用法 学习如何向智能合约发送Ether 编写Solidi…

算法题3 — 求字符串中的最长子串

文章目录 题目示例示例1示例2示例3 解题解法1解法2 leetcode 题目 给定一个字符串 s ,请你找出其中不含有重复字符的 最长子串 的长度。 示例 示例1 输入: s “abcabcbb” 输出: 3 解释: 因为无重复字符的最长子串是 “abc”,所以其长度为 3。 示例…

P2044 [NOI2012] 随机数生成器

题目描述 栋栋最近迷上了随机算法,而随机数是生成随机算法的基础。栋栋准备使用线性同余法(Linear Congruential Method)来生成一个随机数列,这种方法需要设置四个非负整数参数 m,a,c,X0​,按照下面的公式生成出一系列…

10款Photoshop免费在线工具推荐

AdobePhotoshop下载繁琐,付费昂贵,让很多设计师望而却步! 经过几个小时的筛选和测试,筛选出10款Photoshop免费在线工具,与Photoshop一样强大。让我们看看! 1.即时设计 智能抠图 当我们想要去重图片背景&…