Vue合集 - 随笔分类 - 萬事順意

Vue —兼容 Vue 2.0到 Vue 3.0 的注意事项

摘要：Vue 3 与 Vue 2 之间存在一些重要的变化和改进，因此在进行兼容性处理时需要注意一些关键点。 1. Composition API Vue 3 引入了 Composition API，与 Vue 2 的 Options API 不同。如果您在 Vue 2 中使用了 Options API，阅读全文

posted @ 2024-05-08 09:54 萬事順意阅读(648) 评论(0) 推荐(0)

Vue — Vue面试题：Vue3.0 特性

摘要：Composition API（组合式API）： Composition API允许开发者将逻辑按照功能或者相关性进行组织，而不是按照选项的不同部分（如data、methods、computed等）来分散代码。这种方式更灵活、更易于复用和维护，特别适用于编写大型复杂的组件。基于Proxy的响应式系阅读全文

posted @ 2024-04-10 15:27 萬事順意阅读(161) 评论(0) 推荐(0)

Vue — Vue3.0状态管理工具Pinia

摘要：一、什么是Pinia? Pinia 是一个专门为 Vue 3 设计的状态管理库。它的目标是提供一种简单、直观的方法来管理 Vue 应用的状态，同时充分利用 Vue 3 的响应式系统和组合式 API。 Pinia 主要特点包括：基于 Vue 3：Pinia 是专门为 Vue 3 设计的状态管理库，充阅读全文

posted @ 2024-04-01 16:37 萬事順意阅读(4223) 评论(0) 推荐(0)

Vue — Vue3.0快速掌握

摘要：一.使用create-vue创建项目 1.环境条件 node版本在16.0以上 2.创建vue3.0应用 npm init vue@latest //创建 npm install //下载依赖 3.项目目录和关键文件 1.vite.config.js ：项目的配置文件基于vite的配置 2.pac 阅读全文

posted @ 2024-03-17 20:05 萬事順意阅读(213) 评论(0) 推荐(0)

Vue — keep-alive详解

摘要：当使用 <keep-alive> 标签包裹组件时，Vue.js 会将这个组件缓存起来，而不是每次重新创建和销毁。这意味着组件的状态、数据和生命周期钩子函数都得以保留，以便在下次被激活时能够立即恢复到之前的状态。 <keep-alive> 的主要作用是优化组件的性能和用户体验，尤其适用于频繁切换或重复阅读全文

posted @ 2024-03-14 15:10 萬事順意阅读(108) 评论(0) 推荐(0)

Vue — vue中带有$的属性和方法

摘要：在 Vue.js 中，以 $ 开头的属性通常是框架内部提供的特殊属性或方法，用于访问 Vue 实例的一些内部属性或执行特定的操作。以下是一些常见的以 $ 开头的属性：属性： 1.$data：Vue 实例的数据对象，包含实例中定义的数据。 const app = new Vue({ data: { 阅读全文

posted @ 2024-03-14 14:15 萬事順意阅读(2280) 评论(0) 推荐(0)

Vue — 打包优化

摘要：1.默认情况下,打包好的文件需要房子啊服务器的根目录下，如果希望能够双击运行，需要配置pacblicPath为相对路径 const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ publi 阅读全文

posted @ 2024-03-14 12:23 萬事順意阅读(35) 评论(0) 推荐(0)

Vue — 导航守卫

摘要：Vue 的导航守卫是 Vue Router 提供的一种机制，用于在导航过程中对路由进行控制和管理。通过导航守卫，你可以在路由导航前、导航后、以及路由更新前后等不同阶段执行特定的逻辑操作。全局前置守卫 (Global Before Guards): beforeEach(to, from, next 阅读全文

posted @ 2024-03-14 12:07 萬事順意阅读(61) 评论(0) 推荐(0)

Vue — 请求模块、api模块封装

摘要：1.请求模块 import axios from 'axios' const request = axios.create({ baseURL : '',//请求的域名地址 timeout : 5000, }) request.interceptors.request.use((config)=>{ 阅读全文

posted @ 2024-03-14 11:06 萬事順意阅读(102) 评论(0) 推荐(0)

Vue — Vuex模块

摘要：目的：由于Vuex使用的是单一状态树，所有的应用状态都会集中到一个比较大的对象。所以我们拆分store,每一个组件的store创建一个单独的模块，便于维护。 1.创建modules文件夹 2.配置子模块 const state = { userInfo :{ name : '巧克力的雨天', age 阅读全文

posted @ 2024-03-13 22:21 萬事順意阅读(64) 评论(0) 推荐(0)

Vue — VueX

摘要：一、VueX概述 1.概述： vuex是一个vue的状态管理工具，状态就是数据；可以帮助我们管理vue通用的数据（多组件共享的数据） 2.场景：（1）某个状态在很多个组件中使用例如个人信息（2）多个组件共同维护一份数据例如购物车 3.优势：（1）共同维护一份数据，数据集中化管理（2）阅读全文

posted @ 2024-03-13 17:03 萬事順意阅读(120) 评论(0) 推荐(0)

Vue — 路由

摘要：一、路由的使用步骤 1.Vue2.0版本下载对应路由3.6.5版本 yarn add vue-router@3.6.5 / npm i vue-router@3.6.5 2.引入路由包 import VueRouter from 'vue-router'; 3.安装注册 Vue.use(VueRou 阅读全文

posted @ 2024-03-12 14:31 萬事順意阅读(136) 评论(0) 推荐(0)

Vue — 插槽

摘要：一、默认插槽：默认插槽是最常见的插槽类型。它允许我们在组件中插入任意内容，并且如果没有指定具名插槽，则会将内容插入到默认插槽中。 //子组件 <template> <div> <h1>组件标题</h1> <slot></slot> </div> </template> //父组件 <templat 阅读全文

posted @ 2024-03-11 20:40 萬事順意阅读(38) 评论(0) 推荐(0)

Vue — v-load封装 loading效果

摘要：<template> <div class="app"> <div class="box" v-load="isLoading"> <ul> <li v-for="(item, index) in list" :key="index"> {{ item.name }} </li> </ul> </d 阅读全文

posted @ 2024-03-11 19:46 萬事順意阅读(178) 评论(0) 推荐(0)

Vue — 自定义指令

摘要：一、自定义指令语法 1.全局注册 //main.js Vue.directive('focus', { inserted(el) { el.focus( } }); //App.vue <input v-focus /> 2.局部注册 <script> export default { direct 阅读全文

posted @ 2024-03-11 17:43 萬事順意阅读(44) 评论(0) 推荐(0)

Vue — .sync修饰符的使用

摘要：.sync修饰符作用：可以实现子组件和父组件数据的双向绑定，简化代码特点： prop属性名，可以自定义，非固定value 使用场景：封装弹窗类的基础组件，添加自定义属性使用true/false控制本质：就是 :属性名和 @update:属性名合写 <template> <div 阅读全文

posted @ 2024-03-11 15:14 萬事順意阅读(128) 评论(0) 推荐(0)

Vue — v-model详解

摘要：一、v-model原理原理：v-model本质上是一个语法糖。例如在inpu中，就是value属性和input事件的合写作用：提供数据的双向绑定双向绑定：数据变，视图跟着变；视图变，数据跟着变二、表单类组件封装&v-model简化代码 1.表单组件封装的核心思路：（1）父传子：数据从父阅读全文

posted @ 2024-03-11 14:47 萬事順意阅读(3691) 评论(0) 推荐(0)

Vue — 组件通信

摘要：一、父传子  <Son :msg="msg" :arr="arr"></Son> // 2.子组件：子组件通过props来接收 props : ['msg','arr'] 关于prop 1.什么是prop （1）定义：组件上定义的一些自定义阅读全文

posted @ 2024-03-11 12:57 萬事順意阅读(41) 评论(0) 推荐(0)

VScode编译vue脚手架template标签报错

摘要：解决方式：重要的事情说三遍！！！ vue项目直接放vscode，外面不要套文件夹！！！项目名称包括创建项目的文件夹路径中不要包含中文！！！阅读全文

posted @ 2024-03-10 13:32 萬事順意阅读(64) 评论(0) 推荐(1)

VScode不能执行vue命令解决方式

摘要：问题：在 Visual Studio Code (VSCode) 内置终端中无法运行 vue -V 命令的原因可能是由于 PowerShell 的执行策略限制导致的。默认情况下，VSCode 使用的内置终端是 PowerShell。解决方式：（1）需要以管理员权限运行 PowerShell 搜阅读全文

posted @ 2024-03-09 17:49 萬事順意阅读(752) 评论(0) 推荐(0)

随笔分类 - Vue合集