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

vue 基础学习

news 2026/4/6 22:21:01

一、ref 和reactive 区别

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="app"><h1>{{Web.title}}</h1><h1>{{Web.url}}</h1><h1>{{msg}}</h1><h1>{{number}}</h1><h1>{{arr}}</h1>
</div><script type="module">import {createApp, ref, reactive} from "./vue.esm-browser.js";createApp({setup() {const number = ref(10) //ref 用于存储单个基本数据类型的数据，如数字，字符串number.value = 20  // 使用ref 创建的响应式对象，需要通过.value 属性来访问和修改其值const arr = [1, 2, 3]const Web = reactive({title: "码农编程进阶笔记",url: "www.baidu.com"})Web.url = "www.sina.com"return {msg: "success",Web,number, arr}}}).mount('#app')
</script>
</body>
</html>

问题：发生跨域问题

Access to script at 'file:///Users/new/Desktop/webroot/vue/vue.esm-browser.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: chrome, chrome-extension, chrome-untrusted, data, http, https, isolated-app.

这个报错表明你遇到了跨域相关的问题，以下是对该报错的详细分析以及解决办法：

报错原因

当你在浏览器中直接通过 file:// 协议（本地文件协议）去加载一个 JavaScript 文件（这里是 vue.esm-browser.js），并且该文件中的代码尝试进行一些跨域相关的操作（比如加载其他资源、发起 Ajax 请求等，虽然在你这个例子里可能只是模块加载的情况，但本质上涉及到了同源策略的限制）时，浏览器的同源策略就会起作用。

同源策略要求协议、域名和端口都要相同才允许进行资源交互，而 file:// 协议下的页面被认为是没有明确的 “源”（origin 为 null），它与正常的网络请求所遵循的 http、https 等协议的交互机制不同，浏览器默认是禁止 file:// 协议下的跨域操作的，所以就会出现被 CORS（跨域资源共享）政策阻止的情况，提示只支持 chrome、chrome-extension、chrome-untrusted、data、http、https、isolated-app 这些协议方案下的跨域请求。

解决办法

以下是几种常见的解决思路：

1. 使用本地服务器来运行项目
  • 原理：
    将项目通过本地服务器（比如基于 Node.js 的 http-server、live-server 等工具，或者使用集成开发环境自带的服务器功能，如 WebStorm 等 IDE 可以方便地启动本地服务器）以 http 协议来运行，这样就符合了浏览器跨域策略中支持的协议类型，能避免 file:// 协议带来的跨域限制问题。
  • 示例操作（以 http-server 为例）：
    • 首先确保已经安装了 http-server，如果没安装，可以通过 npm install -g http-server（全局安装，前提是已经安装了 Node.js 和 npm）命令来安装。
    • 打开命令行，进入到包含 vue.esm-browser.js 文件的项目根目录（例如在你的例子中就是 /Users/new/Desktop/webroot/vue/ 这个目录），然后运行 http-server 命令。
    • 之后 http-server 会启动并显示一个本地的访问地址（一般是类似 http://localhost:8080 这样的形式，端口可能会根据实际情况不同），通过浏览器访问这个地址来查看你的项目，此时应该就不会出现上述跨域报错了，因为模块加载等操作都在 http 协议下进行，符合跨域策略要求。

2. 配置浏览器允许跨域访问本地文件（不太推荐，存在安全风险）
  • 原理：
    对于一些特定的浏览器（如 Chrome），可以通过设置一些特定的启动参数或者安装扩展来放宽对本地文件跨域访问的限制，但这种方式会降低浏览器的安全性，因为它绕过了原本的安全策略，所以一般只建议在开发测试环境且明确知晓风险的情况下使用。
  • 示例操作（以 Chrome 为例）：
    • 方法一：使用命令行参数启动
      在终端中通过添加 --disable-web-security 和 --user-data-dir 参数来启动 Chrome，例如（在 macOS 或 Linux 下）：
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-web-security --user-data-dir=/tmp/chromeTemp

（在 Windows 下类似地找到 Chrome 的可执行文件路径并添加参数启动），不过这种方式每次启动 Chrome 都需要这样操作，不太方便。

  • 方法二：使用扩展（有一些专门用于开发时临时解决跨域问题的扩展，如 Allow CORS: Access-Control-Allow-Origin 等）
    先在 Chrome 网上应用店中搜索安装这类扩展，安装后在扩展的设置中启用对本地文件的跨域访问权限等相关配置，这样在使用 Chrome 访问本地文件时就可能绕过跨域限制了，但要记得在正式环境不要使用这类扩展，避免安全隐患。

总之，推荐优先采用使用本地服务器运行项目的方式来解决这个问题，既能保证安全性，又符合正常的网页开发和跨域规范。

二、绑定事件

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><h1>{{Web.title}}</h1><h1>{{Web.url}}</h1><h1>{{Web.user}}</h1><button v-on:click="edit">修改</button><button @click="edit">修改-简写形式@</button><hr>回车 <input type="text" @keyup.enter="add(40,60)"><br>空格 <input type="text" @keyup.space="add(10,20)"><br>Tab <input type="text" @keydown.tab="add(20,20)"><br>W <input type="text" @keyup.w="add(1,2)"><br><!--    组合快捷键-->Ctrl+Enter <input type="text" @keyup.ctrl.enter="add(40,60)"><br>Ctrl+A <input type="text" @keyup.ctrl.a="add(40,60)"><br>
</div><script type="module">import {createApp, reactive} from "./vue.esm-browser.js";createApp({setup() {const Web = reactive({title: '码农编程进阶笔记',url: "http://www.baidu.com",user: 0})const edit = () => {Web.url = 'www.sina.com'}const add = (a, b) => {Web.user += a + b}return {msg: "success",Web,add,edit}}}).mount("#app")</script>
</body>
</html>

三、显示与隐藏

相关文章：

vue 基础学习

一、ref 和reactive 区别 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title> </head> <body><div id"app"><h1>{{Web.title}}</h1><h1&…...

编程日记 2024/12/26 19:51:43

HarmonyOS NEXT 实战之元服务：静态案例效果---查看国际航班服务

背景&#xff1a; 前几篇学习了元服务&#xff0c;后面几期就让我们开发简单的元服务吧&#xff0c;里面丰富的内容大家自己加&#xff0c;本期案例 仅供参考 先上本期效果图 &#xff0c;里面图片自行替换 效果图1完整代码案例如下&#xff1a; Index代码 import { authen…...

编程日记 2024/12/26 19:49:41

PetaLinux 内核输出信息的获取方式

串口终端: 默认输出方式。 曾尝试过将串口终端的输出重映射到伪终端&#xff0c;失败了。 伪终端: dmesg命令 dmesg是Linux系统重查看内核日志的使用工具&#xff0c;允许查看系统内核的输出消息&#xff0c;包括引导信息&#xff0c;硬件检测&#xff0c;设备驱动和系统错…...

编程日记 2024/12/26 19:48:40

Android使用辅助服务AccessibilityService实现自动化任务

Android 辅助服务&#xff08;AccessibilityService&#xff09;旨在帮助具有视觉、身体或年龄相关限制的用户更轻松地使用 Android 设备和应用。通过辅助服务&#xff0c;可以将一些人工操作自动化&#xff0c;从而解放用户的双手。 因此我们可以使用它来实现一些自动化任务&a…...

编程日记 2024/12/26 19:44:36

工业大数据分析算法实战-day15

文章目录 day15特定数据类型的算法工业分析中的数据预处理工况划分数据缺失时间数据不连续强噪声大惯性系统趋势项消除 day15 今天是第15天&#xff0c;昨日是针对最优化算法、规则推理算法、系统辨识算法进行了阐述&#xff0c;今日主要是针对其他算法中的特定数据类型的算法…...

编程日记 2024/12/26 19:43:35

C语言实现顺序表详解

文章目录 [TOC] 1.前言&#x1f64b;&#x1f3fc;‍♂️2.顺序表&#x1f9e3;2.1 顺序表概念&#x1f9e3;2.2 顺序表特点&#x1f9e3;2.2 顺序表作用&#x1f9e3; 3.顺序表基操&#x1f9e4;3.1 结构体初始化&#x1f389;3.2 顺序表初始化&#x1f389;3.3 顺序表创建&am…...

编程日记 2024/12/26 19:37:25

【ES6复习笔记】对象方法扩展（17）

对象方法扩展 在 JavaScript 中&#xff0c;对象是属性和方法的集合。除了内置的方法&#xff0c;我们还可以通过扩展对象的原型来添加新的方法。本教程将介绍如何使用 Object.is、Object.assign 和 Object.setPrototypeOf 方法来扩展对象。 1. Object.is 判断两个值是否完全…...

编程日记 2024/12/26 19:36:24

【视觉惯性SLAM：相机成像模型】

相机成像模型介绍 相机成像模型是计算机视觉和图像处理中的核心内容&#xff0c;它描述了真实三维世界如何通过相机映射到二维图像平面。相机成像模型通常包括针孔相机的基本成像原理、数学模型&#xff0c;以及在实际应用中如何处理相机的各种畸变现象。 一、针孔相机成像原…...

编程日记 2024/12/26 19:35:23

学习笔记（C#基础书籍）-- C#基础篇

&#xff08;12.24&#xff09; C#介绍&#xff1a;《第一章》 特点&#xff1a;语法简洁&#xff0c;面向对象&#xff0c;支持绝大部分的web标准&#xff0c;强大的安全机制&#xff08;垃圾回收器&#xff09;&#xff0c;兼容性好&#xff08;遵循.NET的公共语言规范【CL…...

编程日记 2024/12/26 19:33:19

操作系统（26）数据一致性控制

前言 操作系统数据一致性控制是确保在计算机系统中&#xff0c;数据在不同的操作和处理过程中始终保持正确和完整的一种机制。 一、数据一致性的重要性 在当今数字化的时代&#xff0c;操作系统作为计算机系统的核心&#xff0c;负责管理和协调各种资源&#xff0c;以确保计算机…...

编程日记 2024/12/26 19:32:17

ubuntu24.04使用opencv4

ubuntu24.04LTS自带opencv4.5代码实例 //opencv_example.cpp #include <opencv2/opencv.hpp> #include <iostream>int main() {// 读取图像cv::Mat img cv::imread("image.jpg", cv::IMREAD_COLOR);if (img.empty()) {std::cerr << "无法读…...

编程日记 2024/12/26 19:31:16

【项目构建】Gradle入门

本文适用&#xff1a; 不知道什么是项目构建&#xff0c;可以了解下Ant&#xff0c;Maven&#xff0c;Gradle的区别。知道什么是项目构建&#xff0c;了解Ant&#xff0c;Maven&#xff0c;可以看到Gradle是怎么做的。知道什么是项目构建&#xff0c;了解Ant&#xff0c;Maven&…...

编程日记 2024/12/26 19:20:01

Electron -- Electron应用主要核心（二）

Electron 应用主要由以下几个核心组成部分构成&#xff1a; 主进程&#xff08;Main Process&#xff09;&#xff1a; Electron 应用的入口点是主进程&#xff0c;通常是 main.js 文件。它负责管理应用的生命周期&#xff0c;包括创建窗口、处理系统事件和应用更新等。主进程可…...

编程日记 2024/12/26 19:09:50

【前端开发】HTML+CSS+JavaScript前端三剑客的基础知识体系了解

前言 &#x1f31f;&#x1f31f;本期讲解关于HTMLCSSJavaScript的基础知识&#xff0c;小编带领大家简单过一遍~~~ &#x1f308;感兴趣的小伙伴看一看小编主页&#xff1a;GGBondlctrl-CSDN博客 &#x1f525; 你的点赞就是小编不断更新的最大动力 …...

编程日记 2024/12/26 19:08:48

git命令恢复/还原某个文件、删除远程仓库中的文件

有时刚创建的远程仓库&#xff0c;可能无意中把一些没用的文件上传到仓库&#xff0c;本文介绍一下怎么删除这些文件。 一、git命令恢复某个文件 第一步&#xff1a;拉取最新代码 git pull 第二步&#xff1a; 查看git 修改的文件状态 git status 第三步&#xff1a;查看…...

编程日记 2024/12/26 19:06:46

二十一、Ingress 进阶实践

架构参考 使用hostnetwork，推荐的方式，使用单独的物理服务器，不部署业务pod的主机。 一、Ingress Nginx Controller 安装 采用helm的安装方式，进行部署。 官网地址： https://kubernetes.github.io/ingress-nginx/deploy/ github地址： https://github.com/kubernetes/in…...

编程日记 2024/12/26 19:05:41

ES学习Promise对象（九）

这里写目录标题 一、概念二、示例基本使用使用 Promise 对象封装Ajaxthen() 方法catch() 方法 一、概念 简单说就是一个容器&#xff0c;里面保存着某个未来才会结束的事件&#xff08;通常是一个异步操作&#xff09;的结果。Promise 是一个对象&#xff0c;Promise 提供统一…...

编程日记 2024/12/26 18:58:33

寻找适合小户型的开源知识库open source knowledge base之路

寻找一个开源的知识库&#xff0c;为了把以前花很多时间收集的信息或是项目/课程资料放到一个容易归类和管理的私有自主系统中&#xff0c;以便更容易查阅&#xff0c;花更少时间收集、对比版本及分享等一系列管理工作&#xff0c;同时确保在需要时可以相对快速找到有用的资料&…...

编程日记 2024/12/26 18:57:31

Linux高级--2.6 网络面试问题

tcp 与 udp的区别 1.tcp 是基于连接的 UDP是基于数据包 2.处理并发的方式不通 a.tcp用epoll进行监听的 b. udp是模拟tcp的连接过程&#xff0c;服务端开放一个IP端口&#xff0c;收到连接后&#xff0c;服务端用另一个IP和端口发包给客户端。 3.tcp根据协议MTU黏包及…...

编程日记 2024/12/26 18:55:27

在 CentOS 7 上安装 Node.js 20 并升级 GCC、make 和 glibc

在 CentOS 7 上安装 Node.js 20 并升级 GCC、make 和 glibc &#x1f4d6; 前言 在 CentOS 7 上使用 NVM 安装 Node.js 后&#xff0c;可能会遇到如下问题&#xff1a; node: /lib64/libm.so.6: version GLIBC_2.27’ not found (required by node) node: /lib64/libc.so.6:…...

编程日记 2024/12/26 18:54:24

豆包写小说软件2025推荐，专业写作助力灵感迸发

豆包写小说软件2025推荐&#xff0c;专业写作助力灵感迸发在当今数字化时代&#xff0c;写小说成为了许多人表达自我、实现创作梦想的途径。然而&#xff0c;对于众多写作者来说&#xff0c;寻找一款专业且实用的写小说软件并非易事。据《2025中国写作软件行业白皮书》显示&…...

编程新知 2026/4/6 22:06:44

金融级权限设计实战：用RBAC3模型搞定互斥角色、基数限制与操作审计

金融级权限架构设计&#xff1a;基于RBAC3模型的合规实战指南 在金融行业数字化转型浪潮中&#xff0c;权限管理系统不仅是技术组件&#xff0c;更是合规生命线。某跨国银行曾因角色权限漏洞导致数千万美元误操作&#xff0c;最终面临监管重罚——这个真实案例揭示了权限设计在…...

编程新知 2026/4/6 22:00:39

Golang笔记1-变量与类型

Go 变量与类型 1. 怎么声明变量 // var 写法&#xff1a;可以在函数外用&#xff08;全局&#xff09; var name string "张三" var age int 25 var isAdmin bool // 不赋值就是零值// : 短声明&#xff1a;只能在函数内用&#xff08;日常首选&#xff09; name :…...

编程新知 2026/4/6 21:36:06

Repomix性能基准测试：不同规模代码库表现终极指南

Repomix性能基准测试&#xff1a;不同规模代码库表现终极指南 【免费下载链接】repomix &#x1f4e6; Repomix is a powerful tool that packs your entire repository into a single, AI-friendly file. Perfect for when you need to feed your codebase to Large Language …...

编程新知 2026/4/6 21:05:42

Globe.gl性能优化秘籍：如何高效处理大规模卫星数据可视化

Globe.gl性能优化秘籍&#xff1a;如何高效处理大规模卫星数据可视化 【免费下载链接】globe.gl UI component for Globe Data Visualization using ThreeJS/WebGL 项目地址: https://gitcode.com/gh_mirrors/gl/globe.gl Globe.gl是一个基于ThreeJS/WebGL的3D地球数据可…...

编程新知 2026/4/6 20:55:34

IM023-将PDF文件导出jpg图片到PDF所在目录下

批量将pdf文档每页导出为jpg图片 比如A文件夹下有B、C、D、E....等文件夹&#xff0c;每个文件夹下都有一定的pdf文件&#xff0c;将程序放在A文件夹下&#xff0c;运行程序后会将B、C、D、E....等文件夹下每个pdf文件分别导出为jpg图片&#xff0c;导出的jpg图片命名方式为&am…...

编程新知 2026/4/6 20:11:14

避坑指南：RK3588以太网调试那些‘看起来通了但实际没通’的坑（附千兆网线识别与ifconfig -a用法）

RK3588以太网深度排雷手册&#xff1a;从"假连通"到真稳定的实战指南 当你看到eth0接口亮起绿色指示灯&#xff0c;ifconfig显示RX/TX数据包在跳动&#xff0c;甚至ping命令能收到零星回复时&#xff0c;是否觉得RK3588的网络已经调试成功&#xff1f;且慢——这可能…...

编程新知 2026/4/6 19:47:06

Tacview自定义模型全攻略：从3D建模到实战应用（附F-500案例文件）

Tacview自定义模型全攻略&#xff1a;从3D建模到实战应用&#xff08;附F-500案例文件&#xff09; 当你在Tacview中看到那些精准还原的飞行器轨迹时&#xff0c;有没有想过如何将自己的3D模型融入这个强大的分析工具&#xff1f;本文将带你从零开始&#xff0c;完整掌握Tacvie…...

编程新知 2026/4/6 19:37:03

vue3新手福音：用快马生成带详细注释的示例代码，轻松掌握核心概念

最近在学习Vue3的过程中&#xff0c;我发现很多新手朋友都会被setup语法和各种响应式概念绕晕。作为一个刚入门的前端小白&#xff0c;我特别理解这种困惑。不过最近发现了一个超实用的方法——用InsCode(快马)平台生成带详细注释的Vue3示例代码&#xff0c;学习效率直接翻倍&a…...

编程新知 2026/4/6 18:46:39

python-langchain框架（3-9-word文档加载 ）

二、基于 LangChain 的功能亮点1. 原生 LangChain 组件&#xff0c;开箱即用直接使用 LangChain 社区提供的专业文档加载器&#xff0c;属于框架原生支持能力&#xff0c;无需自己编写解析逻辑&#xff0c;与 LangChain 整个 AI 开发生态无缝衔接。2. 纯文本精准提取&#xff0…...

编程新知 2026/4/6 16:33:08