当前位置: 首页 > news >正文

vue内置方法总结

目录

1. 生命周期钩子方法

2. 响应式系统方法

3. DOM 更新方法

4. 事件处理方法

5. 访问子组件和 DOM 元素

6. 数据观察方法

7. 其他方法


1. 生命周期钩子方法

这些方法在 Vue 实例的不同生命周期阶段自动调用。

  • beforeCreate

    • 在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
  • created

    • 在实例创建完成后立即调用,此时已完成数据观测 (data observer),属性和方法的运算,watch/event 事件回调。但是,挂载阶段还没开始,$el 属性目前不可见。
  • beforeMount

    • 在挂载开始之前被调用,相关的 render 函数首次被调用。
  • mounted

    • 实例被挂载后调用,此时 el 被新创建的 vm.el替换。如果根实例挂载到了一个文档内的元素上,当‘mounted‘被调用时,vm.el替换。如果根实例挂载到了一个文档内的元素上,当‘mounted‘被调用时,vm.el 也在文档内。
  • beforeUpdate

    • 数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。
  • updated

    • 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
  • beforeDestroy

    • 实例销毁之前调用。在这一步,实例仍然是完全正常的。
  • destroyed

    • 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

2. 响应式系统方法

这些方法用于处理响应式数据。

  • $set

    • 向响应式对象中添加新的属性,或者更新现有属性,并确保该属性是响应式的。
    • 语法this.$set(target, key, value)
    • 示例
      this.$set(this.queryParams, 'partno', '');
  • $delete

    • 从响应式对象中删除一个属性,并确保视图能够响应这个变化。
    • 语法this.$delete(target, key)
    • 示例
      this.$delete(this.queryParams, 'partno');

3. DOM 更新方法

这些方法用于处理 DOM 更新。

  • $nextTick

    • 在下一次 DOM 更新循环结束之后执行回调函数。这通常用于在数据变化后等待 DOM 更新完成。
    • 语法this.$nextTick(callback)
    • 示例
      this.message = 'Hello';
      this.$nextTick(() => {// DOM 已经更新console.log(this.$el.textContent); // 'Hello'
      });

4. 事件处理方法

这些方法用于处理事件。

  • $on

    • 监听 Vue 实例上的自定义事件。
    • 语法this.$on(event, callback)
    • 示例
      this.$on('custom-event', (data) => {console.log(data);
      });
  • $once

    • 监听 Vue 实例上的自定义事件,但只触发一次。
    • 语法this.$once(event, callback)
    • 示例
      this.$once('custom-event', (data) => {console.log(data);
      });
  • $off

    • 移除 Vue 实例上的自定义事件监听器。
    • 语法this.$off(event, callback)
    • 示例
      const handler = (data) => {console.log(data);
      };this.$on('custom-event', handler);
      // 后面某个时刻移除监听器
      this.$off('custom-event', handler);
  • $emit

    • 触发 Vue 实例上的自定义事件。
    • 语法this.$emit(event, [args...])
    • 示例
      this.$emit('custom-event', 'some data');

5. 访问子组件和 DOM 元素

  • $refs

    • 访问子组件或 DOM 元素的引用。
    • 语法this.$refs
    • 示例
      <template><div><child-component ref="child"></child-component></div>
      </template><script>
      export default {mounted() {this.$refs.child.someMethod();}
      };
      </script>

6. 数据观察方法

  • $watch

    • 监听 Vue 实例上的数据变化。
    • 语法this.$watch(source, callback, [options])
    • 示例
      this.$watch('message', (newVal, oldVal) => {console.log(`Message changed from ${oldVal} to ${newVal}`);
      });

7. 其他方法

  • $forceUpdate

    • 强制 Vue 实例重新渲染。
    • 语法this.$forceUpdate()
    • 示例
      this.$forceUpdate();

相关文章:

vue内置方法总结

目录 1. 生命周期钩子方法 2. 响应式系统方法 3. DOM 更新方法 4. 事件处理方法 5. 访问子组件和 DOM 元素 6. 数据观察方法 7. 其他方法 1. 生命周期钩子方法 这些方法在 Vue 实例的不同生命周期阶段自动调用。 beforeCreate&#xff1a; 在实例初始化之后&#xff0c…...

面向对象分析与设计

前言: 感觉书本上和线上课程, 讲的太抽象, 不好理解, 但软件开发不就是为了开发应用程序吗?! 干嘛搞这么抽象,对吧, 下面是个人对于软件开发的看法, 结合我的一些看法, 主打简单易懂, 当然,我一IT界小菜鸟, 对软件开发的认识也很浅显, 这个思维导图也仅仅是现阶段我的看…...

lineageos-19 仓库群遍历,打印第一条git log

lineageos-19 仓库群遍历,打印第一条git log RepoLsRootD/app4/lineage19_oneplus6 LogF/app4/wiki/repo_head_log_ls-lineageos19.1.log rm -v $LogF && \ cd $RepoLsRootD && \ find . -type l -path "*/*.git" -not -path "./.repo/*"…...

详解基于C#开发Windows API的SendMessage方法的鼠标键盘消息发送

在C#中&#xff0c;SendMessage方法是一个强大的工具&#xff0c;它允许我们与Windows API交互&#xff0c;模拟键盘和鼠标事件。本文将详细介绍如何使用SendMessage方法来发送鼠标和键盘消息。 1. SendMessage方法概述 SendMessage是Windows API中的一个函数&#xff0c;它用…...

VMware安装黑苹果后ICLOUD_UNSUPPORTED_DEVICE(不支持的Icloud设备)

修改文件 关闭虚拟机找到虚拟机文件中以.vmx结尾的文件编辑内容&#xff08;补充缺失&#xff09; board-id "Mac-551B86E5744E2388" hw.model.reflectHost "FALSE" hw.model "MacBookPro14,3" serialNumber.reflectHost "FALSE"…...

Python | Leetcode Python题解之第542题01矩阵

题目&#xff1a; 题解&#xff1a; class Solution:def updateMatrix(self, matrix: List[List[int]]) -> List[List[int]]:m, n len(matrix), len(matrix[0])# 初始化动态规划的数组&#xff0c;所有的距离值都设置为一个很大的数dist [[10**9] * n for _ in range(m)]…...

【计算机网络】【传输层】【习题】

计算机网络-传输层-习题 文章目录 10. 图 5-29 给出了 TCP 连接建立的三次握手与连接释放的四次握手过程。根据 TCP 协议的工作原理&#xff0c;请填写图 5-29 中 ①~⑧ 位置的序号值。答案技巧 注&#xff1a;本文基于《计算机网络》&#xff08;第5版&#xff09;吴功宜、吴英…...

【LeetCode】【算法】55. 跳跃游戏

LeetCode 99 - 55. 跳跃游戏 题目 给你一个非负整数数组 nums &#xff0c;你最初位于数组的 第一个下标 。数组中的每个元素代表你在该位置可以跳跃的最大长度。 判断你是否能够到达最后一个下标&#xff0c;如果可以&#xff0c;返回true&#xff1b;否则&#xff0c;返回 …...

华为:hcia综合实验

一、拓扑图 二、实验要求 1. pc地址请自行规划&#xff0c;vlan已给出 2. 服务器地址自行规划&#xff0c;vlan&#xff0c;网段已给出 3. 交换机互联链路捆绑保证冗余性 4. 内网pc网关集中于核心交换机&#xff0c;交换机vlan 40互联路由器 ,地址网段已给出 5.配置静态路由实…...

MyBatis与MyBatis-Plus(基础)

MyBatis-Plus的优势 在 Spring Data JPA 已经很方便的情况下&#xff0c;有时仍然选择使用 MyBatis-Plus 的核心原因主要有以下三点&#xff1a; 1. 复杂 SQL 控制能力更强 MyBatis-Plus 允许直接编写和优化 SQL&#xff0c;适合复杂查询、精细化 SQL 控制的场景。特别是在性…...

一文总结java语法规则

1. 题记 Java是一门拥有较强语法规则的编程语言&#xff0c;本博文主要总结介绍java语言的java语法规则。 2. java语法规则 2.1 标识符&#xff08;Identifiers&#xff09; 定义&#xff1a;标识符是用来给变量、类、方法、接口等命名的字符序列。规则&#xff1a; –标识…...

使用 npm 安装 Yarn

PS E:\WeChat Files\wxid_fipwhzebc1yh22\FileStorage\File\2024-11\spid-admin\spid-admin> yarn install yarn : 无法将“yarn”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写&#xff0c;如果包括路径&#xff0c;请确保路径正确&#xff0c;然后…...

vue3中利用路由信息渲染菜单栏

1. 创建路由时将路由信息对象进行抽离 将路由信息对象单独抽离到router/routes.ts文件 关键&#xff1a;利用路由元信息meta&#xff0c;定义3个属性 hidden&#xff1a;控制当前路由是否显示在菜单栏中title&#xff1a;菜单拦名称icon&#xff1a;对应菜单名称前面的图标 …...

Mysql每日一题(行程与用户,困难※)

今天给大家分享一个截止到目前位置&#xff0c;我遇到最难的一道mysql题目&#xff0c;非常建议大家亲手做一遍 完整代码如下&#xff0c;这道题的主要难点是它有两个外键&#xff0c;以前没遇到过&#xff0c;我也没当回事&#xff0c;分享一下错误经验哈 当时我写的where判断…...

adb 命令 查找启动的包名以及导出安装包

查看安卓内包名 adb 查看所有安装的包 adb shell pm list packages查看安装的第三方app的包名 adb shell pm list packages -3查看启动的app的包名 adb shell dumpsys activity top | find "ACTIVITY"adb shell dumpsys activity activities | findstr "Run…...

Flink_DataStreamAPI_输出算子Sink

Flink_DataStreamAPI_输出算子Sink 1连接到外部系统2输出到文件3输出到Kafka4输出到MySQL&#xff08;JDBC&#xff09;5自定义Sink输出 Flink作为数据处理框架&#xff0c;最终还是要把计算处理的结果写入外部存储&#xff0c;为外部应用提供支持。 1连接到外部系统 Flink的D…...

标准C++ 字符串

一、标准库中的字符串类型 在C中&#xff0c;字符串是一个非常重要的数据类型&#xff0c;用于表示和处理文本信息。C提供了多种方式来处理字符串&#xff0c;每种方式都有其特点和适用场景。以下是几种常见的字符串类型及其用法&#xff1a; 1. C 风格字符串 (char* 或 char…...

时序预测:多头注意力+宽度学习

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…...

day06(单片机)IIC+STH20

目录 IICSHT20 I2C基础简介 为什么I2C需要使用上拉电阻&#xff1f; I2C特点 时序图分析 起始信号与终止信号 数据传输时序 字节传输和应答信号 I2C寻址 主机给从机发送一个字节 主机给从机发送多个字节 主机从从机接收一个字节 主机从从机接收多个字节 I2C寄存器 I2C_RXDR&…...

Bugku CTF_Web——文件上传

Bugku CTF_Web——文件上传 进入靶场 My name is margin,give me a image file not a php抓个包上传试试 改成png也上传失败 应该校验了文件头 增加了文件头也不行 试了一下 把文件类型改成gif可以上传 但是还是不能连接 将Content-Type改大小写 再把文件后缀名改成php4 成…...

Xshell远程连接Kali(默认 | 私钥)Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

屋顶变身“发电站” ,中天合创屋面分布式光伏发电项目顺利并网!

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...