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

vue 基础学习

news 2026/2/11 1:27:31

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

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

编程新知 2026/2/8 1:22:58

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

编程新知 2025/11/16 8:24:16

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

编程新知 2026/2/7 17:41:40

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

编程新知 2026/2/5 20:33:43

ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

编程新知 2026/2/9 20:01:01

DIY｜Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

编程新知 2026/2/3 8:13:35

AI编程--插件对比分析：CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

编程新知 2026/2/9 2:15:44

什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

编程新知 2025/10/2 17:12:14

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

编程新知 2025/10/3 10:56:48

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

编程新知 2026/1/24 12:01:38