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

vue 基础学习

news 2025/9/24 1:19:06

一、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

装饰模式（Decorator Pattern）重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

编程新知 2025/9/20 13:58:11

macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

编程新知 2025/8/18 23:22:02

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

编程新知 2025/9/12 13:41:18

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

编程新知 2025/9/13 8:23:57

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

编程新知 2025/9/22 13:30:02

ip子接口配置及删除

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

编程新知 2025/7/26 12:16:34

GitHub 趋势日报 (2025年06月06日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...

编程新知 2025/9/7 2:12:04

【SpringBoot自动化部署】

SpringBoot自动化部署方法 使用Jenkins进行持续集成与部署 Jenkins是最常用的自动化部署工具之一&#xff0c;能够实现代码拉取、构建、测试和部署的全流程自动化。 配置Jenkins任务时&#xff0c;需要添加Git仓库地址和凭证&#xff0c;设置构建触发器&#xff08;如GitHub…...

编程新知 2025/7/7 11:50:01

Linux操作系统共享Windows操作系统的文件

目录 一、共享文件 二、挂载 一、共享文件 点击虚拟机选项-设置 点击选项&#xff0c;设置文件夹共享为总是启用&#xff0c;点击添加&#xff0c;可添加需要共享的文件夹 查询是否共享成功 ls /mnt/hgfs 如果显示Download&#xff08;这是我共享的文件夹&#xff09;&…...

编程新知 2025/9/21 14:01:48

在Spring Boot中集成RabbitMQ的完整指南

前言 在现代微服务架构中&#xff0c;消息队列&#xff08;Message Queue&#xff09;是实现异步通信、解耦系统组件的重要工具。RabbitMQ 是一个流行的消息中间件&#xff0c;支持多种消息协议&#xff0c;具有高可靠性和可扩展性。 本博客将详细介绍如何在 Spring Boot 项目…...

编程新知 2025/7/27 20:49:33