Vue
关注
分享
扫一扫
文章平均质量分 66
zeke_x
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
vue中异步函数async和await的理解与用法
先说一下async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。 写一个async 函数 async function timeout() { retur...转载 2021-04-21 16:44:10 · 980 阅读 · 1 评论 -
vue更新视图的方法 vue.set() (this.$set) 的用法
由于最近工作的时候大量操作对象数组，并且要求实时更新视图数据，这个时候首先想到的是 vue.set() 方法（注：当发现model上的数据发生改变，而页面上的视图数据没有改变，推荐使用该方法。）下面弄一个简单的案例<template> <div id="app2"> <p v-for="item in items" :key="item.id">{{item.message}}</p> <button clas转载 2021-01-22 15:48:28 · 414 阅读 · 0 评论 -
使用原生js、XMLHttpRequest实现下载文件（三种方式）
一、使用XMLHttpRequest，获取response 实现下载 let that = this; let params = { taskId: that.fieId }; let xhr = new XMLHttpRequest(); xhr.open('POST', '/ids/fap/session/pcap-expo原创 2020-12-11 09:41:42 · 8436 阅读 · 0 评论 -
element-ui+vue弹出多个message的问题处理
如果出现网络问题，刷新页面，或者有多个接口请求就会出现报错，那么提示就会连续弹出几个：解决方案：重写Message。弹出前判断是否有相同弹出框，若有则关闭它再弹出新的resetMessage.js：import {Message} from 'element-ui';let messageInstance = null;const resetMessage = (options) => { if(messageInstance) { messageInstance.原创 2020-07-07 16:05:31 · 2186 阅读 · 0 评论 -
vue中JS实现内容上下无缝滚动效果
vue中JS实现内容上下无缝滚动效果现在有个需求当页面载入时实时接口风险板块的内容自动往上无缝滚动，当鼠标停留时滚动停止！我们开始写方法，在methods中写个scroll方法， 通过document.getElementById来获取当前元素，这里scrollTop获取被选元素的垂直滚动条位置，offsetHeight获取该控件本身的高度，然后设置一个定时器，给定一个时间，这样就实现了自动...原创 2019-11-13 15:32:32 · 5085 阅读 · 0 评论 -
vue-cli中的this.$nextTick详解
官方介绍：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。理解：总结来说， 假设我们更改了某个dom元素内部的文本，而这时候我们想直接打印出这个被改变后的文本是需要dom更新之后才会实现的，也就好比我们将打印输出的代码放在setTimeout(fn,...原创 2019-02-22 14:57:31 · 974 阅读 · 0 评论 -
Vue2.0的传值方式：父传子、子传父
本文介绍传值方式：父传子、子传父父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息父组件向子组件进行传值父组件:<template> <div> 父组件: <input type="text" v-model="name"> <br>...原创 2019-02-15 14:28:09 · 254 阅读 · 0 评论 -
在vue中使用vuex和sessionStorage保存用户名
安装 vuexnpm install vuex --savevuex安装完成之后，构建如下目录：main.js文件下注册：//实例化 storeimport store from './vuex/store.js'new Vue({ el: '#app', store, //实例化 store router, components: { App }, ...原创 2019-01-25 14:22:09 · 7696 阅读 · 4 评论 -
Vue-cli中watch监听使用
Vue-cli中watch监听使用一下是Vue中watch的基本使用：<template> <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName">&原创 2019-01-08 21:17:07 · 3802 阅读 · 0 评论 -
vue.js结合mui框架后picker（选择器）的使用
vue.js结合mui框架后picker（选择器）的使用效果图：示例一示例二示例三引入的mui和vue.js： <link rel="stylesheet" href="css/mui.min.css"> <link rel="stylesheet" type="text/css" href="css/mui.picker.m原创 2019-01-17 16:49:29 · 5086 阅读 · 0 评论 -
vue 过滤器基本用法以及封装过滤器
vue 过滤器基本用法理解：不改变data的数据格式，在界面显示处理后的数据格式比如：对数组中的日期进行截取整体代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title&g原创 2019-02-14 14:25:21 · 389 阅读 · 0 评论 -
解决用了V-show 刷新的一瞬间可以看到隐藏的文字
做了一个组件页面，我用了一个v-show是判断，结果刷新时候会看到那个隐藏的内容<style> [v-cloak] { display: none; }</style><div id="app" v-cloak></div>这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-c...原创 2019-02-14 15:05:19 · 1068 阅读 · 0 评论 -
vue-cli点击实现全屏功能(两种方式)
项目中有点击按钮实现全屏功能代码如下：<template> <div> <a-button type="primary" @click="screen">全屏</a-button> </div></template><script> export default { ...原创 2019-07-04 10:56:05 · 3067 阅读 · 2 评论 -
Vue-cli中 $ref 的基本用法
对于ref官方的解释是：ref 是被用来给元素或子组件注册引用信息的。引用信息将会注册在父组件的 $refs 对象上。我的解释：1、如果ref用在子组件上，指向的是组件实例，可以理解为对子组件的索引，通过$ref可能获取到在子组件里定义的属性和方法。2、如果ref在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，通过$ref可能获取到该DOM 的属性集合，轻松访问到DOM元素，作用...原创 2019-06-28 22:07:20 · 967 阅读 · 0 评论 -
vue中使用getUrlParam()方法来获取URL的值
首先建一个GetUrlParam.js，然后在需要的页面中引入使用：GetUrlParam.jsexport function getUrlParam(name) { return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.hr...原创 2019-07-10 10:01:24 · 3679 阅读 · 0 评论 -
Vue中的computed属性
Vue中的computed属性理解：1、computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；2、computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，只...原创 2019-09-19 15:32:56 · 207 阅读 · 0 评论 -
在vue中使用vuex和sessionStorage管理数据
安装 vuexnpm install vuex --savevuex安装完成之后，在src文件下建个store文件夹下建个index.jsmain.js文件下注册：//实例化 storeimport store from './vuex/store.js'new Vue({ el: '#app', store, //实例化 store router, com...原创 2019-09-28 21:16:48 · 992 阅读 · 2 评论 -
在vue-cli中使用iview组件上传多个文件的功能
在vue-cli中使用iview组件上传多个文件的功能思路：创建一个数组 把需要上传的文件 push到这个数组里面需求：点击提交按钮把上传后得文件URL地址当做参数传给后台；多个文件使用逗号隔开样式随便写的，自己做的demohtml代码<template> <div> <Upload ref="upload" mu...原创 2019-01-11 17:03:18 · 3111 阅读 · 1 评论 -
vue.js写个选择多条数据的和查询功能
效果图如下：需求是：1、点击input框后选择审核人列表菜单过渡从下往上出现；2、选择人后点击确定按钮，选择的人出现在input框中；3、点击空白的地方则关闭选择审核人窗口代码如下：&amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;html lang=&amp;amp;amp;quot;en&amp;amp;amp;q原创 2019-01-17 12:02:02 · 3906 阅读 · 0 评论 -
Vue.js进行查询操作的实例
Vue.js写个查询功能代码如下：&amp;amp;lt;!DOCTYPE html&amp;amp;gt;&amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt;&amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp原创 2019-01-17 10:16:56 · 10422 阅读 · 1 评论 -
在vue-cli中实现类似电商的五星评价
用vue实现电商的五星评价（通过修改元素的class名来切换背景图） 效果图如下： 这是两个图片，一个是空心一个是实心的： 绑定鼠标点击两个事件：使用鼠标进入mouseenter 鼠标离开mouseleave，代码如下： :class=”{‘solid’:cur>=item}” 意思是当cur >= item的时候把 ...原创 2018-09-11 14:31:09 · 512 阅读 · 0 评论 -
vue-cli中封装一个弹框组件
vue-cli中封装一个移动端的弹出层组件这是一个提示框和对话框，例： 这是一个组件 eject.vue&amp;amp;lt;template&amp;amp;gt; &amp;amp;lt;div class='kz-cont' v-show='showstate'&amp;amp;gt; &amp;amp;lt;div class='kz-wrapper' &原创 2018-09-13 14:00:05 · 8016 阅读 · 2 评论 -
在vue-cli中封装一个类似电商的从右至左滚动公告的组件
使用vue-cli封装一个轮播文字通告组件：我们在使用电商网站经常会看到轮播文字的通告；这是一个从右至左的滚动的文字播放这是封装好了demo组件&amp;lt;template&amp;gt; &amp;lt;div class=&quot;wrap&quot;&amp;gt; &amp;lt;div id=&quot;box&quot;&a原创 2018-09-20 10:13:08 · 2495 阅读 · 0 评论 -
在vue-cli中写一个数量加减
vue实现汽车购票的加减需求:最少减到1，减到1时颜色变灰并且不让再减，最大加到5，颜色变灰并且不再让加，效果如下： html代码：&amp;amp;amp;lt;template&amp;amp;amp;gt;&amp;amp;amp;lt;div&amp;amp;amp;gt; &amp;amp;amp;lt;div class=&amp;am原创 2018-09-20 10:24:24 · 2415 阅读 · 0 评论 -
在vue-cli中使用layer弹出层插件
在vue-cli中使用layer弹框插件首先去官网layer去下载，然后解压放在static文件下；最后在index.html文件中全局引用： &amp;lt;link rel=&quot;stylesheet&quot; href=&quot;static/layer/need/layer.css&quot;&amp;gt; &amp;lt;script src=&quot原创 2018-09-20 11:27:29 · 8483 阅读 · 5 评论 -
vue-cli如何打包和图片上传丢失问题
vue项目的打包需要修改config/index.js里的assetsPublicPath的字段，初始项目是/他是指向项目根目录的也是为什么会出现错误，这时改为./如下： build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Pa...原创 2018-09-28 11:19:38 · 1055 阅读 · 0 评论 -
如何在vue-cli项目中引用Iview和Element
一、在vue-cli中引入iview1、首先打开命名行，在该项目下进行安装iviewnpm install iview --save2、在src目录下的main.js文件中全局引入：import Vue from 'vue'import App from './App'import router from './router'import iView from 'iview' ...原创 2018-12-20 10:01:30 · 1731 阅读 · 1 评论 -
vue-cli搭建的项目如何引入图标字体
1、从iconfont官网将要使用的图标添加至购物车，下载代码2、然后解压后剪切至scr下面的assets目录下：3. 在APP.vue文件下全局引入@import “assets/fonts/iconfont.css”;以上就是本章全部内容...原创 2018-12-20 10:20:09 · 1191 阅读 · 0 评论 -
vue-cil的移动端随意拖拽图片
vue-cil的移动端随意拖拽图片并且点击跳转页面方法一、通过不断的改变left 和top值实现拖拽，（适合使用PC，移动端低端机不流畅）：<template> <div> <div id="pic" class="backIcon" @click="$router.push('/disclose')"> <img src原创 2019-01-04 15:33:24 · 1571 阅读 · 2 评论 -
vue-cli中axios请求接口的使用
vue-cli中axios请求接口安装和使用一、npm 安装axios，文件根目录下安装，指令如下npm install --save axios二、在main.js中引入axios；接着将axios改写为Vue的原型属性(我一般会用$ajax来代替axios)import axios from 'axios'Vue.prototype.$ajax= axios //我一般...原创 2019-01-04 16:15:11 · 1478 阅读 · 0 评论 -
vue-cli中点击列表传参进入列表详细页面
vue-cli中点击列表传参进入列表详细页面一种点击事件的传参方式:contribute.vue页面传<template> <div class="conwrap" v-for="(item,index) in lists" :key="index" @click="detail(item)"> <div class=&quo原创 2019-01-04 16:50:00 · 2368 阅读 · 0 评论 -
vue-cli中把时间戳转化为日期格式和封装接口
vue-cli中把时间戳转化为日期格式封装一个date.js文件：export function formatDate (date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); } le...原创 2019-01-04 17:03:11 · 576 阅读 · 0 评论 -
Vue-cli 中为单独页面设置背景图片铺满全屏的方法
Vue-cli 中为单独页面添加张背景图片从而达到铺满全屏的方法<template> <div id="logo"> </div></template><script> import meadiaurl from '../../api/mediaurl' export default { ...原创 2019-01-10 15:43:32 · 21055 阅读 · 5 评论 -
vue中打包后出现css中文本超出部分隐藏显示省略号失效
一般使用下面这段css代码来让文字超出范围隐藏并显示省略号： overflow: hidden; /*超出的文本隐藏*/ text-overflow: ellipsis; /* 溢出用省略号*/ display: -webkit-box; /*作为弹性伸缩盒子模型显示*/ -webkit-line-clamp: 1; /*显示的行数；如果要设置2行加...则设置为...原创 2019-01-10 15:57:46 · 1994 阅读 · 0 评论 -
vue-cli中使用vue-router切换页面时自动滚动到顶部的方法
vue-cli中使用vue-router切换页面时自动滚动到顶部的方法解决办法：在 Vue项目的main.js文件中加入以下代码即可解决：//页面跳转显示在顶部router.afterEach((to,from,next) => { window.scrollTo(0,0); })有时候这样解决出现的问题：1.scrollTo方法部分在手机上的部分浏览器不支持，也就是...原创 2019-01-10 16:52:39 · 700 阅读 · 0 评论 -
vue.js中用iview框架的page组件实现简单的分页
1、首先去iview官网安装iview的框架（我是通过CDN直接引入）： &amp;lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;http://unpkg.com/iview/dist/styles/iview.css&quot;&amp;gt; &am原创 2018-12-26 10:57:13 · 4111 阅读 · 0 评论 -
Vue2.0搭建脚手架（vue-cli）
Vue2.0搭建脚手架（vue-cli）安装node.js从node官网下载并安装node，安装只要一路“next”就可以了。 安装完成后，打开命令行工具输入命令node -v，如下图，如果出现对应版本号，就说明安装成功了。 —— [ node 官网]安装vue-cli脚手架构建工具vue-cli 提供一个官方命令行工具，可用于快速搭建大型单页应用。只需几分钟即可创...原创 2018-09-11 11:34:46 · 272 阅读 · 0 评论