vue中的坑·

news2025/1/16 17:57:21

常规

1.使用watch时,immediate true会在dom挂载前执行
2.使用this.$attrs和props 可以获取上层非原生属性(class/id)

多层次嵌套引用

设置的时候直接赋值,修改的时候即使用的双向绑定加上$set / nextick / fouceUpdate都不会同步视图
一下注释的是之前的 操作
多层级嵌套 可以使用set和 key值的动态绑定
在这里插入图片描述

elementui

form表单,点击刷新

需要在 el-form中加上 @submit.native.prevent

button点击无效

el-button点击多次反映一次,@click.native

tinymce自动获取焦点光标移至最后

//获取焦点光标到最后面
    keepLastIndex (obj, window) {
      if (window.getSelection) { //ie11 10 9 ff safari
        obj.focus(); //解决ff不获取焦点无法定位问题
        var range = window.getSelection(); //创建range
        range.selectAllChildren(obj); //range 选择obj下所有子内容
        range.collapseToEnd(); //光标移至最后
      } else if (document.selection) { //ie10 9 8 7 6 5
        var range = document.selection.createRange(); //创建选择对象
        range.moveToElementText(obj); //range定位到obj
        range.collapse(false); //光标移至最后
        range.select();
      }
    }
mounted () {
    tinymce.init({})
    this.$nextTick(() => {
        var ifra = document.getElementById("tinymces_ifr");
        this.keepLastIndex(ifra.contentWindow.document.getElementById('tinymce'), ifra.contentWindow)
    })
  },

keep-alive

问题 :vue3使用了 keep-alive 返回页面同时触发了 onMounted onActivated
原来代码:

<router-view v-slot="{ Component, route }" :key="$route.path">
			<transition appear name="fade-transform" mode="out-in">
				<keep-alive :include="keepAliveName">
					<component :is="Component" :key="route.path" v-if="isRouterShow" />
				</keep-alive>
			</transition>
		</router-view>
问题 : 给 router-view 加 key属性,导致
> 组件name非route中的name应该和组件渲染中的名称保持一致

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1895245.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

关于Ubuntu系统中.config文件夹如何找到

Ubuntu中QT项目使用了setting保存配置&#xff0c;但是找不到配置文件保存了在哪里&#xff0c;找了一下&#xff1a; 因为QT里取的名字是&#xff1a; 于是下载everything搜索Nio&#xff0c;发现目录为/home/nio/.config 虽然已经下载了everything找到了&#xff0c;但是发现…

spring boot读取yml配置注意点记录

问题1&#xff1a;yml中配置的值加载到代码后值变了。 现场yml配置如下&#xff1a; type-maps:infos:data_register: 0ns_xzdy: 010000ns_zldy: 020000ns_yl: 030000ns_jzjz: 040000ns_ggglyggfwjz: 050000ns_syffyjz: 060000ns_gyjz: 070000ns_ccywljz: 080000ns_qtjz: 090…

通讯录(C语言详细版)

1. 前言 通讯录是在动态顺序表的基础上实现的&#xff0c;其实就是顺序表的每个元素存储的不再是数字&#xff0c;而是存储一个联系人的结构体&#xff0c;所以如果有些小伙伴看不懂的话&#xff0c;可以移步参考一下动态顺序表的实现&#xff1a;顺序表&#xff08;C语言详细…

强强联合!当RAG遇到长上下文,滑铁卢大学发布LongRAG,效果领先GPT-4 Turbo 50%

过犹不及——《论语先进》 大学考试时&#xff0c;有些老师允许带备cheet sheet&#xff08;忘纸条&#xff09;,上面记着关键公式和定义,帮助我们快速作答提高分数。传统的检索增强生成(RAG)方法也类似,试图找出精准的知识片段来辅助大语言模型(LLM)。 但这种方法其实有问题…

Oracle Database 23ai新特性:DB_DEVELOPER_ROLE角色

角色介绍 从 Oracle Database 23ai 开始&#xff0c;新角色“DB_DEVELOPER_ROLE”允许管理员快速分配开发人员为 Oracle 数据库设计、构建和部署应用程序所需的所有必要权限。&#xff08;包括构建数据模型所需的系统权限以及监视和调试应用程序所需的对象权限&#xff09;。通…

【期末复习】数据库系统概论(附带考点汇总)

第1章.绪论 目录 第1章.绪论1.1. 数据库系统概述1.1.1.基本概念1.1.2.产生和发展 1.2.概念模型1.2.1.三种模型1.2.2.概念模型1.2.3.关系模型 1.3.数据库系统结构1.3.1三级模式结构1.3.2.两级映像与数据独立性 第2章.关系型数据库2.1.关系2.2.关系操作2.2.1.基本关系操作2.2.2.关…

价格很实惠,希喂、爱立方、生生不息主食冻干抗得住实测吗?

在挑选主食冻干时&#xff0c;许多宠物主人都会感到头疼。尽管主食冻干相较于普通猫粮具有诸多优势&#xff0c;但其价格也相对高昂。这导致许多宠物主人担心高价购买的主食冻干可能营养价值并不理想。然而&#xff0c;在选择时&#xff0c;我们还需要考虑其他重要因素&#xf…

精密微型导轨加工工艺流程!

微型导轨是一种用于小型化机械设备和机床上的一种传动部件&#xff0c;多用于精密设备上&#xff0c;主要作用是支撑和导向滑块运动。想要让微型导轨长期保持高精度、高耐磨、高寿命、高效率运作&#xff0c;加工工艺是非常关键的步骤。 微型导轨的制造工艺主要包括机械加工、热…

三、【源码】Bean有参构造实例化

源码地址&#xff1a;https://github.com/spring-projects/spring-framework 仓库地址&#xff1a;https://gitcode.net/qq_42665745/spring/-/tree/03-parameter-constructor-instantiation Bean有参构造实例化 有参构造的实例化分两种&#xff1a; java自带的反射cglib代…

手把手教程教你_一键获取安居客全国小区数据

软件简介 安居客二手房小区全国实时数据&#xff0c;含小区名称、价格、地区、地址、商圈、标签、经纬度、物业类型、交易权属、竣工时间、产权年限、开发商、总户数、总建面积、绿化率、容积率、统一供暖 供水供电、停车位、停车费、物业费、物业公司 车位管理费、在售房源、…

应用案例 | 基于物联网工控屏的工业离心机设备监控系统

案例概况 客户&#xff1a;博鲁班特&#xff08;BROADBENT&#xff09; 应用产品&#xff1a;宏集物联网工控屏 应用场景&#xff1a;离心机设备监控系统 一、前言 在现代工业生产中&#xff0c;离心机作为关键的分离设备&#xff0c;在生产过程中扮演着至关重要的角色。随…

创新驱动,智享未来:电动车仪表盘之蓝牙芯方案

电动车行业不断发展的浪潮中&#xff0c;我们自豪地推出引领时代的电动车仪表盘蓝牙芯方案&#xff0c;为您的骑行之旅带来前所未有的智能与便捷。 精准掌控&#xff0c;一目了然 我们的蓝牙芯方案搭载了高性能BLE 5.0蓝牙芯片-HS6621CG-C 内核ARM Cortex-M4F, max 64MHZ,SRAM…

期权开户零门槛怎么操作?期权不满50w的开户方式

今天带你了解期权开户零门槛怎么操作&#xff1f;期权不满50w的开户方式。在股票期权市场上&#xff0c;期权交易是一种非常受欢迎的投资方式。它不仅可以增加投资组合的多样性&#xff0c;还可以为投资者提供一定的保护和利润机会&#xff0c;比如通过买入认股期权做空对冲大盘…

新建vue3项目

提示&#xff1a;请确定自己已将安装好环境以及一系列用到的工具包&#xff0c;例如node&#xff08;10以上&#xff09;&#xff0c;pnpm或npm vue官网&#xff1a;https://cn.vuejs.org/ vue-cli官网&#xff1a;Vue CLI vite官网&#xff1a;Vite | 下一代的前端工具链 …

高薪程序员必修课-Java中 Synchronized和ReentrantLock有哪些不同?

目录 前言 1. 原理和基础 synchronized ReentrantLock 2. 功能比较 2.1 锁的可重入性 示例&#xff1a; 2.2 锁的公平性 示例&#xff1a; 2.3 锁的中断响应 示例&#xff1a; 2.4 尝试锁定 示例&#xff1a; 2.5 条件变量 示例&#xff1a; 3. 性能比较 4. 使…

【CT】LeetCode手撕—232. 用栈实现队列

目录 题目1- 思路2- 实现⭐232. 用栈实现队列——题解思路 3- ACM 实现 题目 原题连接&#xff1a;232. 用栈实现队列 1- 思路 思路 ① 用两个栈来实现队列&#xff0c;一个 in 入栈 和一个 out 出栈② push 入队&#xff1a;入栈逻辑&#xff1a;即将元素加入到 in 栈 里即…

基于Redisson实现分布式锁

基于redisson实现分布式锁 之前背过分布式锁几种实现方案的八股文&#xff0c;但是并没有真正自己实操过。现在对AOP有了更深一点的理解&#xff0c;就自己来实现一遍。 1、分布式锁的基础知识 分布式锁是相对于普通的锁的。普通的锁在具体的方法层面去锁&#xff0c;单体应…

Android-卷积神经网络(Convolutional Neural Network, CNN)

一个复杂且在Android开发中常见的算法是图像处理中的卷积神经网络(Convolutional Neural Network, CNN)。CNN被广泛用于图像识别、物体检测和图像分割等任务,其复杂性在于需要处理大量的图像数据、复杂的神经网络结构和高效的计算。 1. 卷积操作(Convolution) 数学原理:…

爬虫-豆瓣电影排行榜

获取数据 requests库 获取数据环节需要用到requests库。安装方式也简单 pip install requests 爬取页面豆瓣读书 Top 250 用requests库来访问 import requests res requests.get(https://book.douban.com/top250/) 解析&#xff1a; 导入requests库调用了requests库中的…

界面材料知识

界面材料是用于填充芯片和散热器之间的空隙&#xff0c;将低导热系数的空气挤出&#xff0c;换成较高导热系数的材料&#xff0c;以提高芯片散热能力。参考下图 图片来源网上 热阻是衡量界面材料性能最终的参数&#xff0c;其中与热阻有关的有&#xff1a; 1、导热系数&#x…