VUE
文章平均质量分 59
包含了与开发Vue相关的所有文章!!!!!
满脑子技术的前端工程师
一枚热爱分享知识的前端程序猿!!!
现用名:【满脑子技术的前端工程师】 曾用名:[机智的前端小白][前端程序]
展开
-
keep-alive 和 router-view 的使用方法(Vue3)
一、router-view:1. 常规使用方法2. 非常规使用方法(插槽)3. 非常规使用方法(结合keep-alive)4. 命名路由👇🏻🔗(name字段)二、keep-alive:1. keep-alive解释如下:2. keep-alive用法如下(贼简单):3. keep-alive对应的一些属性如下:一、keep-aliv中的 include 和 exclude①. include和exclude的含义②. 使用代码如下(exclude用法一致,含义不同):二、kee原创 2023-04-14 15:19:17 · 6404 阅读 · 6 评论 -
Vue3 pinia持久化存储(组合式Api案例演示)
pinia-plugin-persist( pinia持久化插件)持久化存储:一、为什么要进行数据持久化存储二、pinia-plugin-persist使用步骤如下1.引入库代码如下:安装结果如下图所示:2.在Pinia上注册pinia-plugin-persist插件代码如下如下图所示(操作解释)3.声明测试store(组合式Api)组合式声明Store文章(不会组合式Api的同学点👇🔗)代码如下:如下图所示(代码解释):4.测试pinia数据持久化代码如下1.Vue3原创 2023-03-24 17:12:51 · 5308 阅读 · 1 评论 -
Vue3 pinia入门篇(一)
一、Pinia是什么1.状态管理工具(类比Vuex)2.Pinia的特点(部分会在下面的案例中展示)二、Pinia如何使用(贼简单🌹)1.引入库(控制台执行如下命令)2.注册Pinia代码如下解释说明(如下图)3.声明对应的仓库数据(提供选项式Api和组合式Api两种风格)一、创建仓库(选项式Api模式)代码如下所示如下图说明二、创建仓库(选项式Api模式,个人非常喜欢🌹)代码如下所示4.如何使用上面创建的仓库代码如下所示(Vue的template和Script)修改效果原创 2023-03-23 18:03:01 · 1692 阅读 · 0 评论 -
vue点击复制文本功能及原理
一、技术使用背景二、Vue2(点击复制粘贴功能的实现)1.安装库并引入2.定义methods和template结构(两种实现的方法)3.测试结果第二种使用的方法三、Vue3(点击复制粘贴功能的实现,只在TypeScript中生效)1.安装库并导入2.解构api、定义methods3.测试结果如下:四、复制技术的实现原理1.第一种原理方法(已废弃⚠️,但是可以继续使用)如下图代码如下2.第二种方法(上面废弃方法的替代规则)链接如下:点击⬇️下方🔗原创 2022-06-05 02:02:09 · 5558 阅读 · 4 评论 -
Vue中样式穿透共6种方法(Vue2、Vue3样式穿透,避免踩坑)
1.vue2的css样式穿透: >>>2.vue3的css样式穿透: :deep()和::v-deep()3.关于less和sass的css样式穿透: /deep/ ::v-deep4.关于 important 解决样式的使用方法原创 2022-04-06 17:22:45 · 30252 阅读 · 4 评论 -
Vue的路由配置(Vue2和Vue3的路由配置)
系列文章目录一、路由是什么?二、Vue2中路由的创建步骤1.安装正确的路由版本(这里我踩坑了)2.vue2中配置路由的步骤步骤如下:代码如下图所示如下图所示:原创 2022-07-12 16:42:12 · 24471 阅读 · 12 评论 -
Vue-router传递参数的4种方式 (十)
1.路由的url传值 2.友好url传值(params传值) 3.命名路由传值 4.js传值原创 2021-12-11 11:49:15 · 1386 阅读 · 0 评论 -
删除Vue-CLI的自定义配置 (九)
Vue脚手架删除生成的自定义配置,但是Vue脚手架中并没有删除配置的选项,我们可以手动通过文件删除原创 2021-12-11 10:43:46 · 1118 阅读 · 0 评论 -
Vue中使用 transition标签实现动画的 4种方法 (八)
Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡条件渲染 ;(使用 v-if)条件展示; (使用 v-show)动态组件组件根节点.原创 2021-12-10 22:41:27 · 3667 阅读 · 0 评论 -
Vue 组件之间传值(传递数据)的5种方法 (七)
1.父传子:通过自定义属性来进行传值 2.在父组件使用子组件的时候,给父组件添加自定义属性,属性值为传递的数据 3.在子组件通过 props接受父组件的数据,props值是数组,元素是自定义属性 4.在子组件中使用的时候与data数据一样原创 2021-12-10 21:01:17 · 6414 阅读 · 0 评论 -
Vue中组件注册的3种方式 (六)
Vue中组件创建(注册)的3种方式,详细创建内容!!!!!!!!!!!!!!!!原创 2021-12-10 20:19:13 · 529 阅读 · 0 评论 -
Vue(CLI)的安装与卸载 创建Vue项目 (五)
VueCli的安装与卸载 创建Vue项目 (一看就会教学)原创 2021-12-10 19:56:14 · 4618 阅读 · 5 评论 -
Vue基础语法 事件绑定:v-on: v-if: v-for: (四)
1.v-on(绑定事件) 2.v-if 3.v-for遍历原创 2021-12-02 22:30:00 · 1021 阅读 · 0 评论 -
Vue基础语法 属性绑定:style :class :id(三)
1.通过v-bind进行属性的绑定 2.如果绑定的是字符串,字符串就是类名 3.给class绑定一个数组,class会直接绑定数组中的每一个元素;添加的样式:{{arr}}原创 2021-12-02 19:30:00 · 789 阅读 · 0 评论 -
Vue基础语法 v-band和v-model和插值语法 (二)
1.数据的读取 {{}} (在DOM内容区域使用) 2.数据读取使用 v-bind 指令 (在属性中使用)3.数据的双向绑定 v-model原创 2021-12-02 11:30:00 · 1455 阅读 · 0 评论 -
Vue基础语法 轻松入门学习框架 (一)
在html文档中 Vue的创建步骤!!!!!!!!!!!!!!!!!!!!!!!原创 2021-12-01 19:51:00 · 267 阅读 · 0 评论