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

关于vue学习的经常性错误

目录

常见问题:

1关于引用本地下载es6模块文件,报404错误

2 使用createApp函数后没有调用mount函数挂载到浏览器

3 在mount函数中,忘记引用插值表达式所在标签的定位符如 标签选择器,类选择器等

4在直接使用Vue3函数时,没有import导入

5 在使用ref定义响应式数据时,对基本数据类型进行赋值需要.value 获取该数据的值

6 在return 中忘记 提供给标签需要的响应数据或函数


背景:使用模块化开发模式,完成局部引用vue工程

如下代码所示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body><div id="app"> {{name}} <h5>名字:{{objData.name}},年龄:{{objData.age}}</h5><p>{{array[0]}},{{array[1]}},{{array[2]}}</p><p>{{a}}</p></div><script type="module">// 模块化开发模式import{reactive,createApp,ref} from './vue.esm-browser.js'createApp({setup(){const objData = reactive({"name": 'objData','age':20})const a=ref("Hello Vue!!!!!!!!!!!!!!!!!!")return{name: 'Hello Vue',objData,array:[11,22,33],a}}}).mount('#app')</script>
</body>
</html>

测试结果


常见问题:

1关于引用本地下载es6模块文件,报404错误

解决:在网络通畅的条件下,从Vue官网上引用 es6文件链接

https://unpkg.com/vue@3/dist/vue.esm-browser.js


2 使用createApp函数后没有调用mount函数挂载到浏览器

错误

Failed to load resource: the server responded with a status of 404 (Not Found)

测试结果


3 在mount函数中,忘记引用插值表达式所在标签的定位符如 标签选择器,类选择器等

错误

vue.esm-browser.js:2260 [Vue warn]: Failed to mount app: mount target selector "#app" returned null.


4在直接使用Vue3函数时,没有import导入

错误:

Uncaught ReferenceError: reactive is not defined

测试结果

5 在使用ref定义响应式数据时,对基本数据类型进行赋值需要.value 获取该数据的值

错误

[Vue warn]: Unhandled error during execution of native event handler at <App>
warn$1 @ vue.esm-browser.js:2260
logError @ vue.esm-browser.js:2471
handleError @ vue.esm-browser.js:2463
callWithErrorHandling @ vue.esm-browser.js:2409
callWithAsyncErrorHandling @ vue.esm-browser.js:2414
invoker @ vue.esm-browser.js:11274
vue.esm-browser.js:2476  Uncaught TypeError: Assignment to constant variable.at changeData (ref和reactive错误.html:20:25)at callWithErrorHandling (vue.esm-browser.js:2407:19)at callWithAsyncErrorHandling (vue.esm-browser.js:2414:17)at HTMLButtonElement.invoker (vue.esm-browser.js:11274:5)

测试结果


6 在return 中忘记 提供给标签需要的响应数据或函数

错误

[Vue warn]: Property "changeData1" was accessed during render but is not defined on instance. at <App>
warn$1 @ vue.esm-browser.js:2260
vue.esm-browser.js:2260  [Vue warn]: Property "data1" was accessed during render but is not defined on instance. at <App>
warn$1 @ vue.esm-browser.js:2260
vue.esm-browser.js:2260  [Vue warn]: Unhandled error during execution of render function at <App>
warn$1 @ vue.esm-browser.js:2260
VM23:15  Uncaught TypeError: Cannot read properties of undefined (reading 'name')at Proxy.render (eval at compileToFunction (vue.esm-browser.js:18210:18), <anonymous>:15:86)at renderComponentRoot (vue.esm-browser.js:8652:16)at ReactiveEffect.componentUpdateFn [as fn] (vue.esm-browser.js:7469:46)at ReactiveEffect.run (vue.esm-browser.js:588:19)at setupRenderEffect (vue.esm-browser.js:7604:5)at mountComponent (vue.esm-browser.js:7379:7)at processComponent (vue.esm-browser.js:7332:9)at patch (vue.esm-browser.js:6861:11)at render (vue.esm-browser.js:8129:7)at mount (vue.esm-browser.js:6129:13)

测试结果


总结

后期在学习过程中,遇到相关的问题会及时更新!

相关文章:

关于vue学习的经常性错误

目录 常见问题&#xff1a; 1关于引用本地下载es6模块文件&#xff0c;报404错误 2 使用createApp函数后没有调用mount函数挂载到浏览器 3 在mount函数中&#xff0c;忘记引用插值表达式所在标签的定位符如 标签选择器&#xff0c;类选择器等 4在直接使用Vue3函数时&#…...

数据结构与算法-双向链表专题

目录 一. 双向链表的结构 二.双向链表的使用 2.1 创建节点 2.2 初始化 2.3 打印 2.4 尾插 2.5 头插 2.6 尾删 2.7 头删 2.8 在指定位置pos之后插入数据 2.9 查找数据 2.10 删除pos位置的节点 2.11 销毁链表 一. 双向链表的结构 在List.h的头文件中对链表的结构进行创建 #prag…...

AtCoder Beginner Contest 403

再来一场atCoder&#xff0c;这一场简直血虐&#xff0c;让你回忆起了审题的重要性 A - Odd Position Sum 思路&#xff1a;题意很简单&#xff0c;求一个数组奇数位上数字和。很简单的问题&#xff0c;但你如果不仔细审题&#xff0c;就会浪费大量的时间 /* Author Owen_Q…...

关于 Golang GC 机制的一些细节:什么是根对象?GC 机制的触发时机?

文章目录 关于 Golang GC 机制的一些细节&#xff1a;什么是根对象&#xff1f;GC 机制的触发时机&#xff1f;简要回顾 Golang GC 三色标记法的工作流程什么是根对象&#xff1f;GC 的触发时机&#xff1f; 关于 Golang GC 机制的一些细节&#xff1a;什么是根对象&#xff1f…...

Python笔记:c++内嵌python,c++主窗口如何传递给脚本中的QDialog,使用的是pybind11

1. 问题描述 用的是python 3.8.20, qt版本使用的是5.15.2, PySide的版本是5.15.2, pybind11的版本为2.13.6 网上说在python脚本中直接用PySide2自带的QWinWidget&#xff0c;如from PySide2.QtWinExtras import QWinWidget&#xff0c;但我用的版本中说没有QWinWidget&#x…...

在Ubuntu24.04中配置开源直线特征提取软件DeepLSD

在Ubuntu24.04中配置开源直线特征提取软件DeepLSD 本文提供在Ubuntu24.04中配置开源直线特征提取软件DeepLSD的基础环境配置、列出需要修改的文件内容&#xff0c;以及报错解决方案集锦。 基础的编译安装环境 python3.8.12CUDA12gcc/g 9.5&#xff08;系统自带的g-13版本太新…...

C++效率掌握之STL库:map set底层剖析及迭代器万字详解

文章目录 1.map、set的基本结构2.map、set模拟实现2.1 初步定义2.2 仿函数实现2.3 Find功能实现2.4 迭代器初步功能实现2.4.1 运算符重载2.4.2 --运算符重载2.4.3 *运算符重载2.4.4 ->运算符重载2.4.5 !运算符重载2.4.6 begin()2.4.7 end() 2.5 迭代器进阶功能实现2.5.1 set…...

新三消示例项目《Gem Hunter》中的光照和视觉效果

《Gem Hunter》是 Unity 的全新官方示例项目&#xff0c;展示了如何在 Unity 2022 LTS 使用通用渲染管线 (URP) 打造抢眼的光效和视效&#xff0c;让 2D 益智/三消游戏在竞争中脱颖而出。 下载示例项目及其说明文档。准备潜入清澈湛蓝的海水中探寻财富吧&#xff0c;因为那里到…...

通用软件项目技术报告 - 导读III

现在,我们正式进入报告的第六个主要领域:6. 领域六:与第三方服务/API 集成 (含 LLM API)。 连接: 在现代软件开发中,很少有应用程序是完全孤立的。我们经常需要与各种外部的第三方服务或 API 进行集成,以利用它们提供的特定功能(如支付处理、地图服务、社交媒体登录、云…...

代码随想录训练营第二十三天| 572.另一颗树的子树 104.二叉树的最大深度 559.N叉树的最大深度 111.二叉树的最小深度

572.另一颗树的子树&#xff1a; 状态&#xff1a;已做出 思路&#xff1a; 这道题目当时第一时间不是想到利用100.相同的树思路来解决&#xff0c;而是先想到了使用kmp&#xff0c;不过这个题目官方题解确实是有kmp解法的&#xff0c;我使用的暴力解法&#xff0c;kmp的大致思…...

单向循环链表C语言实现实现(全)

#include<stdio.h> #include<stdlib.h> #define TRUE 1 #define FASLE 0//定义宏标识判断是否成功 typedef struct Node {int data;struct Node* next; }Node;Node* InitList() {Node* list (Node*)malloc(sizeof(Node));list->data 0;//创建节点保存datalist…...

【AI大模型】赋能【传统业务】

在数字化转型的浪潮下&#xff0c;传统业务流程&#xff08;如通知公告管理、文档处理等&#xff09;仍依赖人工操作&#xff0c;面临效率低、成本高、易出错等问题。以企业通知公告为例&#xff0c;从内容撰写、摘要提炼到信息分发&#xff0c;需耗费大量人力与时间&#xff0…...

Clion内置宏$PROJECT_DIR$等

CLion 内置宏 文章目录 CLion 内置宏通用路径相关宏路径相对化宏 官方文档地址&#xff1a; https://www.jetbrains.com/help/clion/built-in-macros.html 通用路径相关宏 宏名称含义说明示例$WORKSPACE_DIR$当前项目所属的工作区根目录路径。/home/user/workspace$PROJECT_D…...

团结引擎开源车模 Sample 发布:光照渲染优化 动态交互全面体验升级

光照、材质与交互效果的精细控制&#xff0c;通常意味着复杂的技术挑战&#xff0c;但借助 Shader Graph 14.1.0(已内置在团结引擎官方 1.5.0 版本中)&#xff0c;这一切都变得简单易用。通过最新团结引擎官方车模 Sample&#xff0c;开发者能切身感受到全新光照优化与编辑功能…...

hghac8008漏洞扫描处理

文章目录 环境文档用途详细信息相关文档 环境 系统平台&#xff1a;Linux x86-64 Red Hat Enterprise Linux 7 版本&#xff1a;4.5.10 文档用途 本文只要用于在客户提出hghac8008端口漏洞时&#xff0c;如何进行漏洞处理&#xff0c;本文章的方法已经应用于浪潮云&#xff…...

PyQt5教程:QComboBox下拉列表框的全面解析与实战应用

QComboBox概述 QComboBox是PyQt5中一个集按钮和下拉选项于一体的控件&#xff0c;通常被称为下拉列表框或组合框。它允许用户从预定义的选项列表中选择一个值&#xff0c;是GUI开发中最常用的输入控件之一。 主要特点&#xff1a; 紧凑的界面设计&#xff0c;节省屏幕空间提…...

GAN简读

Abstract 我们提出了一个通过同时训练两个模型的对抗过程来评估生成模型的新框架:一个生成模型 G G G用来捕捉数据特征,还有一个用于估计这个样本是来自训练样本还是 G G G的概率的判别模型 D D D, G G G的训练过程是最大化 D D D犯错的概率。这个框架就相当于一个minimax tw…...

精准测量“双雄会”:品致与麦科信光隔离探头谁更胜一筹

在电子技术飞速发展的当下&#xff0c;每一次精准测量都如同为科技大厦添砖加瓦。光隔离探头作为测量领域的关键角色&#xff0c;能有效隔绝电气干扰&#xff0c;保障测量安全与精准。在众多品牌中&#xff0c;PINTECH品致与麦科信的光隔离探头脱颖而出&#xff0c;成为工程师们…...

NSSCTF [HNCTF 2022 WEEK4]

题解前的吐槽&#xff1a;紧拖慢拖还是在前段时间开始学了堆的UAF(虽然栈还没学明白&#xff0c;都好难[擦汗])&#xff0c;一直觉得学的懵懵懂懂&#xff0c;不太敢发题解&#xff0c;这题算是入堆题后一段时间的学习成果&#xff0c;有什么问题各位师傅可以提出来&#xff0c…...

Step1

项目 SchedulerSim 已搭建完成 ✅ ⸻ ✅ 你现在拥有的&#xff1a; • &#x1f527; 两种调度器&#xff08;Round Robin SJF&#xff09; • &#x1f4e6; 模拟进程类 Process • &#x1f9f1; 清晰结构&#xff1a;OOP 风格 便于扩展 • ✍️ 主函数已演示调度器运行效…...

tornado_登录页面(案例)

目录 1.基础知识​编辑 2.脚手架&#xff08;模版&#xff09; 3.登录流程图&#xff08;processon&#xff09; 4.登录表单 4.1后&#xff08;返回值&#xff09;任何值&#xff1a;username/password &#xff08;4.1.1&#xff09;app.py &#xff08;4.1.2&#xff…...

YOLOv12模型部署(保姆级)

一、下载YOLOv12源码 1.通过网盘分享的文件&#xff1a;YOLOv12 链接: https://pan.baidu.com/s/12-DEbWx1Gu7dC-ehIIaKtQ 提取码: sgqy &#xff08;网盘下载&#xff09; 2.进入github克隆YOLOv12源码包 二、安装Anaconda/pycharm 点击获取官网链接(anaconda) 点击获取…...

BGP实验练习1

需求&#xff1a; 要求五台路由器的环回地址均可以相互访问 需求分析&#xff1a; 1.图中存在五个路由器 AR1、AR2、AR3、AR4、AR5&#xff0c;分属不同自治系统&#xff08;AS&#xff09;&#xff0c;AR1 在 AS 100&#xff0c;AR2 - AR4 在 AS 200&#xff0c;AR5 在 AS …...

Three.js知识框架

一、Three.js 基础概念 1. Three.js 简介 是什么&#xff1f; 基于 WebGL 的 3D JavaScript 库&#xff0c;用于在浏览器中渲染 3D 场景。 核心优势 简化 WebGL 的复杂 API&#xff0c;提供高层封装。 跨平台&#xff08;支持桌面和移动端&#xff09;。 适用场景 3D 可视…...

AWS技术助力企业满足GDPR合规要求

GDPR(通用数据保护条例)作为欧盟严格的数据保护法规,给许多企业带来了合规挑战。本文将探讨如何利用AWS(亚马逊云服务)的相关技术来满足GDPR的核心要求,帮助企业实现数据保护合规。 一、GDPR核心要求概览 GDPR的主要目标是保护欧盟公民的个人数据和隐私权。其核心要求包括: 数…...

HTML、CSS 和 JavaScript 基础知识点

HTML、CSS 和 JavaScript 基础知识点 一、HTML 基础 1. HTML 文档结构 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.…...

数据结构与算法分析实验12 实现二叉查找树

实现二叉查找树 1、二叉查找树介绍2.上机要求3.上机环境4.程序清单(写明运行结果及结果分析)4.1 程序清单4.1.1 头文件 TreeMap.h 内容如下&#xff1a;4.1.2 实现文件 TreeMap.cpp 文件内容如下&#xff1a;4.1.3 源文件 main.cpp 文件内容如下&#xff1a; 4.2 实现展效果示5…...

使用 Semantic Kernel 调用 Qwen-VL 多模态模型

使用 Semantic Kernel 调用 Qwen-VL 多模态模型 一、引言 随着人工智能技术的不断发展&#xff0c;多模态模型逐渐成为研究的热点。Qwen-VL 是阿里云推出的大规模视觉语言模型&#xff0c;支持图像、文本等多种输入形式&#xff0c;并能够进行图像描述、视觉问答等多种任务。…...

请求内存算法题

题意描述 有两个数组输入&#xff1a; mem [32,128,64,192,256]表示有数组长度个设备&#xff0c;每个设备能提供分配的内存大小值(均为4的倍数)&#xff0c;数组最大长度200000 reques [64,128,128,128,512]表示请求内存&#xff0c;在mem中找与请求内存大小最相近或相等的…...

(4)python开发经验

文章目录 1 使用ctypes库调用2 使用pybind11 更多精彩内容&#x1f449;内容导航 &#x1f448;&#x1f449;Qt开发 &#x1f448;&#x1f449;python开发 &#x1f448; 1 使用ctypes库调用 说明&#xff1a;ctypes是一个Python内置的库&#xff0c;可以提供C兼容的数据类型…...