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

vue 基础学习

article 2024/12/26 23:53:32

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