超详细VUE专栏
分享
扫一扫
文章平均质量分 88
详细介绍Vue相关的内容
优惠券已抵扣
余额抵扣
还需支付
¥49.90
¥99.00
购买须知?
本专栏为图文内容，最终完结不会低于15篇文章。
订阅专栏，享有专栏所有文章阅读权限。
本专栏为虚拟商品，基于网络商品和虚拟商品的性质和特征，专栏一经购买无正当理由不予退款，不支持升级，敬请谅解。
波波烤鸭
10余年架构和线上讲师工作经验。精通Java，微服务和云原生相关，致力于Java技术的免费分享。
展开
-
【第一篇】Vue的初次邂逅
因为最近需要使用到Vue，所以打算将Vue的学习资料详细整理一份，感兴趣的小伙伴可以一起来哦。一、Vue基础介绍1.什么是Vue.jsVue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex）Vue.js 是前端的主流框架之一，和Angular.js、Rea...原创 2019-07-05 21:20:21 · 115965 阅读 · 35 评论 -
【第二篇】Vue实战案例-跑马灯效果
前面的文章我们介绍了v-on这个指令，可以用来实现事件的绑定，本文我们利用v-on来实现一个简单的跑马灯效果,就是如下这种效果Vue跑马灯效果1.分析a.点击"加油"按钮绑定一个点击事件，使用v-on或者缩写:"@"b.在按钮的事件处理函数中，写相关的业务逻辑代码：拿到 msg 字符串，然后 调用 字符串的 substring 来进行字符串的截取操作，把 第一个字符截取出来，放到最...原创 2019-07-06 11:47:18 · 67364 阅读 · 8 评论 -
【第三篇】Vue中的事件修饰符
本文我们来详细介绍下vue中的事件修饰符Vue事件修饰符事件修饰符概览修饰符说明.stop阻止冒泡.prevent阻止默认事件.capture添加事件侦听器时使用事件捕获模式.self只当事件在该元素本身(比如不是子元素)触发时触发回调.once事件只触发一次事件修饰符具体介绍.stop .stop用来防止冒泡，我们先来看...原创 2019-07-06 18:18:05 · 129578 阅读 · 31 评论 -
【第四篇】Vue中双向绑定数据-v-model指令
通过前面的介绍我们已经了解了Vue中的基本指令，比如v-cloak,v-text,v-html,v-bind,v-on等指令的作用，以及介绍了MVVM的模式，那么怎么实现动态的在M和V之间数据传递呢，本文我们就来介绍下v-model这个非常有用的指令v-model指令介绍v-bind指令的使用 前面的文章中我们已经介绍过了v-bind指令，该指令可以获取vue对象中的数据，但是这个指令...原创 2019-07-08 19:18:46 · 11660 阅读 · 11 评论 -
【第五篇】Vue中的样式处理
本文我们来介绍下在Vue中针对样式处理这块的支持Vue样式处理一、class 我们首先来看下class属性的使用。1.基本的class使用 我们先来看下非vue情况的class的使用，如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &...原创 2019-07-10 00:22:05 · 10380 阅读 · 1 评论 -
【第六篇】Vue中的v-if和v-for指令
本文我们来介绍下v-if，v-show和v-for指令，也就是最基础的流程控制和循环处理。v-if和v-show v-if和v-show的作用有点类似，我们一起来看下，案例代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta...原创 2019-07-10 19:07:28 · 10657 阅读 · 5 评论 -
【第七篇】Vue实战综合案例
本文我们通过一个小案例来巩固下前面讲的内容，具体案例效果如下:其实也就是实现对表单数据的添加，删除和关键字查询的操作。综合案例1.页面布局 页面布局我们通过bootstrap来快速实现，具体步骤如下1.1 基础页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF...原创 2019-07-12 07:36:46 · 81037 阅读 · 21 评论 -
【第八篇】Vue中的过滤器
本文我们来介绍下Vue中的过滤器的使用过滤器概念： Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示(" | ")；分类：过滤器分为全局过滤器和局部过滤器(私有过滤器)全局过滤器 我们先通过案例来介绍下过滤器的使用，然...原创 2019-07-12 20:59:48 · 12180 阅读 · 2 评论 -
【第九篇】Vue过滤器的应用案例
在前面我们介绍了vue的综合小案例把前面介绍的一些常用指令我们综合运用了一下，但是还有个小问题，就是现实的创建时间的格式没有处理，虽然我们可以在后台服务处理好后再传递给前端，但是在前端应该也需要能够自主的处理，而我们刚刚介绍了Vue中的过滤器，刚好可以通过Vue的过滤器来解决这个问题，我们来具体看下~过滤器应用案例代码 以下是没有格式化处理之前的代码，效果图就是上面的截图<!...原创 2019-07-16 17:31:20 · 9707 阅读 · 0 评论 -
【第十篇】Vue中的按键修饰符
本文我们来介绍下按键修饰符。Vue按键修饰符1.准备页面 沿用前面案例的页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi...原创 2019-07-17 16:12:04 · 73209 阅读 · 13 评论 -
【第十一篇】Vue中的自定义指令
本文前面已经介绍了好几个系统提供的指令，比如"v-text",“v-bind”,"v-on"等等,本文我们来介绍下自定义指令的实现。Vue自定义指令 案例代码还是在前一个案例的基础上我们来继续。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l...原创 2019-07-17 18:57:42 · 13318 阅读 · 2 评论 -
【第十二篇】Vue中的实例对象的生命周期
通过前面的介绍我们知道使用Vue的时候我们都必须创建一个Vue实例对象，如下var vm = new Vue({...})那么这个Vue实例的生命周期是怎么样的呢？本文我们就来详细的介绍下 此图为Vue官方给出的生命周期图，可先大概浏览下，如果不懂先不管，继续往下看。Vue实例生命周期 上图是官方给出的生命周期的流程图。我们一一来介绍下生命周期中各个方法的具体作用,为了便于理...原创 2019-07-18 17:45:33 · 8833 阅读 · 5 评论 -
【第十三篇】Vue动画专题-快速入门
在我们显示的页面中动画对于我们来说虽然不是必须的，但是必要的一些动画效果能够提高用户的体验，帮助用户更好的理解页面中的功能。所以本文就来给大伙介绍下动画的基础内容。Vue 动画不带动画效果的案例 我们先来实现一个不带动画效果的显示和隐藏的功能。案例代码<!DOCTYPE html><html lang="en"><head> <...原创 2019-07-20 18:14:37 · 10264 阅读 · 3 评论 -
【第十四篇】Vue动画专题-半场动画
上篇文章我们介绍了过渡动画的实现，包括完整的 入场 和 离场 动画，但是在实际过程中我们有时可能仅仅需要使用半场动画，比如淘宝购物车的下单处理等。Vue 半场动画1.基础页面 基础页面设置。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l...原创 2019-07-21 23:12:06 · 11412 阅读 · 3 评论 -
【第十五篇】Vue动画专题-列表动画
前面给大家介绍了动画的基本使用，本文我们来实现一个动画的简单案例，效果如下Vue动画案例1.基础页面 最基础的页面如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wid...原创 2019-07-23 18:09:08 · 11433 阅读 · 3 评论 -
【第十六篇】Vue组件专题-创建方式
本文我们开始来介绍下Vue中的组件，组件是可复用的 Vue 实例，且带有一个名字。Vue组件 基础页面如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device...原创 2019-07-24 14:03:34 · 9736 阅读 · 1 评论 -
【第十七篇】Vue组件专题-data和methods
在上篇文章的基础上我们继续来介绍下Vue组件中的data和methods属性，这两个属性和我们介绍的Vue实例中data和methods属性很类似，使用方式也是一样的Vue的data和methods属性 先准备一个基础页面，在其中创建了一个自定义的组件，具体页面如下:<!DOCTYPE html><html lang="en"><head> ...原创 2019-07-24 15:02:40 · 13682 阅读 · 2 评论 -
【第十八篇】Vue组件专题-组件切换案例
前面介绍了Vue中组件的创建方式和data及methods属性，本文我们来做一个Vue组件的切换案例，效果如下:这个效果相信大家都能搞定，本文希望通过这个案例来加深下组件的使用，Vue 组件切换案例基础页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...原创 2019-07-26 19:48:46 · 14857 阅读 · 9 评论 -
【第十九篇】Vue组件专题-父子组件传值
本文我们来介绍下Vue中的父子组件的传值问题。Vue父子组件传值父组件传值给子组件1.案例场景 我们先准备下基础页面，具体如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="...原创 2019-07-29 17:10:37 · 13754 阅读 · 1 评论 -
【第二十篇】Vue组件专题-评论列表案例
前面给大家介绍了Vue的组件功能，本文我们通过一个评论列表的案例来巩固下组件的内容，具体效果如下:Vue组件案例1.基本页面 我们先来整理下基础的页面如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="view...原创 2019-07-30 19:37:35 · 27037 阅读 · 27 评论 -
【第二十一篇】Vue中的ref和$refs
在Vue中一般很少会用到直接操作DOM，但不可避免有时候需要用到，这时我们可以通过ref和$refs这两个来实现，本文我们就来详细的介绍下这个内容ref ref 被用来给元素或子组件注册引用信息， 引用信息将会注册在父组件的 $refs 对象上，如果是在普通的DOM元素上使用，引用指向的就是 DOM 元素，如果是在子组件上，引用就指向组件的实例。$refs $refs 是一个对...原创 2019-08-02 17:55:08 · 41298 阅读 · 19 评论 -
【第二十二篇】Vue路由专题-router基本使用
本文开始我们来给大家介绍在Vue中非常重要的一个内容，就是路由Router什么是路由后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现...原创 2019-08-03 17:56:40 · 27424 阅读 · 9 评论 -
【第二十三篇】Vue路由专题-Router传值
本文我们来介绍下在Vue中路由的传参问题Vue路由传参 首先我们来准备一个基本路由的页面，如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt...原创 2019-08-05 20:18:18 · 9217 阅读 · 2 评论 -
【第二十四篇】Vue路由专题-Router嵌套及案例
Vue 中路由在使用的时候 嵌套 使用是非常频繁的，所以本文我们就来通过案例来介绍下嵌套路由的使用。一、Vue路由嵌套1.正常路由案例 我们先来准备一个普通的路由案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="...原创 2019-08-06 14:50:18 · 9565 阅读 · 2 评论 -
【第二十五篇】Vue中(methods,watch及computed的区别)
本文我们通过案例来介绍下 watch 和 computed 的使用，案例效果如下： 如上，该案例就是实现一个简单的名称拼接处理。实现的方式也比较多，本文我们会分别采用三种方式来实现。一、案例实现基础页面:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...原创 2019-08-07 21:54:26 · 10360 阅读 · 8 评论 -
【第二十六篇】Vue实战案例(form表单动态添加组件)
今天我们来给大家介绍下在Vue开发中我们经常会碰到的一种需求场景，就是在form中我们需要动态的增加组件模块，效果如下: 这种效果实现其实就是对 v-for 指令的一种使用，组件不是必须的，只是为了将这部门的代码我们单独的拎出来，便于查看，好了，话不多说，我们来看下具体怎么来实现。案例效果的实现1.创建组件 首先我们创建一个单独的组件，同时在 template 中定义我们的表单元...原创 2019-08-30 00:32:49 · 7519 阅读 · 18 评论