随笔分类 - Vue
vue技术栈相关
摘要：自定义事件.sync 修饰符的使用 在有些情况下，我们可能需要对一个 prop 进行“双向绑定” // 子组件： this.$emit('update:title', newTitle) // 父组件 <text-document v-bind:title="doc.title" v-on:upda
阅读全文
摘要：在Vue项目中使用SVG图标可以提高加载速度并方便自定义，以下是几种常见的实现方式： 方法一：直接导入SVG文件（推荐） 首先创建一个全局组件 SvgIcon.vue： <template> <svg :class="svgClass" aria-hidden="true" v-bind="$att
阅读全文
摘要：本方案探讨基于vue2，ElementUI技术栈 下拉列表数据在新增页面中的流动轨迹 第一步： 获取下拉列表数据集合 前端自定义字典 定义对象类型（key：表示id， value： 表示label） 定义数组类型 [{label:'是'， value:1},{label: '否', value: 2
阅读全文
摘要：在 Vue 3 中使用 SVG 作为图标有多种方法，以下是几种常见且推荐的方式： 方法 1：直接内联 SVG（推荐） 将 SVG 代码直接嵌入 Vue 组件模板中，通过 CSS 控制样式。 步骤： 复制 SVG 代码（从设计工具或文件） 在组件中粘贴并优化：<template> <div class
阅读全文
摘要：在 Vue 2 中使用 Vuex 主要分为以下步骤： 1. 安装 Vuex npm install vuex@3 --save # Vue 2 对应 Vuex 3 # 或 yarn add vuex@3 2. 创建 Vuex Store 在项目中创建 src/store/index.js 文件： i
阅读全文
摘要：在Vue 2中，scoped样式默认不会传递到子组件。但有几种情况和方法可以实现样式穿透，让父组件的scoped样式影响子组件： 1. 默认行为：scoped样式不影响子组件 当你在父组件中使用scoped属性时，Vue会通过生成唯一的属性选择器（如data-v-123456）来限制样式的作用域。这
阅读全文
摘要：在Vue中使用Vuex进行状态管理，可以按照以下步骤操作： 1. 安装Vuex 使用npm或yarn安装Vuex： npm install vuex@next --save # Vue3 # 或 Vue2使用 npm install vuex@3 --save 2. 创建Store 在src/sto
阅读全文
摘要：1. 初始化项目 // 创建vue基础代码框架, 可选择支持typescript，vue-router, pinia, jsx, Eslint, prettier pnpm create vue // 添加路由支持 (创建基础代码框架时可选) pnpm add vue-router // 添加数据状
阅读全文
摘要：以 vite + vue3 + ElementPlus + pinia 开发技术栈所遇到的技术难题及解决方案汇总 如何在 vite+vue3 项目中支持 jsx 技术 安装插件 pnpm add -D @vitejs/plugin-vue-jsx 配置 vite.config.js import v
阅读全文
摘要：路由模式 Hash模式 对SEO不友好，#之后的url, 不会发送到服务器端，所以服务端无需做任何处理就可以使用。 import { createRouter, createWebHashHistory } from 'vue-router' const router = createRouter(
阅读全文
摘要：1. Transition (创建动画) 原生css过渡 <template> <Transition name="slide-fade"> <p v-if="show">hello</p> </Transition> </template> <script setup> import {ref}
阅读全文
摘要：vue应用自身安全的机制 HTML插值 利用原生Dom api Node.textContent 对输入变量进行HTML转义。 Attribute 绑定 利用原生DOM api， Element.setAttribute 方法自动转义属性值的设置。 vue应用可能存在的风险点 HTML注入 风险：
阅读全文
摘要：vue 介绍 vue 是一种提供一套声明式的，组件化的编程模型来构建前端界面的js前端框架。 vue 目前主流采用vue3，提供组合式API和选项式api，vue2 在2023年12月份以后不再进行维护，它以选项式的api进行应用开发。 基本使用 创建应用 import { createApp }
阅读全文
摘要：1. 介绍 Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。 2. 安装和注册Pinia 安装pinia yarn add pinia 注册pinia import { createApp } from 'vue' import { createPinia } from 'p
阅读全文
浙公网安备 33010602011771号