一笑痕
仙人之下我无敌，
仙人之上一换一。
-
-
-
安装依赖插件但是没有官方的类型声明包 报错： Could not find a declaration file for module 'crypto-js'. 'G:/company-projects/sw-fe-auth/node_modules/crypto-js/index.js' implicitly has an 'any' type. Could not find a declaration file for module 'crypto-js'. 'G:/company-projects/sw-fe-auth/node_modules/crypto-js/index.js' implicitly has an 'any' type. 方法一：官方的类型声明包 npm i --save-dev @types/crypto-js（如果报错，执行方法 二） 方法二：创建自定义声明文件 在项目根目录下创建一个 custom-typings.d.ts 文件，并添加以下内容： // custom-typings.d.ts declare module 'crypto-js'; 然后确保项目中的 tsconfig.json 中包含这个声明文件： { "compilerOptions": { "typeRoots": ["./node_modules/@types", "./custom-typings.d.ts"] } } -
vue解决跨域问题 在Vue项目中，跨域问题是一个常见的挑战，尤其是在前后端分离的开发模式下。以下是一些常用的跨域解决方案，涵盖了开发环境和生产环境的不同处理方法： 1. 开发环境下的跨域解决方案 (1) 使用 <span class="ne-text">vue.config.js</span> 配置代理 Vue CLI 提供了 <span class="ne-text">devServer.proxy</span> 配置，可以通过代理服务器转发请求，从而绕过浏览器的同源策略。具体步骤如下： 在项目根目录下创建或修改 <span class="ne-text">vue.config.js</span> 文件。 添加代理配置： module.exports = { devServer: { proxy: { '/api': { // 匹配所有以 /api 开头的请求 target: 'http://your-backend-server.com', // 目标服务器地址 changeOrigin: true, // 允许跨域 pathRewrite: { '^/api': '' } // 重写路径，去掉 /api 前缀 } } } }; 通过这种方式，前端请求会被转发到目标服务器，解决跨域问题[1] [6] [16]。 (2) 使用 <span class="ne-text">vite.config.js</span> 配置代理（适用于Vue 3 + Vite） 如果项目使用 Vite 作为构建工具，可以在 <span class="ne-text">vite.config.js</span> 中进行代理配置： import { defineConfig } from 'vite'; export default defineConfig({ server: { proxy: { '/api': { target: 'http://your-backend-server.com', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } } }); 这种方法与 Vue CLI 的代理配置类似[32]. 2. 生产环境下的跨域解决方案 (1) Nginx 反向代理 在生产环境中，可以通过 Nginx 配置反向代理来解决跨域问题。具体配置如下： 修改 Nginx 配置文件（通常位于 <span class="ne-text">/etc/nginx/nginx.conf</span> 或 <span class="ne-text">/etc/nginx/conf.d/default.conf</span>）。 添加反向代理配置： server { listen 80; server_name your-domain.com; location /api/ { proxy_pass http://your-backend-server.com/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } 通过 Nginx 反向代理，前端请求会被转发到目标服务器，解决跨域问题[12] [23]. (2) 后端配置 CORS（跨源资源共享） 如果后端支持 CORS，可以通过设置响应头来允许跨域请求。例如，在 Spring Boot 中可以通过以下方式配置： @Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("GET", "POST", "PUT", "DELETE") .allowedHeaders("*"); } } 这种方法需要后端支持，适合前后端协作开发的场景[5] [40]. 3. 其他跨域解决方案 (1) JSONP JSONP 是一种通过 <span class="ne-text"><script></span> 标签实现跨域请求的技术，适合处理简单的 GET 请求。但是，JSONP 不支持 POST 请求，且需要后端配合[22] [26]. (2) 使用中间件或第三方插件 一些第三方插件（如 <span class="ne-text">http-proxy-middleware</span>）可以帮助在开发环境中处理跨域问题。这种方法适用于复杂的场景，但需要额外的配置[14] [17]. 总结 在 Vue 项目中，跨域问题可以通过代理、CORS、Nginx 等多种方式解决。开发环境推荐使用 <span class="ne-text">vue.config.js</span> 或 <span class="ne-text">vite.config.js</span> 配置代理，生产环境则建议使用 Nginx 反向代理或后端配置 CORS。选择合适的解决方案，可以显著提升开发效率和用户体验。 -
Vue3中的WebSocket使用 WebSocket 是一种在客户端和服务器之间进行全双工通信的协议。它提供了一种实时、持久的连接方式，可以用于实现实时数据更新、即时通讯等功能。在 Vue 3 中，可以通过 WebSocket API 来实现与服务器的 WebSocket 连接。 常见使用场景 WebSocket 在实时通信和推送场景中非常常见，以下是一些常见的使用场景： 实时聊天应用程序：通过 WebSocket 可以实现实时的双向通信，用于构建在线聊天室或即时通讯应用。 实时数据更新：通过 WebSocket 可以实时获取服务器端的数据更新，例如股票行情、即时新闻等。 多人协作编辑：通过 WebSocket 可以实现多人协作编辑功能，多个用户可以同时编辑同一文档并实时同步修改。 实时游戏：通过 WebSocket 可以实现多人实时游戏，实现玩家之间的实时通信和状态同步。 安装依赖 首先，需要安装 vue-native-websocket 库，它提供了在 Vue 中使用 WebSocket 的功能。 npm install vue-native-websocket 创建 WebSocket 实例 在 Vue 3 中，可以在组件中通过 setup 函数创建 WebSocket 实例，并将其添加到组件的上下文中。 import { ref, onMounted, onUnmounted } from 'vue'; import { useWebSocket } from 'vue-native-websocket'; export default { setup() { const socket = useWebSocket('wss://xxxx/socket'); // 监听连接事件 onMounted(() => { socket.value.onopen = () => { console.log('WebSocket connected'); }; }); // 监听消息事件 const message = ref(''); socket.value.onmessage = (event) => { message.value = event.data; }; // 监听关闭事件 onUnmounted(() => { socket.value.onclose = () => { console.log('WebSocket disconnected'); }; }); return { message, }; }, }; 在上面的例子中，通过 useWebSocket 函数创建了一个 WebSocket 实例，并指定了要连接的 WebSocket 地址。使用 onMounted 钩子来监听连接事件，当 WebSocket 连接成功时，打印出一条消息。还使用 onUnmounted 钩子来监听关闭事件，当 WebSocket 连接关闭时，打印出一条消息。 发送消息 可以通过 WebSocket 实例的 send 方法来发送消息到服务器。 socket.value.send('Hello, server!'); 在上面的例子中，通过 send 方法发送了一条消息到服务器。 常用方法 1. 连接错误 如果连接失败，可以通过 onerror 事件处理错误。 socket.value.onerror = (event) => { console.error('WebSocket error:', event); }; 通过 onerror 事件处理连接错误，并将错误信息打印到控制台。 2. 重新连接 如果 WebSocket 连接断开，可以通过重新创建 WebSocket 实例来重新连接。 socket.value.onclose = () => { console.log('WebSocket disconnected'); // 重新连接 socket.value = useWebSocket('wss://example.com/socket'); }; 通过 onclose 事件监听连接关闭，并在连接关闭时重新创建 WebSocket实例来重新连接。 3. 心跳机制 为了保持 WebSocket 连接的活跃状态，可以使用心跳机制定期发送心跳消息。 // 心跳消息 const heartbeatMessage = 'ping'; // 定时发送心跳消息 setInterval(() => { socket.value.send(heartbeatMessage); }, 5000); // 监听消息事件 socket.value.onmessage = (event) => { const message = event.data; if (message === heartbeatMessage) { // 收到心跳消息，做相应处理 } else { // 处理其他消息 } }; 定期发送心跳消息，并在收到心跳消息时进行相应处理。 使用 Vuex 进行 WebSocket 状态管理 在复杂的应用中，可能需要在多个组件之间共享 WebSocket 的连接状态和接收到的消息。这时，可以使用 Vuex 进行 WebSocket 状态的管理。 首先，需要安装 vuex。 npm install vuex 然后，创建一个 websocket 模块来管理 WebSocket 的状态。 // store/modules/websocket.js const state = { socket: null, message: '', }; const mutations = { SET_SOCKET(state, socket) { state.socket = socket; }, SET_MESSAGE(state, message) { state.message = message; }, }; const actions = { connect({ commit }) { const socket = useWebSocket('wss://xxxxx/socket'); socket.value.onopen = () => { console.log('WebSocket connected'); }; socket.value.onmessage = (event) => { commit('SET_MESSAGE', event.data); }; socket.value.onclose = () => { console.log('WebSocket disconnected'); }; commit('SET_SOCKET', socket); }, sendMessage({ state }, message) { state.socket.value.send(message); }, }; export default { state, mutations, actions, }; 然后，在主 store 文件中导入和注册该模块。 // store/index.js import { createStore } from 'vuex'; import websocket from './modules/websocket'; export default createStore({ modules: { websocket, }, }); 现在，可以在组件中使用 mapState 和 mapActions 辅助函数来访问 WebSocket 的状态和发送消息。 <template> <div> <p>Message: {{ message }}</p> <button @click="sendMessage">Send Message</button> </div> </template> <script> import { mapState, mapActions } from 'vuex'; export default { computed: { ...mapState('websocket', ['message']), }, methods: { ...mapActions('websocket', ['connect', 'sendMessage']), }, mounted() { this.connect(); }, }; </script> 使用 mapState 辅助函数将 websocket 模块的 message 状态映射到组件的计算属性，使用 mapActions 辅助函数将 websocket 模块的 connect 和 sendMessage 方法映射到组件的方法。在组件的 mounted 钩子中调用 connect 方法来建立 WebSocket 连接。 常见问题处理 1. 跨域问题 当使用 WebSocket 连接到不同域的服务器时，可能会遇到跨域问题。为了解决这个问题，服务器需要设置适当的 CORS 头部。 2. 断线重连 在 WebSocket 连接断开的情况下，可以通过在 onclose 事件中重新建立连接来实现断线重连。 socket.value.onclose = ()=> { setTimeout(() => { connect(); }, 3000); }; 使用 setTimeout 函数在连接断开后等待 3 秒钟重新建立连接。 3. 消息队列和缓存 在网络不稳定或连接断开的情况下，可能会导致消息丢失。为了解决这个问题，可以使用消息队列和缓存机制来保证消息的可靠传输和持久化存储。 在 Vuex 中，可以使用数组来作为消息队列，并在连接恢复后重新发送未发送的消息。 const state = { socket: null, messageQueue: [], }; const actions = { sendMessage({ state }, message) { if (state.socket.value.readyState === WebSocket.OPEN) { state.socket.value.send(message); } else { state.messageQueue.push(message); } }, reconnect({ state, dispatch }) { if (state.socket.value.readyState === WebSocket.CLOSED) { dispatch('connect'); state.messageQueue.forEach((message) => { dispatch('sendMessage', message); }); state.messageQueue = []; } }, }; 使用 messageQueue 数组来存储未发送的消息。在发送消息时，如果 WebSocket 连接处于打开状态，直接发送消息；否则，将消息添加到消息队列中。在重新连接时，遍历消息队列并重新发送未发送的消息。 4. 心跳检测 在 WebSocket 连接中，由于网络波动或其他原因，连接可能会在一段时间内变得不活跃。为了保持连接的稳定性，可以使用心跳检测机制来定期发送心跳消息，以确保连接保持活跃。 const PING_INTERVAL = 5000; // 心跳间隔，单位为毫秒 const actions = { connect({ commit, dispatch }) { const socket = useWebSocket('wss://example.com/socket'); socket.value.onopen = () => { console.log('WebSocket connected'); // 启动心跳检测 setInterval(() => { dispatch('sendHeartbeat'); }, PING_INTERVAL); }; // ... }, sendHeartbeat({ state }) { if (state.socket.value.readyState === WebSocket.OPEN) { state.socket.value.send('ping'); } }, }; 在上面的例子中，在连接建立后启动了一个定时器，定期发送心跳消息（"ping"）。通过定期发送心跳消息，可以确保连接保持活跃，并在一段时间内检测到连接断开的情况。 5. 错误处理 在使用 WebSocket 过程中，可能会出现各种错误，如连接错误、消息发送失败等。为了处理这些错误，可以在相应的事件处理程序中进行错误处理。 socket.value.onerror = (error) => { console.error('WebSocket error:', error); }; socket.value.onmessage = (event) => { // 处理接收到的消息 }; socket.value.onclose = (event) => { if (event.code === 1006) { console.error('WebSocket connection closed unexpectedly'); } else { console.log('WebSocket disconnected'); } }; 在 onerror 事件处理程序中打印错误信息，并在 onclose 事件处理程序中根据关闭代码进行适当的错误处理。 6. 清理和销毁 在 Vue 3 中，组件销毁时，需要确保关闭 WebSocket 连接以及清理相关资源，以避免内存泄漏和不必要的网络连接。 import { onBeforeUnmount } from 'vue'; export default { setup() { const socket = useWebSocket('wss://example.com/socket'); // ... onBeforeUnmount(() => { if (socket.value && socket.value.readyState === WebSocket.OPEN) { socket.value.close(); } }); // ... }, }; 使用 onBeforeUnmount 钩子函数来监听组件销毁前的事件，并在该事件触发时关闭 WebSocket 连接。
-
如何新建vue2、vue3项目 注意：不要用git的git Bash的控制台打开，因为安装选择时这个控制台不能够进行上下选项切换，用系统自带的cmd进行项目创建！ 一、安装npm ，现用node.js中自带的npm，安装node.js node-v14.20.1-x64 二、使用淘宝NPM镜像 【win+r】输入cmd，打开命令行窗口，输入 npm install -g cnpm --registry=https://registry.npmmirror.com 三、项目初始化 安装 vue-cli vue-cli2： // 全局安装 npm install -g vue-cli 或 cnpm install -g vue-cli // 卸载 npm uninstall -g vue-cli 或 cnpm uninstall -g vue-cli vue-cli3 / vue-cli4： // 全局安装 npm install -g @vue/cli@版本号 或 cnpm install -g @vue/cli@版本号 // 卸载 npm uninstall -g @vue/cli@版本号 或 cnpm uninstall -g @vue/cli@版本号 注：原cli3/cli4的安装指令为@vue/cli，因为cli5的出现同样使用了@vue/cli，所以想要安装3/4的版本，就需要在@vue/cli后面加上@版本号（例：npm install -g @vue/cli@3.11.0）。 vue-cli5： // 全局安装 npm install -g @vue/cli 或 cnpm install -g @vue/cli // 卸载 npm uninstall -g @vue/cli 或 cnpm uninstall -g @vue/cli vite 搭建第一个 Vite 项目¶ Vite 搭建第一个 Vite 项目 兼容性注意 Vite 需要 Node.js 版本 18+ 或 20+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。 npmYarnpnpmBun bash $ npm create vite@latest 然后按照提示操作即可！ 你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行: npmYarnpnpmBun bash # npm 7+，需要添加额外的 --： $ npm create vite@latest my-vue-app -- --template vue 查看 create-vite 以获取每个模板的更多细节：vanilla，vanilla-ts，vue，vue-ts，react，react-ts，react-swc，react-swc-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts，solid，solid-ts，qwik，qwik-ts。 你可以使用 . 作为项目名称，在当前目录中创建项目脚手架。 社区模板 create-vite 是一个快速生成主流框架基础模板的工具。查看 Awesome Vite 仓库的 社区维护模板，里面包含各种工具和不同框架的模板。 对于一个 https://github.com/user/project 中的模板，可以尝试使用 https://github.stackblitz.com/user/project（即在项目 URL 的 github 后添加 .stackblitz）。 你也可以用如 degit 之类的工具，使用社区模版来搭建项目。假设项目在 GitHub 上并使用 main 作为默认分支，可以使用以下命令创建本地副本： bash npx degit user/project#main my-project cd my-project npm install npm run dev 手动安装 在你的项目中，可以用以下方法来安装 vite 命令行工具： npmYarnpnpmBun bash $ npm install -D vite 并创建一个像这样的 index.html 文件： html <p>Hello Vite!</p> 然后在终端上运行相应的命令: npmYarnpnpmBun bash $ npx vite 之后就可以在 http://localhost:5173 上访问 index.html。 index.html 与项目根目录 你可能已经注意到，在一个 Vite 项目中，index.html 在项目最外层而不是在 public 文件夹内。这是有意而为之的：在开发期间 Vite 是一个服务器，而 index.html 是该 Vite 项目的入口文件。 Vite 将 index.html 视为源码和模块图的一部分。Vite 解析 <script type="module" src="..."> ，这个标签指向你的 JavaScript 源码。甚至内联引入 JavaScript 的 <script type="module"> 和引用 CSS 的 <link href> 也能利用 Vite 特有的功能被解析。另外，index.html 中的 URL 将被自动转换，因此不再需要 %PUBLIC_URL% 占位符了。 与静态 HTTP 服务器类似，Vite 也有 “根目录” 的概念，即服务文件的位置，在接下来的文档中你将看到它会以 <root> 代称。源码中的绝对 URL 路径将以项目的 “根” 作为基础来解析，因此你可以像在普通的静态文件服务器上一样编写代码（并且功能更强大！）。Vite 还能够处理依赖关系，解析处于根目录外的文件位置，这使得它即使在基于 monorepo 的方案中也十分有用。 Vite 也支持多个 .html 作入口点的 多页面应用模式。 指定替代根目录 执行 vite 命令会以当前工作目录作为根目录启动开发服务器。你也可以通过 vite serve some/sub/dir 来指定一个不同的根目录。 需要注意的是，Vite 也会在项目的根目录中寻找 它的配置文件（即vite.config.js），所以如果更改了根目录，你需要将配置文件一起移动过去。 命令行接口 在安装了 Vite 的项目中，可以在 npm scripts 中使用 vite 可执行文件，或者直接使用 npx vite 运行它。下面是通过脚手架创建的 Vite 项目中默认的 npm scripts： package.json json { "scripts": { "dev": "vite", // 启动开发服务器，别名：`vite dev`，`vite serve` "build": "vite build", // 为生产环境构建产物 "preview": "vite preview" // 本地预览生产构建产物 } } 可以指定额外的命令行选项，如 --port 或 --open。运行 npx vite --help 获得完整的命令行选项列表。 查看 命令行接口 了解更多细节。 使用未发布的功能 如果你迫不及待想要体验最新的功能，可以使用 https://pkg.pr.new 安装特定的 Vite 提交： npmYarnpnpmBun bash $ npm install -D https://pkg.pr.new/vite@SHA 将 SHA 替换为 Vite 的提交 SHA。请注意，仅最近一个月的提交有效，旧版本提交的构建产物会被清除。 或者，你可以克隆 Vite 代码仓库 到本地，自行构建并建立软链接（需安装 pnpm）： bash git clone https://github.com/vitejs/vite.git cd vite pnpm install cd packages/vite pnpm run build pnpm link --global # 在这一步中可使用你喜欢的包管理器 然后，回到你的 Vite 项目并运行 pnpm link --global vite（或者使用你的其他包管理工具来全局链接 vite）。重新启动开发服务器来体验新功能吧！ 处理依赖中的 Vite 版本 若需替换依赖链中传递使用的 Vite 版本（Transitive Dependencies），应使用 npm overrides 或 pnpm overrides。 社区 如果你有疑问或者需要帮助，可以到 Discord 和 GitHub Discussions 社区来寻求帮助。 查看是否安装成功 vue -V 四、创建项目 // vue-cli2 vue init webpack demo // webpack是最常用的，demo 为项目名称，项目名称不能出现大写字母 // vue-cli3/vue-cli4/vue-cli5 (只有3以上的cli版本才可以选择vue3x版本) vue create demo // demo 为项目名称 注意事项 在执行 vue create demo后，有选择创建vue2和vue3项目的选项，根据选项选择即可,按空格键选择，回车键确定全部。 如果要有其他自定义配置，如： 一开始就安装vuex和router,就进行入第三项进行配置， 选择css预处理器时，如果选择sass，就选择第一项，推荐选择dart-sass项dart-sass与node-sass的区别以及使用dart-sass可能会出现的问题 五、项目结构 vue-cli3/cli4中移除了配置文件目录：config和build文件夹。 同时移除了static静态文件夹，新增了public文件夹，将index.html移动到public中。 1. vue-cli2 2.cli3/4/5 六、卸载淘宝镜像、卸载vue-cli npm uninstall cnpm -g npm uninstall vue-cli -g
-
vue从入门到哭泣 第一章 Vue.js 概要介绍 1.1 Vue.js 介绍 Vue 是什么 主流的渐进式JavaScript 框架。 什么是渐近式 可以和传统的网站开发架构融合在一起，例如可以简单的把它当作一个类似JQuery 库来使用。 也可以使用Vue全家桶框架来开发大型的单页面应用程序 。 使用它的原因 vue.js 体积小，编码简洁优雅，运行效率高，用户体验好。 无Dom操作，它能提高网站应用程序的开发效率。 什么场景下使用它 一般是需要开发单页面应用程序 （Single Page Application, 简称:SPA） 的时候去用 单页面应用程序，如：网易云音乐 https://music.163.com/ 因为 Vue 是 渐进式 的，Vue 其实可以融入到不同的项目中，即插即用 读书笔记 1.2 学习资源 英文官网：https://vuejs.org// 中文官网（中文文档很友好）：https://cn.vuejs.org// 官方教程：https://cn.vuejs.org/v2/guide// GitHub：https://github.com/yyx990803 API文档：https://cn.vuejs.org/v2/api// 不建议买书，官方文档很详细，多查官方文档，因为很多书基本上都是直接抄官方文档的 1.3 发展历史 作者：尤雨溪（微博：尤小右），一位华裔前Google 工程师，江苏无锡人。 个人博客：http://www.evanyou.me// 新浪微博：http://weibo.com/arttechdesign 知乎：https://www.zhihu.com/people/evanyou/activities2013年12月8号在 GitHub 上发布了0.6 版 2015年10月份正式发布了 1.0 版本，开始真正的火起来 2016年10月份正式发布了 2.0 版 2019.4.8号发布了 Vue 2.5.10 版本https://github.com/vuejs/vue/releases1.x 版本老项目可能还在用，新项目绝对都是选择2.x 1.4 对比其他前端JS 框架 Angular 2009 年诞生的，起源于个人开发，后来被 Google 收购了。 核心技术： 模板 和 数据绑定 技术，体验越来越差，走下坡路了。 React 2013年5月开源的，起源于 Facebook 的内部项目，对市场上所有 JS 框架都不满意，于是自已写了一套。 核心技术： 组件化 和 虚拟DOM 技术。 Vue.js 吸收了上面两个框架的技术优点。 使用情况： BAT 级别的企业：React 最多> Angular > Vue.js 中小型公司：Vue.js 更多一些，有中文文档学习成本低。 Vue 不支持IE8 及以下版本，因为Vue 使用了IE8 无法模拟ECMAScript 5 特性。 推荐使用最新谷歌浏览器。 第二章Vue 核心技术 2.1 Vue 入门开发 2.1.1 创建工程 2.4 模板数据绑定渲染 可生成动态的HTML页面，页面中使用嵌入 Vue.js 语法可动态生成 {{xxxx}} 双大括号文本绑定 v-xxxx 以 v- 开头用于标签属性绑定，称为指令 在 vue-01-core 目录下新建一个页面： 02-模板数据绑定渲染.html 2.4.1 双大括号语法 {{}} 格式： {{表达式}} 作用： 使用在标签体中 用于获取数据可以使用 JavaScript 表达式. 案例源码： <body> <div id="app"> <h3>1、双大括号输出文本内容</h3> <!--文本内容--> <p>普通文本：{{ message }}</p> <!--使用JS表达式--> <p>JS表达式：{{ number + 1 }}</p> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { message: 'haha', number: 1 } }) </script> </body> 2.4.2 一次性插值 v-once 通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。 一次性插值 v-once 这个将不会改变: {{ message }} ## 2.4.3 输出HTML指令 v-html 格式： v-html='xxxx' 作用： + 如果是HTML格式数据，双大括号会将数据解释为普通文本，为了输出真正的 HTML，你需要使用 v-html 指令。 + Vue 为了防止 XSS 攻击，在此指令上做了安全处理，当发现输出内容有 script 标签时，则不渲染。 XSS 攻击主要利用 JS 脚本注入到网页中，读取 Cookie 值（Cookie一般存储了登录身份信息），读取到了发送到黑客服务器，从而黑客可以使用你的帐户做非法操作。 XSS 攻击还可以在你进入到支付时，跳转到钓鱼网站。 案例源码： ```html 3、v-html 指令输出真正的 HTML 内容 双大括号：{{ contentHtml }} v-html指令： var vm = new Vue({ el: '#app', data: { message: 'haha', number: 1, contentHtml: '红色字体内容' contentHtml: '红色字体内容> alert("hello vue")' } }) ```
-