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

< 每日小技巧:N个很棒的 Vue 开发技巧, 持续记录ing >

在这里插入图片描述

每日小技巧:6 个很棒的 Vue 开发技巧

  • 👉 ① Watch 妙用
    • > `watch`的高级使用
    • > 一个监听器触发多个方法
    • > `watch` 监听多个变量
  • 👉 ② 自定义事件 `$emit()` 和 事件参数 `$event`
  • 👉 ③ 监听组件生命周期
    • 常规写法
    • @hook写法
  • 👉 ④ 路由使用技巧
    • > 路由参数解耦
    • > 无刷新修改当前路由Url及参数
  • 往期内容 💨


👉 ① Watch 妙用

> watch的高级使用

watch 在监听某个指定对象发生变化时触发,但是有时我们希望 watch 对应的监听函数能够在生命周期中,被主动调用此函数,执行函数内对应的逻辑操作。

  • handler - function : 监听对象改变触发的对象;
  • immediate - Boolean : 是否在生命周期挂载时,自执行一遍;
  • deep - Boolean : 是否深度监测;
export default {data() {return {name:  Joe}},watch: {name: {handler:  sayName ,immediate: true}},methods: {sayName(newVal, oldVal) {console.log(this.name, newVal)...// 对应的操作逻辑,只需在特定需要使用此函数的情况下,这样子写会好用一点。// 代码整洁}}
}

> 一个监听器触发多个方法

当特定开发需求,需要触发监听器执行多个方法时,可以使用数组,您可以设置多个形式,包括字符串、函数、对象。

export default {data: {name:  Joe},watch: {name: [// 调用定义的函数sayName1 ,// (newVal, oldVal) => {...},{handler:  sayName3 ,immaediate: true}]},methods: {sayName1() {console.log( sayName1==> , this.name)},sayName3() {console.log( sayName3==> , this.name)}}
}

> watch 监听多个变量

watch 本身不能监听多个变量。但是,我们可以通过返回具有计算属性的对象。通过计算属性的特性,去监听计算属性返回的值。 从而实现“监听多个变量”。

export default {data() {return {msg1:  apple ,msg2:  banana}},compouted: {msgObj() {const { msg1, msg2 } = thisreturn {msg1,msg2}}},watch: {msgObj: {handler(newVal, oldVal) {if (newVal.msg1 != oldVal.msg1) {console.log( msg1 is change )}if (newVal.msg2 != oldVal.msg2) {console.log( msg2 is change )}},deep: true}}
}

👉 ② 自定义事件 $emit() 和 事件参数 $event

$event 是事件对象的一个特殊变量,它在某些场景下为我们提供了更多的可用参数来实现复杂的功能。本机事件:与本机事件中的默认事件对象行为相同。

<template><div><input type="text" @input="inputHandler( hello , $event)" /></div>
</template>
export default {methods: {inputHandler(msg, e) {console.log(msg, e.target.value) // hello, input输入的内容}}
}

自定义事件:在自定义事件中表示为捕获从子组件抛出的值。

子组件

export default {methods: {customEvent() {// 子组件中向上传递事件this.$emit( custom-event ,  some value )}}
}

父组件

<template><div><my-item v-for="(item, index) in list" @custom-event="customEvent(index, $event)" /></div>
</template>
export default {methods: {customEvent(index, e) {console.log(e) //  some value}}
}

👉 ③ 监听组件生命周期

通常我们使用 $emit 监听组件生命周期,父组件接收事件进行通知。

常规写法

子组件

export default {mounted() {this.$emit( listenMounted )}
}

父组件

<template><div><List @listenMounted="listenMounted" /></div>
</template>

其实有一种简单的方法就是使用@hook 来监听组件的生命周期,而不需要在组件内部做任何改动。同样,创建、更新等也可以使用这个方法。

@hook写法

父组件

<template><div><List @hook:mounted="listenMounted" /></div>
</template>

👉 ④ 路由使用技巧

> 路由参数解耦

正常写法


export default {methods: {getParamsId() {return this.$route.params.id}}
}

在组件中使用 $route 会导致与其相应路由的高度耦合,通过将其限制为某些 URL 来限制组件的灵活性。正确的做法是通过 props 来解耦,将路由的 props 属性设置为 true 后,组件内部可以通过 props 接收 params 参数。

export default {props: [ id ],methods: {getParamsId() {return this.id}}
}

还可以通过功能模式返回道具。

const router = new VueRouter({routes: [{path:  /user/:id ,component: User,props: (route) => ({id: route.query.id})}]
})

> 无刷新修改当前路由Url及参数

引入webpack-merge

import merge from 'webpack-merge';修改原有参数        
this.$router.push({query:merge(this.$route.query,{'maxPrice':'630'})
})新增一个参数:
this.$router.push({query:merge(this.$route.query,{'addParams':'我是新增的一个参数,哈哈哈哈'})
})替换所有参数:
this.$router.push({query:merge({},{'maxPrice':'630'}
)

往期内容 💨

🔥 < CSDN周赛解析:第 27 期 >

🔥 < 每日算法 - JavaScript解析:二叉树灯饰【初识动态规划 - dp, 具体理解配合代码看最合适,代码均有注释】 >

🔥 < 每日算法 - Javascript解析:经典弹珠游戏 >

🔥 < JavaScript技术分享: 大文件切片上传 及 断点续传思路 >

相关文章:

< 每日小技巧:N个很棒的 Vue 开发技巧, 持续记录ing >

每日小技巧&#xff1a;6 个很棒的 Vue 开发技巧&#x1f449; ① Watch 妙用> watch的高级使用> 一个监听器触发多个方法> watch 监听多个变量&#x1f449; ② 自定义事件 $emit() 和 事件参数 $event&#x1f449; ③ 监听组件生命周期常规写法hook写法&#x1f44…...

数据结构与算法之二分查找分而治之思想

决定我们成为什么样人的&#xff0c;不是我们的能力&#xff0c;而是我们的选择。——《哈利波特与密室》二分查找是查找算法里面是很优秀的一个算法&#xff0c;特别是在有序的数组中&#xff0c;这种算法思想体现的淋漓尽致。一.题目描述及其要求请实现无重复数字的升序数组的…...

训练自己的中文word2vec(词向量)--skip-gram方法

训练自己的中文word2vec&#xff08;词向量&#xff09;–skip-gram方法 什么是词向量 ​ 将单词映射/嵌入&#xff08;Embedding&#xff09;到一个新的空间&#xff0c;形成词向量&#xff0c;以此来表示词的语义信息&#xff0c;在这个新的空间中&#xff0c;语义相同的单…...

ubuntu系统环境配置和常用软件安装

系统环境 修改文件夹名称为英文 参考链接 export LANGen_US xdg-user-dirs-gtk-update 常用软件安装 常用工具 ping 和ifconfig工具 sudo apt install -y net-tools inetutils-ping 截图软件 sudo apt install -y net-tools inetutils-ping flameshot 录屏 sudo apt-get i…...

【1139. 最大的以 1 为边界的正方形】

来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 描述&#xff1a; 给你一个由若干 0 和 1 组成的二维网格 grid&#xff0c;请你找出边界全部由 1 组成的最大 正方形 子网格&#xff0c;并返回该子网格中的元素数量。如果不存在&#xff0c;则返回 0。 示例 1&#…...

windows11安装sqlserver2022报错

window11安装SQL Server 2022 报错 糟糕… 无法安装SQL Server (setup.exe)。此 SQL Server安装程序介质不支持此OS的语言&#xff0c;或没有SQL Server英语版本的安装文件。请使用匹配的特定语言SQL Server介质;或安装两个特定语言MUI&#xff0c;然后通过控制面板的区域设置…...

Python快速上手系列--日志模块--详解篇

前言本篇主要说说日志模块&#xff0c;在写自动化测试框架的时候我们就需要用到这个模块了&#xff0c;方便我们快速的定位错误&#xff0c;了解软件的运行情况&#xff0c;更加顺畅的调试程序。为什么要用到日志模块&#xff0c;直接print不就好了&#xff01;那得写多少print…...

【THREE.JS学习(1)】绘制一个可以旋转、放缩的立方体

学习新技能&#xff0c;做一下笔记。在使用ThreeJS的时候&#xff0c;首先创建一个场景const scene new THREE.Scene();接着&#xff0c;创建一个相机其中&#xff0c;THREE.PerspectiveCamera&#xff08;&#xff09;四个参数分别为&#xff1a;1.fov 相机视锥体竖直方向视野…...

数仓实战 - 滴滴出行

项目大致流程&#xff1a; 1、项目业务背景 1.1 目的 本案例将某出行打车的日志数据来进行数据分析&#xff0c;例如&#xff1a;我们需要统计某一天订单量是多少、预约订单与非预约订单的占比是多少、不同时段订单占比等 数据海量 – 大数据 hive比MySQL慢很多 1.2 项目架…...

python虚拟环境与环境变量

一、环境变量 1.环境变量 在命令行下&#xff0c;使用可执行文件&#xff0c;需要来到可执行文件的路径下执行 如果在任意路径下执行可执行文件&#xff0c;能够有响应&#xff0c;就需要在环境变量配置 2.设置环境变量 用户变量&#xff1a;当前用户登录到系统&#xff0c;…...

BeautifulSoup文档4-详细方法 | 用什么方法对文档树进行搜索?

4-详细方法 | 用什么方法对文档树进行搜索&#xff1f;1 过滤器1.1 字符串1.2 正则表达式1.3 列表1.4 True1.5 可以自定义方法2 find_all()2.1 参数原型2.2 name参数2.3 keyword 参数2.4 string 参数2.5 limit 参数2.6 recursive 参数3 find()4 find_parents()和find_parent()5…...

初识Tkinter界面设计

目录 前言 一、初识Tkinter 二、Label控件 三、Button控件 四、Entry控件 前言 本文简单介绍如何使用Python创建一个界面。 一、初识Tk...

软件测试面试题中的sql题目你会做吗?

目录 1.学生表 2.一道SQL语句面试题&#xff0c;关于group by表内容&#xff1a; 3.表中有A B C三列,用SQL语句实现&#xff1a;当A列大于B列时选择A列否则选择B列&#xff0c;当B列大于C列时选择B列否则选择C列 4. 5.姓名&#xff1a;name 课程&#xff1a;subject 分数&…...

VS实用调试技巧

一.什么是BUG&#x1f41b;Bug一词的原意是虫子&#xff0c;而在电脑系统或程序中隐藏着的一些未被发现的缺陷或问题&#xff0c;人们也叫它"bug"。这是为什么呢&#xff1f;这就要追溯到一个程序员与飞蛾的故事了。Bug的创始人格蕾丝赫柏&#xff08;Grace Murray H…...

通俗易懂理解三次握手、四次挥手(TCP)

文章目录1、通俗语言理解1.1 三次握手1.2 四次挥手2、进一步理解三次握手和四次挥手2.1 三次握手2.2 四次挥手1、通俗语言理解 1.1 三次握手 C:客户端 S&#xff1a;服务器端 第一次握手&#xff1a; C&#xff1a;在吗&#xff1f;我要和你建立连接。 第二次握手&#xff…...

1.1 什么是并发

1.1 什么是并发 并发&#xff1a;指两个或更多独立的活动同时发生。并发在生活中随处可见。我们可以一边走路一边说话&#xff0c;也可以两只手同时做不同的动作。 1.1.1 计算机系统中的并发 当我们提到计算机术语的“并发”&#xff0c;指的是在单个系统里同时执行多个独立…...

万字讲解你写的代码是如何跑起来的?

今天我们来思考一个简单的问题&#xff0c;一个程序是如何在 Linux 上执行起来的&#xff1f; 我们就拿全宇宙最简单的 Hello World 程序来举例。 #include <stdio.h> int main() {printf("Hello, World!\n");return 0; } 我们在写完代码后&#xff0c;进行…...

034.Solidity入门——21不可变量

Solidity 中的不可变量是在编译时就被确定的常量&#xff0c;也称为常量变量&#xff08;constant variable&#xff09;或只读变量&#xff08;read-only variable&#xff09;。这些变量在定义时必须立即初始化&#xff0c;并且在整个合约中都无法被修改&#xff0c;可以在函…...

Vulnhub 渗透练习(四)—— Acid

环境搭建 环境下载 kail 和 靶机网络适配调成 Nat 模式&#xff0c;实在不行直接把网络适配还原默认值&#xff0c;再重试。 信息收集 主机扫描 没扫到&#xff0c;那可能端口很靠后&#xff0c;把所有端口全扫一遍。 发现 33447 端口。 扫描目录&#xff0c;没什么有用的…...

C++ 在线工具

online编译器https://godbolt.org/Online C Compiler - online editor (onlinegdb.com) https://www.onlinegdb.com/online_c_compilerC Shell (cpp.sh) https://cpp.sh/在线文档Open Standards (open-std.org)Index of /afs/cs.cmu.edu/academic/class/15211/spring.96/wwwC P…...

使用MMDetection进行目标检测、实例和全景分割

MMDetection 是一个基于 PyTorch 的目标检测开源工具箱&#xff0c;它是 OpenMMLab 项目的一部分。包含以下主要特性&#xff1a; 支持三个任务 目标检测&#xff08;Object Detection&#xff09;是指分类并定位图片中物体的任务实例分割&#xff08;Instance Segmentation&a…...

使用ThreadLocal实现当前登录信息的存取

有志者&#xff0c;事竟成 文章持续更新&#xff0c;可以关注【小奇JAVA面试】第一时间阅读&#xff0c;回复【资料】获取福利&#xff0c;回复【项目】获取项目源码&#xff0c;回复【简历模板】获取简历模板&#xff0c;回复【学习路线图】获取学习路线图。 文章目录一、使用…...

高通平台开发系列讲解(Android篇)AudioTrack音频流数据传输

文章目录 一、音频流数据传输通道创建1.1、流程描述1.2、流程图解二、音频数据传输2.1、流程描述2.2、流程图解沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本篇章主要图解AudioTrack音频流数据传输 。 一、音频流数据传输通道创建 1.1、流程描述 AudioTrack在set函…...

BUUCTF-firmware1

题目下载&#xff1a;下载 新题型&#xff0c;记录一下 题目给出了flag形式&#xff0c;md5{网址&#xff1a;端口}&#xff0c;下载发现是一个.bin文件 二进制文件&#xff0c;其用途依系统或应用而定。一种文件格式binary的缩写。一个后缀名为".bin"的文件&#x…...

【C++之容器篇】二叉搜索树的理论与使用

目录前言一、二叉搜索树的概念二、二叉搜素树的模拟实现&#xff08;增删查非递归实现&#xff09;1. 二叉搜素树的结点2. 二叉搜索树的实现&#xff08;1&#xff09;. 二叉搜索树的基本结构&#xff08;2&#xff09;构造函数&#xff08;3&#xff09;查找函数&#xff08;4…...

爬虫神级解析工具之XPath:用法详解及实战

一、XPATH是什么 Xpath最初被设计用来搜寻XML文档,但它同样适用于HTML文档的搜索。通过简洁明了的路径选择表达式,它提供了强大的选择功能;同时得益于其内置的丰富的函数,它可以匹配和处理字符串、数值、时间等数据格式,几乎所有节点我们都可以通过Xpath来定位。 在Pyth…...

Markdown编辑器

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注…...

数据结构<堆>

&#x1f387;&#x1f387;&#x1f387;作者&#xff1a; 小鱼不会骑车 &#x1f386;&#x1f386;&#x1f386;专栏&#xff1a; 《数据结构》 &#x1f393;&#x1f393;&#x1f393;个人简介&#xff1a; 一名专科大一在读的小比特&#xff0c;努力学习编程是我唯一…...

Linux下Socket编程利用多进程实现一台服务器与多台客户端并发通信

文章目录前言一、服务器 server二、客户端 client三、并发通信演示四、程序源码前言 前些日子同“ Linux应用编程 ”专栏中发布过的TCP及UDP在Linux或Windows下的通信都为单进程下的Socket编程&#xff0c;若还存在一些套接字相关函数模糊不清&#xff0c;读者可移步“Socket编…...

【MySQL】数据库基础

目录 1、什么是数据库 2、 数据库基本操作 2.1 查看当前数据库 2.2 创建一个数据库 2.3 选中数据库 2.4 删除数据库 3、常见的数据类型 3.1 数值类型 3.2 字符串类型 3.3 日期类型 4、表的操作 4.1 创建表 4.2 查看指定数据库下的所有表 4.3 查看表的结构 4.…...

做苗木选择哪个网站/简单网页设计模板html

题目链接 https://www.nowcoder.com/practice/5af18ba2eb45443aa91a11e848aa6723?tpId37&tqId21237&tPage1&rp&ru/ta/huawei&qru/ta/huawei/question-ranking 题目描述 给定n个字符串&#xff0c;请对n个字符串按照字典序排列。 输入描述: 输入第一行…...

怎样注册免费网站/成都百度业务员电话

锁2—预备知识Java的AQS ****************** 如有侵权请提示删除 ******************* 1、概念&#xff1a; 所谓AQS&#xff0c;指的是AbstractQueuedSynchronizer&#xff0c;它提供了一种实现阻塞锁和一系列依赖FIFO等待队列的同步器的框架&#xff0c;ReentrantLock、Sema…...

网站如何做淘宝推广/荆州网站seo

摘要 按照产品在电磁兼容设计时所采取的各项措施的重要性为先后&#xff0c;分为若干层次进行设计&#xff0c;并加以综合分析进行适当调整直到完善&#xff0c;这就是本文提出的” 电磁兼容分层与综合设计法”。可以做到电磁兼容试验一次成功。 人们在研发新产品时&#xff0…...

宁夏网站开发公司/seo关键词优化策略

解析oracle的rownum 对于rownum来说它是oracle系统顺序分配为从查询返回的行的编号&#xff0c;返回的第一行分配的是1&#xff0c;第二行是2&#xff0c;依此类推&#xff0c;这个伪字段可以用于限制查询返回的总行数&#xff0c;而且rownum不能以任何表的名称作为前缀。举例说…...

南阳网站建设域名公司/网页设计与网站开发

1、 Qt Widgets Application可执行程序发布方式 首先用 QtCreator 新建一个 Qt Widgets Application 项目&#xff0c;直接用默认的 QMainWindow 程序就可以了&#xff0c;项目名字假定是 hellomw。 然后以 Release 方式编译生成 exe 程序&#xff1a; 生成的程序运行正常之后&…...

长治网站设计制作网站/seo的中文名是什么

云计算主要是通过网络&#xff0c;将IT以抽象化的方式交付给客户&#xff0c;为基于IT的服务交付模式带来巨大变革&#xff0c;云计算的独特优势&#xff1a;大规模资源池化、资源弹性、按需分配、自动化部署、高可靠性、高运营效率及技术和IT的高透明度。 云计算平台的实现主要…...