Vue笔记
关注
分享
扫一扫
文章平均质量分 89
记录vue.js学习经验，分享所学所得
等周末的爱码士
这个作者很懒，什么都没留下…
展开
-
el-image隐藏组件el-image-viewer点击次序预览图片
最近工作项目中有个需求，非要点击“预览”文字进行图片组的大图预览，想着技术栈中刚好有elementui，可以借用el-image的预览功能。但…实在有些许鸡肋，功能的自由感太低了，只能点击图片并永远只从第一张图开始预览，这确实难以满足实际工作需求。后来查阅资料得知el-image的预览功能在源码中其实是一个拓展组件完成的，于是我去源码里摸摸，发现还真有el-image-viewer这个独立组件，只不过官方文档中未将其拎出介绍。代码不复杂，毕竟样式和功能不多，也就放大缩小前进后退关闭等，主要看到props属原创 2020-12-04 00:29:21 · 2745 阅读 · 0 评论 -
简要了解和快速上手vue的过渡动画
此博文仅凭本人实践及理解，讲解vue的过渡动画知识要点，方便大家快速上手。更系统全面的学习请移步官网：vue-router过渡一、第一步必须为元素添加上<transition></transition>包裹，这是vue封装的过渡动画组件，相当于设置过渡的声明。深入点讲，当声明了这个组件，将为该元素自动添加上过渡生命周期的六个class，下面会讲到。<transit...原创 2020-05-01 21:49:26 · 390 阅读 · 0 评论 -
vue切换路由页面左右滑动过渡动画效果，傻瓜式实现
此博文默认你已掌握入门的路由过渡知识，若有无法理解之处请自行补充相关知识或浏览我的下一篇博文…Vue已广泛运用于移动开发，页面间切换的路由过渡效果有很多方法实现，这里讲的是较简单粗暴的方法，便于理解实现原理。1. 为需要路由过渡的部分添加<transition></transition>，声明过渡。<transition :name="transitionNam...原创 2020-05-01 18:26:45 · 8346 阅读 · 3 评论 -
vue之组件间v-model通信
假如要使原生元素例如input输入框与实例数据双向绑定，我们都知道可以直接使用v-model指令。那如果是两个自定义组件间通信该如何使用v-model？首先要清楚v-model的原理：<input-con v-model="inputVal"></input-con>等价于<input-con :value="inputVal" @input="inputV...原创 2020-04-12 20:07:32 · 1842 阅读 · 0 评论 -
vue彻底理解.sync修饰符实现prop进行父子组件“双向绑定”
假如现在要实现上面的简单计数器，数字是父组件通过prop传入的，希望在子组件按钮上控制递增。似乎很简单，在按钮上绑定个click事件让prop值递增不就好了嘛？首先需要清楚三件事：1.prop是单向数据流；2.vue并不希望和支持我们直接修改传入的prop值，这样打破了prop单向数据流的机制，会造成数据混乱；3.所以，prop值需要实时更新传入，相当于我们要实现双向数据绑定；那么，既...原创 2020-04-11 19:33:31 · 911 阅读 · 0 评论 -
vue使用axios创建请求接口实例和发送异步请求
在vue3.0面世后作者就即时宣布将不再对vue-resource更新了，这也就意味着它逐渐被放弃，axios取而代之。axios同样是异步请求数据，但是基于promise实现。一. 项目安装在项目中终端输入指令：npm install axios --save在需要请求数据的文件中引入axios：import axios from "axios"二. 使用方式方法一：当请求...原创 2020-04-04 23:42:51 · 1624 阅读 · 0 评论 -
vue之动态添加class(active)的方法大全
过来人常说“要想学vue，必先忘记js”，这是因为vue控制dom节点的思维方式和js不大相同。vue项目中如何点击元素动态添加active-class？今天来分享多种解决方式。一. v-for循环情况下动态添加：1.v-for循环元素，绑定key2.在data中创建标识isActive=0，这是为了初始化第一个标题为active3.监听单击事件触发方法，传入点击元素的index改变标识...原创 2020-03-29 19:22:42 · 33774 阅读 · 2 评论 -
vue之子路由创建及使用
vue可以通过设置子路由灵活地响应切换页面内的部分组件。方法很简单：1.vuecli3.0以上在‘/router/index.js’文件里，为指定的父路由添加children属性，存放子路由。注意，记得redirect重定向父路由的初始路径。const routes = [ { path: "/order", name: "order", component: or...原创 2020-03-28 21:30:33 · 718 阅读 · 0 评论 -
vue之修改单页面背景颜色
vue的特点在于组件化，可以轻便开发单页面应用，但弊端就是它没能像原生操控各自的body节点，因为所有的页面都拥有同一个body。这就难受了，如果希望设置单个页面的背景颜色而又不影响其他页面，那怎么办？beforeCreate() { document.querySelector('body').setAttribute('style','background-color:rgb(245,24...原创 2020-03-28 20:44:24 · 2950 阅读 · 1 评论 -
vue之better-scroll插件快速上手及实战demo
什么是Better-Scrollbetter-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它是基于iscroll开发实现的，它的所有API基本都兼容iscroll，且作出扩展。详细的介绍可以阅读官方文档：https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#那既然一样使用于滚动场景，better-scro...原创 2020-03-03 18:02:29 · 694 阅读 · 0 评论 -
vue-awesome-swiper最新版轮播图实战demo及参数详解
vue-awesome-swiper是vue项目插件之一，用于开发轮播功能。它基于swiper轮播插件，由前辈所开发而出，奉上源仓库：https://github.com/surmon-china/vue-awesome-swiper一、安装可以通过CDN或NPM(CNPM)安装。CDN有些繁琐，通常我们习惯npm(cnpm)下载安装：npm install vue-awesome-swip...原创 2020-02-29 20:20:16 · 4928 阅读 · 1 评论 -
@vue/cli4(包括3)项目axios请求获取本地json文件数据
在前端开发过程中，当后台服务器开发数据还没完善，无法与我们交接时，我们习惯在本地写上一个json文件作模拟数据测试代码效果是否有问题。vuecli3.0往后的项目基础架构对比旧版本有些区别。以前大家都习惯在根目录下的static文件夹下创建json文件，vuecli3、4没有static文件夹了，那咋办？有人说我创一个static文件夹在下面继续写json文件不就行了。但结果会报错，请求404找...原创 2020-02-27 22:11:42 · 7500 阅读 · 11 评论 -
vue实现导航标题栏随页面滚动渐隐渐显效果
项目开发中导航栏随页面滚动渐隐渐显这一功能还是较为常用的，下面作一个用vue实现此功能的代码分享。1. 为导航栏元素style属性用v-bind绑定data数据"opacityStyle"。<div class="header" :style="opacityStyle"> 景点详情 //内容我就简约了，实际开发以需求为准</div>2. data中定义o...原创 2020-02-24 00:51:39 · 2535 阅读 · 0 评论 -
vue各类组件间传值方法(父子、兄弟、页级)
熟悉vue各类关系的组件之间传值方法会令开发更加得心应手，下面将对父子、兄弟、页级组件之间的传值作浅谈。一、父子关系组件- 父向子组件传值父组件向子组件传值通常是利用props属性。首先，在子组件里定义一个props值用来接收父组件数据；然后调用子组件并v-bind绑定这个props值 = 父组件的data值。父组件代码：<template> <div class=...原创 2020-02-22 20:12:04 · 2545 阅读 · 0 评论 -
vue2.0之 render: h => h(App)
vue2.0版本问世后，相对1.0版本有了较大的变动，不仅仅存在于物理结构上，适用并使用es6语法也是亮点之一。项目创建完成的入口文件：new Vue({ //el:"#app", vue1.0写法 router, store, //components:{App}, //vue1.0写法 render: h => h(App) //vue2.0写法}).$mo...原创 2020-02-15 23:16:12 · 305 阅读 · 0 评论 -
Vue中v-if和v-show区别与用法解析
一、v-if和v-show的异同点1.相同点 ：v-if和v-show都可以动态控制DOM元素的显示隐藏。2.不同点：v-if是动态地向DOM树中添加或删除DOM元素节点；v-show是通过向DOM元素设置样式display属性值控制显示隐藏。我们通过一个简单的demo对比观察下：<body> <div id="app"> <div v...原创 2020-02-13 18:41:51 · 10607 阅读 · 1 评论 -
vue自定义组件添加使用原生事件
自定义组件(Components)是vue的重要知识块之一，使用中不少人会发现一个问题：为什么我在组件里绑定click事件不起作用？这里先看看原因吧。在自定义组件中直接绑定原生事件vue可是"不待见"的，它会认为你没有定义这个事件，所以没有任何反应。哪些是原生事件？例如click单击、mouseover鼠标移入、mouseout鼠标移出、keyup键盘按下抬起、keydown键盘按下…等等一系列...原创 2020-02-12 20:15:29 · 2357 阅读 · 0 评论 -
vue-router重定向redirect和别名alias的用法区分
vue-router是vue框架的重要且常用的插件之一，用于单页面应用的路径打包管理。项目中常会用到redirect和alias以做“页面假动作”跳转。重定向redirect顾名思义，这个属性用于重定向页面跳转路径。简单说就是设置了一个路由，它有自己的路径，但重定向跳转至另一个路由。export default new Router({ routes: [ { pat...原创 2020-02-02 17:27:26 · 1767 阅读 · 2 评论 -
Vue实例生命周期函数（钩子函数）详解
一、钩子函数在了解vue生命周期函数之前，我们先看看啥叫"钩子函数"？百度一下是这样一段官方解释：“钩子函数是Windows消息处理机制的一部分，通过设置“钩子”，应用程序可以在系统级对所有消息、事件进行过滤，访问在正常情况下无法访问的消息。钩子的本质是一段用以处理系统消息的程序，通过系统调用，把它挂入系统。”简单理解，就是一些在系统消息触发时被系统自动调用的函数，像一个"钩子"，将我们想要处...原创 2020-02-11 22:42:04 · 1115 阅读 · 0 评论 -
vue开发使用vue-cli4.x创建项目详解
- 前言vue-cli4.x新版本安装教程可以看看我之前的文章。版本更新后在创建项目上有所不同，这里做详细的步骤教程以及选项解释。- 创建项目vue create 项目名- 选择配置先无视第一项（我的个人配置，后面会讲到）；一般有两项：default：默认配置（只有babel和eslint）Manually select features：手动配置一般做项目默认配置是不够的，我...原创 2020-02-09 20:12:10 · 4516 阅读 · 0 评论 -
vue-cli2.9.6及其他版本升级至vue-cli4.x最新版
- 前言目前网上关于vue-cli的文字/视频教程多数停留在2.9.6或3.x版本，但毕竟IT行业学新的总不会错。官方推出的版本从3.0开始也做了较大的变动，这里简单做个升级教程。- 卸载旧版本卸载命令：npm uninstall -g vue-cli这里有坑，如果明明卸载了却仍出现报错类似提示没有卸载干净，可能是当时安装旧版本时你还使用了yarn导致有残留，用yarn uninstall...原创 2020-02-09 18:17:19 · 3761 阅读 · 1 评论