Vue
关注
分享
扫一扫
文章平均质量分 86
学会学习的人，是幸福的人...
知其黑、受其白
每个优秀的人,都有一段沉默的时光,那段时光,是付出了很多努力,却得不到结果的日子,我们把它叫做扎根。
你可以从别人那里汲取某些思想,但必须用你自己的方式加以思考！
展开
-
Node 安装 Vuex
Node 安装 Vuex原创 2022-11-10 15:30:14 · 1301 阅读 · 0 评论 -
vue 路由进度条 nprogress
vue 路由进度条 nprogress原创 2022-11-01 14:34:53 · 773 阅读 · 0 评论 -
VUE axios POST 发送跨域 cros 问题
VUE axios POST 发送跨域 cros 问题原创 2022-10-18 19:28:45 · 1407 阅读 · 0 评论 -
vue 中 style 标签中的 scoped 属性（作用域）和 lang 属性的介绍
vue 中 style 标签中的 scoped 属性（作用域）和 lang 属性的介绍原创 2022-09-08 11:11:54 · 581 阅读 · 0 评论 -
vue-cli 初始化创建 vue2.9.6 项目路由守卫、封装axios、vuex
阅读目录Vue如何封装Axios请求1 安装axios2 封装代码 axios应用方式Vue 中的路由守卫使用演示1 全局守卫2 组件级守卫3 单个路由独享的守卫4 官网整个路由守卫被触发流程的步骤：安装 vuex1 Vuex 的基本使用2 main.js 文件中挂载使用 vuex 对象3 组件中应用 vuex4 预览使用 devtools 调试界面，可以跟踪查看每一次事件操作。快速认识 vuex组件之间传值Vuex 的学习内容Vuex 在 Vue 项目使用 Vuex实例化 store组件中使用 `stor原创 2022-05-17 11:02:55 · 1386 阅读 · 0 评论 -
vue-cli 初始化创建 vue2.9.6 项目
阅读目录vue-cli 安装vue-cli 初始化创建项目1、vue init命令讲解2、初始化创建项目package.json项目结构1、build目录（webpack配置）2、config目录（vue项目配置目录）3、node_modules（项目依赖包）src 项目核心文件讲解项目的主页 E:\node\vue296\index.html入口文件 E:\node\vue296\src\main.js根组件 E:\node\vue296\src\App.vue路由配置 E:\node\vue296\sr原创 2022-04-29 13:47:07 · 5209 阅读 · 2 评论 -
vue@2.6.14小目标列表
阅读目录运行效果源码HTMLCSSJS原理分析和实现步骤 1 布局和引入 vue步骤 2 输入框回车要添加纪录步骤 3 点击切换，下面记录会改变步骤 4 红色关闭标识，点击会删除该条记录步骤 5 文字双击会出现输入框，可输入文字运行效果源码html 代码中需要插入css 代码，在最下方需插入vue 代码即可运行。HTML<!DOCTYPE html><html><head><meta charset="UTF-8"><title>原创 2022-04-22 17:08:49 · 665 阅读 · 0 评论 -
vue@2.6.14购物车统计总价
阅读目录运行效果源码htmlCSSVue素材图片源码解析布局和引入 vue准备列表数据记录产品是否有选中步骤1 数量加减步骤 2 选中展示价格步骤 3 全选步骤 4 删除运行效果源码html代码中需要插入css代码，在最下方需插入vue代码即可运行。html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</tit原创 2022-04-22 15:55:54 · 2321 阅读 · 0 评论 -
vue@2.6.14选项卡
阅读目录<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> body{ font-family:"Microsoft YaHei"; } #tab{ width: 600px;原创 2022-04-21 19:13:15 · 717 阅读 · 0 评论 -
Vue2.9.6安装element-ui
阅读目录安装 element-ui源码路由文件：E:\node\vue296\src\router\index.js入口：E:\node\vue296\src\main.js组件：E:\node\vue296\src\components\Count.vue安装 element-uiPS E:\node\vue296> npm i element-ui -Snpm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_m原创 2022-04-21 15:52:42 · 1958 阅读 · 0 评论 -
Vue 命令行工具 Vue-CLI 详解
阅读目录阐述vue全家桶vue-cliVue CLI 的安装① 默认安装 vue/cli 脚手架 3② 默认安装失败，解决mode版本问题③ nvm下载太慢问题解决④ 安装 Node ^12.0.0⑤ 从新安装 VueCli 脚手架 3④ 拉取 2.x 模板 (旧版本)⑤ 安装vue指定版本⑥ 博主node版本初始化项目① vue init命令讲解② 项目初始化③ 目录结构详解④ 运行项目node 安装适合小白1 去node官网下载2 下载完成后双击安装包，跳出安装弹窗，点击Next从新来过vue-cli原创 2022-04-21 14:54:31 · 29306 阅读 · 0 评论 -
Vue 中遇到的错误
阅读目录解决VUE启动问题（You may use special comments to disable some warnings）两种方法解决方法 一方法 二安装 vuex 启动报错 “export ‘watch‘ was not found in ‘vue‘解决VUE启动问题（You may use special comments to disable some warnings）运行： " npm run dev "报错： 如下图, ““You may use special commen原创 2022-04-20 18:32:04 · 1423 阅读 · 0 评论 -
vue生命周期和钩子函数
阅读目录阐述1、vue生命周期简介2、生命周期探究3、生命周期总结阐述钩子就好像是把人的出生到死亡分成一个个阶段，你肯定是在出生阶段起名字，而不会在成年或者死亡的阶段去起名字。或者说你想在出生阶段去约炮，也是不行的。组件也是一样，每个阶段它的内部构造是不一样的。所以一般特定的钩子做特定的事，比如 ajax 获取数据就可以在 mounted 阶段。1、vue生命周期简介2、生命周期探究对于执行顺序和什么时候执行，看上面图基本有个了解了。下面我们将结合代码去看看钩子函数的执行。<!DOC原创 2022-03-30 15:56:46 · 210 阅读 · 0 评论 -
VUE版报名成功数据滚动
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>wgchen</title> <link rel="shortcut icon" href="#" /> <meta name="keywords" content="https://wgchen.blog.youkuaiyun.com"> <meta na.原创 2022-02-23 10:55:33 · 615 阅读 · 0 评论 -
45 双组件切换动画效果
[动画] vue3双组件切换动画的实现阐述双组件切换动画动态组件切换效果阐述上节学习了双DOM元素动画过渡效果的实现，这节我们把DOM元素换成组件，看看编写方法上有什么变化。双组件切换动画我们先来编写两个组件，这里可以写两个最简单的局部组件。const XiaoHong = { template: `<div>小红进入了试衣间</div>`}const XiaoLi = { template: `<div>小丽进入了试衣间</div&g原创 2021-12-07 10:32:36 · 399 阅读 · 0 评论 -
44 Vue动画 ＜transtion＞ 标签里有两个DOM，然后一个出现时，另一个消失
[动画] vue3双DOM元素动画的实现阐述双元素交替切换效果制作增加动画效果mode 模式讲解阐述本文学习的内容是双DOM元素的动画切换，意思就是一个动画<transtion>标签里有两个DOM，然后一个出现时，另一个消失。双元素交替切换效果制作<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi原创 2021-12-07 10:19:44 · 1616 阅读 · 0 评论 -
42 vue3过渡和动画属性控制过渡时长
[动画] vue3过渡和动画并用小技巧构建一个过渡和动画并用的代码过渡和动画时长不一致的处理属性控制动画和过渡时长构建一个过渡和动画并用的代码<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo</title&原创 2021-12-07 09:57:05 · 1323 阅读 · 0 评论 -
41 Vue使用第三方动画库
[动画] 如何在Vue中使用第三方动画库 Animate.css阐述自定义动画选择方法一：给 transition 标签一个 name方法二：自行制定CSS选择名称使用第三方动画库总结阐述这节我们一起学习一下，如何在Vue中使用第三方动画库 Animate.css。它里边有很多已经写好的动画，可以给开发带来极大的方便。在学习第三方动画库使用前，我们要先学会一个知识，就是自定义Vue中固定的CSS动画选择器。自定义动画选择<html lang="en"><head>原创 2021-12-07 09:56:22 · 2093 阅读 · 0 评论 -
43 JS+Vue3制作动画和钩子函数
[动画] JS+Vue3制作动画和钩子函数阐述指定不使用CSS动画使用JS编写动画效果before-enter 钩子函数enter 钩子函数after-enter 钩子函数阐述有时候我们不使用CSS制作动画，而使用JS来制作动画。虽然CSS的动画比JS的效率要高，但JS在操作DOM和时间控制上有着优势。所以这节我们就来学习一下如何使用JavaScript+Vue3来制作动画。指定不使用CSS动画<html lang="en"><head> <meta ch原创 2021-12-07 09:57:32 · 501 阅读 · 0 评论 -
40 Vue3制作动画过渡效果
[动画] 用Vue3制作过渡效果阐述准备基础文件增加过渡效果总结阐述有了39节内容的学习，本节我们在它的基础上用Vue的内置组件，制作过渡效果。需求很简单，还是DOM元素的显示和隐藏，但不在是滑入效果，而是慢慢改变透明度 opacity。准备基础文件去掉关键帧 keyframes 样式，但保留 v-enter-active 和 v-leave-active。<html lang="en"><head> <meta charset="UTF-8">原创 2021-12-07 09:55:52 · 489 阅读 · 0 评论 -
39 制作一个显示隐藏的切换动画效果
[动画] 如何利用Vue3制作动画效果制作一个显示隐藏的切换效果编写CSS样式和制作进入动画编写退出动画总结制作一个显示隐藏的切换效果<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Demo03</title>原创 2021-12-06 17:31:55 · 950 阅读 · 0 评论 -
38 Vue控制过渡效果
[动画]用Vue进行控制CSS制作的过渡效果编写CSS样式 实现基本过渡样式Vue控制过渡效果编写CSS样式 实现基本过渡样式我们先建立了一个 transition 的样式，这个样式用来执行过渡效果，具体意思是如果背景颜色 background-color 有变化时，我们要在3秒种完成过渡（变化），并且效果是由慢到快进行的，此部分的关键词是 ease。然后再编写两个样式 red 和 yellow，用来定义背景颜色，颜色分部是红色和黄色。所以就有了下面这些代码。<style> .t原创 2021-12-06 17:08:38 · 577 阅读 · 0 评论 -
37 CSS样式中的动画效果
[动画] CSS样式中的动画效果阐述动画和过渡的区别准备标准文件和新建演示文件编写CSS动画效果写一个按钮控制动画效果阐述作为动画知识的第一节，为了不让小伙伴有太大的学习压力，我们先从熟悉的动画效果入手。也就是用CSS的方式写一段动画，当作对以前知识的复习。动画和过渡的区别先来看两个概念，有人作了一年前端切图，也没弄明白，CSS中动画和过渡的概念，我在这里给你讲清楚。动画：一个DOM元素，从一个地方移到另一个地方，这种效果叫做动画。比如一个层从浏览器的左侧移动到右侧，这就是动画。过渡：是D原创 2021-12-06 16:53:31 · 682 阅读 · 0 评论 -
36 多级组件传值 provide 和 inject
[组件] provide 和 inject 多级组件传值创建一个多级组件常用传递方式多级组件传值 provide 和 inject创建一个多级组件本节的要讲的关键词是 provide 和 inject，作用是进行多级组件传值的。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev原创 2021-12-06 16:28:40 · 371 阅读 · 0 评论 -
35 Vue3异步组件
[组件]Vue3异步组件和 Promise 讲解阐述编写基本代码和同步组件vue3中的异步组件阐述这节我们要讲明白Vue中的异步组件，弄明白什么是异步组件，其实是有前置知识的，就是你需要知道什么是同步，什么又是异步。而且你还会要使用 Promise，如果你 Promise 用的不是很熟练，建议你先去复习一下JavaScript 的基础知识，然后再进行学习。编写基本代码和同步组件<!DOCTYPE html><html lang="en"><head>原创 2021-12-06 16:13:49 · 1792 阅读 · 0 评论 -
34 动态组件（切换组件）保存状态input值
[组件]Vue3动态组件和状态保存阐述准备基本代码创建子组件原始切换效果动态组件优化代码动态组件中的状态保存总结阐述本文我们主要学习一下Vue3中的一个重要概念—动态组件。有的小伙伴可能一听到动态组件，会觉的很难，其实它并不难懂，而且工作中用的会比较多。我们现在来虚拟一个需求，我们需要为大宝剑编写一个带图片的选择技师的功能，并且可以让顾客手动切换这些技师。（这个需求其实有几种方法可以实现，但是这里我们为了学习，特意使用了动态组件来作，并不代表是最优解决方案。）准备基本代码<!DOCTYPE原创 2021-12-06 15:58:24 · 647 阅读 · 0 评论 -
33 具名插槽的简写方法、作用域插槽、简化作用域插槽写法
[组件]具名插槽简写和作用域插槽阐述具名插槽的简写方法作用域插槽 - 基础代码准备作用域插槽 - 具体讲解简化作用域插槽写法总结阐述这节先讲一下具名插槽的简写方法，算是对上节课遗漏知识点的补充。然后再讲一下本节的重点插槽作用域，这个还是比较难理解的，所以如果你一遍学不懂。没关系，敲两遍代码，结合文章，一定可以有一个深刻的理解。先来看具名插槽的简写方法。具名插槽的简写方法在父模板中确定插槽位置时，使用了 v-slot:one 这种方法，其实这个语法可以简写成 #one。这时候的代码就变成了下面的原创 2021-12-06 15:20:33 · 1167 阅读 · 0 评论 -
32 Vue插槽slot的默认值和具名插槽使用2
[组件]slot插槽的默认值和具名插槽使用2阐述编写一个最基本的文件插槽默认值的写法具名插槽的使用阐述这节继续讲解插槽相关的知识，在上篇文章的学习中，你已经找到了插槽的简单使用方法。这节我带着你深入学习，看插槽中经常使用的两个编写方法，插槽的默认值和具名插槽的使用。编写一个最基本的文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta nam原创 2021-12-06 14:45:47 · 2149 阅读 · 0 评论 -
31 Vue组件中Slot插槽的使用1
[组件]Vue组件中Slot插槽的使用1阐述编写基础结构初识插槽阐述这节学习的内容是组件中的插槽(Slot)使用。为了更生动的理解插槽，我们使用大宝剑选择技师的案例。编写基础结构<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal原创 2021-12-06 12:03:54 · 303 阅读 · 0 评论 -
30 Vue子组件调用父组件方法、传值和校验
[组件]Vue子组件调用父组件方法、传值和校验阐述编写计数器案例子组件调用父组件事件子组件向父组件传递参数对传递值的校验阐述前面我们讲了单项数据流的概念，这节学习一下子组件如何通过事件向父组件传递参数，打破单项数据流的限制。在单项数据流中，我们用了计数器 Counter 这个例子做了个小例子，帮助大家理解。我们先来复习一下什么是单项数据流。通过计数器的编写，本节我们的学习目标如下:子组件调用父组件事件的编写方法子组件向父组件事件中传递参数的方法子组件传递参数时，如何通过 emits 进行校验原创 2021-12-06 11:48:19 · 1483 阅读 · 0 评论 -
29 Vue中的Non-props使用$attrs & inheritAttrs
[组件]Vue中的Non-props使用技巧阐述基础页面和子组件的准备初始 Non-props 属性inheritAttrs 属性Non-Prop 多节点失效解决方法在业务逻辑中使用 Non-props 属性阐述这节我们主要讲一下 Non-props 属性，那什么是 Non-props 属性呢？其实就是子组件没有接受父组件传递过来的参数，而子组件完全不变的复制了属性到自己的标签上，就叫做Non-props属性。我相信你现在还不能完全理解这句话，无所谓，我们继续学习。基础页面和子组件的准备为了展示原创 2021-12-03 19:27:29 · 603 阅读 · 0 评论 -
28 Vue组件中的单项数据流机制
[组件]Vue组件中的单项数据流机制阐述编写一个计数器单向数据流概念为什么要有单向数据流机制阐述这节我们继续讲组件传递参数时的单项数据流。它是Vue编写组件的一个重要机制，保证了组件的独立性。作为一个程序员，我们有必要知道、了解和精通单项数据流的概念和使用。编写一个计数器为了更好的说明什么是单项数据流，在文章开始前，我们需要用以前学的知识，编写一个计数器功能。<!DOCTYPE html><html lang="en"><head> <me原创 2021-12-03 16:15:47 · 587 阅读 · 0 评论 -
27 Vue组件传值时的校验操作
[组件]Vue组件传值时的校验操作阐述准备基本文件对类型的校验必填校验和默认值设置required 必填项default 默认值精准校验 validator阐述现在你已经可以轻松的给组件进行传值了，用起来很方便和自由，在实际开发中，这些传递的参数也很可能是通过用户的输入而获得的，必要的前端验证是必不可少的。但是在组件中也需要作最基本的验证。本节我们就一起来学习一下Vue3中组件传值的验证。准备基本文件<!DOCTYPE html><html lang="en">&l原创 2021-12-03 15:49:32 · 939 阅读 · 0 评论 -
26 父组件向子组件（动静态）传值，参数为函数时的用法
[组件]Vue父子组件的静态和动态传值阐述准备基础代码全局组件 Son父组件向子组件传值（静态传值）动态数据作为参数参数为函数时的用法阐述本文主要学习的内容是父子组件的传值，包括静态传值和动态传值。准备基础代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width原创 2021-12-03 15:17:22 · 694 阅读 · 0 评论 -
25 创建局部组件、组测局部组件、组件命名法
[组件]Vue3中的局部组件阐述新建文件创建局部组件组测局部组件局部组件使用大驼峰命名法完整代码阐述和全局组件相对应的就是局部组件，你可以把局部组件看成一个变量，然后在使用的地方注册这个组件，才可以使用。局部组件的最大好处就是只有在使用的时候，才会耗费系统资源，不像全局组件一样，一直都存在。你现在看这段话可能不是很好的理解，下面通过代码，来讲解一下什么是局部组件。新建文件<!DOCTYPE html><html lang="en"><head>原创 2021-12-03 14:29:08 · 569 阅读 · 0 评论 -
24 什么是Vue组件，如何定义全局组件，组件的复用性，组件的弊端
[组件]Vue3全局组件定义和复用性讲解一张图了解组件概念Vue3中根组件的讲解全局组件的定义组件的可复用性讲解全局组件的弊端总结一张图了解组件概念我们先来看一张Vue3官方给出的图，通过图片能清楚的了解到什么是Vue中组件的一些端倪。图的左边是一个网页，网页分为了头部、左侧主体和右侧边栏。这时候你用组件的概念，就可以先把这个网页分为三个大的组件，分别是头部、左侧和右侧。然后再根据每个大组件里的内容和功能，作更加详细的组件划分。这样就可以把一个复杂的大页面，分解成一个个可以复用的小页面。总结如原创 2021-12-03 10:57:41 · 678 阅读 · 0 评论 -
23 数据双向绑定修饰符lazy、number、trim
弱小从来不是生存的障碍，傲慢才是。一个人优秀到可怕的三个迹象：高度的自律，近乎疯狂的努力；对自己好，学会不计代价的投资自己；相信自己，不在乎他人的眼光。[基础]Vue表单的双向数据绑定2-修饰符v-model 数据双向绑定修饰符lazy 修饰符number 修饰符trim 修饰符v-model 数据双向绑定修饰符本文我们主要来看一下 v-model（数据双向绑定）中的修饰符。lazy 修饰符v-model 也有很多实用的修饰符，第一个修饰符 lazy，这个也叫做懒更新修饰符。我们作一个 in原创 2021-12-02 11:59:42 · 880 阅读 · 0 评论 -
22 双向数据绑定 input、textarea、checkbox、radio
学会学习的人，是幸福的人梦想不会因为成长而离开你，也不会被社会的压力所击倒，梦想是被自己的借口所一步步慢慢吞噬直到平庸。[基础]Vue表单的双向数据绑定-1新建干净的Vue3文件input 的数据双向绑定textarea 的数据双向绑定checkbox 数据双向绑定checkbox 里的 true-value 和 false-valuecheckbox 复选双向数据绑定Radio 的双向数据绑定我在教程刚开始的初识阶段，经常强调Vue是数据驱动的开发。其中最重要的一点应用是数据的双向绑定，从这节开始原创 2021-12-02 11:30:01 · 3031 阅读 · 0 评论 -
21鼠标按键饰修符
[基础]Vue绑定事件详讲-按键、鼠标饰修符前言构建初始页面在模板中的中绑定键盘按下时响应 keydown单个按键修饰符鼠标修饰符前言本文主要的内容会讲一下事件绑定中的按键修饰符和鼠标修饰符。它们对应的是在使用特点的某个按键时才会用到。这节的内容在工作中也是比较常用的，比如按下回车键时触发表达提交，按下鼠标右键时弹出选项菜单，都是工作中用得到的。构建初始页面<!DOCTYPE html><html lang="en"><head> <met.原创 2021-12-02 10:55:02 · 520 阅读 · 0 评论 -
20 六种事件修饰符：stop、prevent、capture、self、once和passive解决冒泡事件
[基础]Vue绑定事件详讲-事件修饰符通过修饰符解决冒泡事件stop修饰符self修饰符其它常用修饰符初始页面绑定事件中的修饰符有很多种，这些修饰符各有各的用处。本节课将讲解6种Vue中的事件修饰符，分别是；stop、prevent、capture、self、once和passive。通过修饰符解决冒泡事件在JavaScript中冒泡事件是最长处理的事件，先写一段代码，手动创造一个冒泡事件。新建一个文件Demo20.html修改模板 template 部分，在最外层增加一个 <div&原创 2021-12-01 18:28:54 · 5403 阅读 · 0 评论