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

vue 基础学习

news 2025/11/17 12:21:51

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

浏览器访问 AWS ECS 上部署的 Docker 容器（监听 80 端口）

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

编程新知 2025/11/16 23:25:00

后进先出（LIFO）详解

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

编程新知 2025/11/16 9:11:43

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/8/12 16:28:43

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2025/11/17 0:38:08

React Native 开发环境搭建（全平台详解）

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

编程新知 2025/10/7 2:47:54

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

编程新知 2025/11/16 22:28:40

无法与IP建立连接，未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

编程新知 2025/11/14 0:06:55

JVM暂停（Stop-The-World，STW）的原因分类及对应排查方案

JVM暂停（Stop-The-World，STW）的完整原因分类及对应排查方案，结合JVM运行机制和常见故障场景整理而成： 一、GC相关暂停​​ 1. ​​安全点（Safepoint）阻塞​​ ​​现象​​：JVM暂停但无GC日志，日志显示No GCs detected。​​原因​​：JVM等待所有线程进入安全点（如…...

编程新知 2025/10/2 12:07:03

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

编程新知 2025/8/25 19:12:45

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机&#xff08;无人驾驶飞行器&#xff0c;UAV&#xff09;技术的快速发展&#xff0c;其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统&#xff0c;无人机的“黑飞”&…...

编程新知 2025/11/17 11:27:04