vue2
文章平均质量分 51
vue2.0+日常工作总结
sunly_
郑州前端程序员一枚
展开
-
props组件传值(子串子)
第一个version 组件。第二个footBar组件。原创 2024-04-12 17:27:38 · 549 阅读 · 0 评论 -
H5中,跳转高德腾讯百度地图,导航到目的地
H5跳转地图,导航功能原创 2023-06-25 11:38:56 · 895 阅读 · 0 评论 -
uniapp:图片压缩二
【代码】uniapp:图片压缩二。原创 2023-03-17 14:29:29 · 332 阅读 · 0 评论 -
uniapp(vue):js实现双色球开奖走势图带连线
uniapp(vue):js实现双色球开奖走势图带连线原创 2023-03-14 11:03:33 · 2613 阅读 · 13 评论 -
uniapp:搜索关键字,高亮提示
uniapp搜索关键字高亮显示,vue搜索关键字高亮显示原创 2023-03-01 15:15:34 · 976 阅读 · 2 评论 -
tron钱包:tron-wallet-hd生成:私钥、助记和地址的 Tron HD 钱包
tron-wallet-hd用于生成离线私钥、助记词种子和地址的 Tron HD 钱包。原创 2022-07-13 15:48:41 · 3585 阅读 · 0 评论 -
复制粘贴vue-clipboard2
1、npm install --save vue-clipboard22、main.js引入import VueClipboard from 'vue-clipboard2'Vue.use(VueClipboard)3、页面中使用<van-button type="warning" v-clipboard:copy="item.login_url" /...原创 2019-12-26 12:24:01 · 169 阅读 · 0 评论 -
vue-hash-calendar 日期选择
火车票模块需要实现的功能:选择日期,根据日期计算星期npm i vue-hash-calendar// main.js引入import vueHashCalendar from 'vue-hash-calendar'import 'vue-hash-calendar/lib/vue-hash-calendar.css'Vue.use(vueHashCalendar)定义...原创 2020-04-03 15:36:33 · 2484 阅读 · 0 评论 -
vue视频播放器vue-video-player
npm i vue-video-player -Dmain.js引入import VideoPlayer from ‘vue-video-player’require(‘video.js/dist/video-js.css’)require(‘vue-video-player/src/custom-theme.css’)Vue.use(VideoPlayer)<templa...原创 2020-01-04 16:32:00 · 15303 阅读 · 1 评论 -
vue-socket.io,
1、npm install vue-socket.io --save2、main.js中引入import VueSocketIO from 'vue-socket.io'Vue.use(new VueSocketIO({ debug: true, connection: 'https://ceshih5.cn:2120', vuex: { st...原创 2020-03-04 11:57:28 · 183 阅读 · 0 评论 -
vue数据可视化v-charts
页面效果npm i v-charts echarts -S<div class="charts"> <div class="title"> <p>近7日收益</p> <div>¥<span>{{userInfo.senven_num}}</span></div> </di...原创 2020-01-06 15:36:15 · 1134 阅读 · 0 评论 -
mescroll上拉加载下拉刷新总结
//npmnpm install --save mescroll.js//main.js引入//MescrollVue; //上拉加载,下拉刷新import MescrollVue from 'mescroll.js/mescroll.vue'Vue.component('mescroll-vue', MescrollVue);//在页面中使用<template> ...原创 2019-12-31 10:31:13 · 2311 阅读 · 0 评论 -
lrz:图片压缩上传
lrz图片压缩npm install lrz// main.js引入import lrz from 'lrz'<input type="file" @change="upfileimg($event)">//上传图片methods:{ upfileimg(e) { this.$toast.loading({ duration: 0, forbidClick...原创 2019-12-20 17:26:07 · 1484 阅读 · 1 评论 -
vue-pdf,实现预览下载工具
npm install --save vue-pdf页面中引入vue-pdf<template> <van-popup v-model="showBottom" position="bottom"> <van-cell title="预览" is-link @click='previewPDF()' /> <van-cell title="下载" is-link @click='downPDF()' /> </van-popup&.原创 2020-05-28 11:07:19 · 1263 阅读 · 2 评论 -
vue多语言:vue-i18n
npm install vue-i18n//main.js引入//VueI18nimport VueI18n from 'vue-i18n'import LangEn from '@/assets/js/en.js'import LangCn from '@/assets/js/cn.js'Vue.use(VueI18n)const i18n = new VueI18n({ loc...原创 2019-12-20 17:19:26 · 265 阅读 · 0 评论 -
生成二维码QRcode.js
// npm install --save qrcodejs2<template> <div> <div id="qrcode"></div> <!-- 创建一个div,并设置id为qrcode --> </div></template> <script> impo...原创 2019-12-26 12:24:50 · 179 阅读 · 0 评论 -
vuex持久化 vuex-persistedstate
使用vuex时,如果刷新浏览器,则vuex中的数据就会丢失,但是有时候我们并不希望如此。例如全局相关的,如登录状态、token、以及一些不常更新的状态等,我们更希望能够固化到本地,减少无用的接口访问,以及更佳的用户体验。1、安装npm i -S vuex-persistedstate2、在store.js中引入import Vue from 'vue';import Vuex from 'vuex';import createPersistedState from 'vuex-pers原创 2022-03-17 13:36:38 · 779 阅读 · 0 评论 -
轮播图vue-awesome-swiper
1、npm install vue-awesome-swiper --save2、组件中引入import VueAwesomeSwiper from 'vue-awesome-swiper'import 'swiper/dist/css/swiper.css'Vue.use(VueAwesomeSwiper)3、轮播图轮播:<div class="banner">...原创 2019-12-26 12:22:33 · 266 阅读 · 0 评论 -
crypto-js加解密
安装依赖:npm install crypto-js<script> import CryptoJS from 'crypto-js'; export default { data() { return { aes_key: 'xOwvIiP19Bn4XcQ8', } }, mounted() { let walletAddress = 'TAfcPpLAUdy28u7nzFQjds39XSYJ9qA1mE' let timestamp = .原创 2021-11-03 16:55:40 · 1437 阅读 · 0 评论 -
better-scroll技术总结
需要实现的功能:1 从首页跳进列表页,传入index参数,nav要根据index值滚动到对应的dom位置2 点击 nav => 触发点击的dom滚动到顶部,(每次点击nav,data和title都需要初始化滚动位置)3 data数据更新,title数据更新4 点击 title => title 可以横向滚动,data数据也要滚动到与title对应的数据位置npm:n...原创 2019-12-10 16:27:41 · 1839 阅读 · 0 评论 -
VUE源码解析:3、虚拟dom和h函数
简介虚拟Dom是把javaScript对象 描述 成真实的dom结构,(结构参考VUE源码解析:1)原创 2021-06-11 13:58:45 · 740 阅读 · 5 评论 -
VUE源码解析:1、虚机dom
1、真实dom == 虚机dom//真实dom<div class="box"> <h3>标题</h3> <span>小标题</span> <ul> <li>1</li> <li>2</li> <li>3</li> </ul></div>//虚机dom{ sel:'div', // ==> sele.原创 2021-06-11 10:26:58 · 98 阅读 · 1 评论 -
VUE源码解析:5、初识diff算法
diff算法总结1、为什么节点要加上key:key是这个节点的唯一标识,告诉diff算法,更改前后,他们是同一个dom节点。2、只有同一个虚拟节点,才会进行diff算法(选择器相同,key相同),否则就会暴力删除旧的,插入新的3、diff算法只进行同层比较,不会跨层比较,即使是用了同一片虚拟节点,但是跨层了,对不起,精细化不diff你,而是暴力删除旧的,插入新的下面新建index.js来测试上面的三种情况,1、为什么节点要加上key// index.html中新增一个button按钮,一.原创 2021-07-06 11:27:58 · 160 阅读 · 0 评论 -
VUE源码解析:4、手写一个低配版的h函数
创建mysnabbdom文件夹,实现h.js和vnode.js1、实现vnode.js,(vnode的本质是,把传入的参数,组合成对象返回,得到的也就是前文所说的虚拟dom)// 函数的功能,就是把传入的5个参数组合成对象返回export default function(sel, data, children, text, elm) { return { sel: sel, data: data, children: children, text: text, elm:原创 2021-06-22 11:49:57 · 241 阅读 · 1 评论 -
VUE源码解析:2、snabbdom介绍与配置,环境搭建
snabbdom.jsSnabbdom 是一个虚拟 DOM 库,专注提供简单、模块性的体验,以及强大的功能和性能。在学vue的过程中,虚拟dom应该是听的最多的概念之一,其借鉴snabbdom.js进行开发。1、创建文件,安装snabbdom这里已经创建好一个空文件夹,打开命令行工具cmdnpm initnpm i -S snabbdom得到如下图文件2、运行环境配置,不能在node.js环境运行,需要在webpack和webpack-dev-server开发环境这里需要注意.原创 2021-06-11 11:11:52 · 564 阅读 · 1 评论 -
VUE版手写日历组件
开发背景常用日历组件可能满足不了我们自定义的多种需求(比如样式),因此通常情况下我们可能需要自己手动开发款日历,先上图开发流程1. 根据常用日历样式,我们template部分可以分为三部分(上下月及当前月份展示;周日至周六展示;主体日期展示三部分)template部分代码<div class="date"> <div class="header"> <span class="pre_month" @click="onPreMonth"></s转载 2021-10-28 10:03:12 · 584 阅读 · 2 评论 -
vue watch监听值得修改
watch:{ //监听下拉框变化,筛选列表,下拉框如果改变coinName的值就会走这里筛选 coinName(name,oldVal){ this.myAssetsList = this.myAssetsList_all.filter(item=>{ return item.coin == name; }) },},data() { return { coinName:'',//选择搜索值 myAssetsList_all:[],//全部资产列表 myAsse原创 2020-06-17 16:53:26 · 1756 阅读 · 0 评论 -
vue跳转同一个页面数据不更新问题
路由更新就重新请求数据watch: { // 监听相同路由下参数变化的时候,从而实现异步刷新 '$route'(to,from) { this._initData(); this.nickname = this.$route.query.nickname;//修改页面标题 }},原创 2020-06-17 16:43:14 · 1272 阅读 · 0 评论 -
vue中 使用axios完成聊天系统搭建
页面效果如下图1、先获取消息记录接口,展示到页面中data(){ return{ value:'',//发送的内容 list:[ // 数据结构如下图,只需要内容 和状态 判断是 客服消息 还是用户消息 // { // text:'请问有什么可以帮您?', // status:1,//1客服,0用户 // }, ],//消息列表 upDataMsg:null,// 查询新消息,轮询 }},mounted() { this._initD.原创 2020-06-12 18:09:28 · 500 阅读 · 0 评论 -
vue 实现旋转动画效果
如图,点击切换时,需要转动动画<img src="@img/assets/4.png" class="zhuan" @click="zhuan" :class="{go:rotate , aa :!rotate}">rotate: false, //控制互转效果zhuan(){ this.rotate = !this.rotate;}原创 2020-06-06 13:55:47 · 6951 阅读 · 0 评论 -
vue监听页面滚动,动态修改导航条颜色,过渡效果
<template> <div class="header" :style="style"> </div></template><script> export default { data() { return { style: {}, opacity: 0, } }, mounted() { window.addEventListener("scroll", this.windowScro原创 2020-06-04 12:35:16 · 3090 阅读 · 0 评论 -
vue移动端键盘搜索事件
input的type=“serch”监听keypress事件阻止事件默认行为(默认为换行)通过event.target.value获取要搜索的值处理ios上系统软键盘,keycode=13的叫换行问题,提升客户体验。input 外面包一层form,并且阻止表单的默认行为<form @submit.prevent> <input type="serch" placeholder="商品搜索~" v-model="searchVal" @keypress="searchGoo.原创 2020-05-08 17:32:32 · 612 阅读 · 0 评论 -
overflow: auto 后监听滚动距离
<div class="page-body-inner" @scroll.passive="getScroll($event)"></div>getScroll(e) { console.log(e.target.scrollTop)},原创 2020-05-08 17:25:51 · 2836 阅读 · 0 评论 -
Replace Autoprefixer browsers option to Browserslist config,VUECLI3报错
报错内容:Replace Autoprefixer browsers option to Browserslist config.Use browserslist key in package.json or .browserslistrc file.Using browsers option cause some error. Browserslist configcan be used...原创 2020-05-07 18:29:34 · 1736 阅读 · 0 评论 -
vue商城:商品规格数据处理
后台接口返回的数据结构在vue中,使用forEach()来处理成自己想要的数据data() { return { show:false,//商品规格弹框 price:'',//商品默认价格 stock_num:'',//商品默认总库存 if_sku:true,//判断该商品是否有规格 sku:[],//商品规格 select_id:[],//加入购物车/购买...原创 2020-04-28 09:19:10 · 2968 阅读 · 1 评论 -
router.replace(),后router.go(-1)需要点击两次才能返回解决
现在有三个页面A页面,B页面,C页面需要实现的功能是:A跳转>B,B跳转>C,C页面使用replace()跳转>B,B返回A解决方案在C跳转B的时候使用router.replace()跳转,同时router.go(-1)this.$router.replace({name:'b'})this.$router.go(-1)...原创 2020-04-25 13:35:40 · 3715 阅读 · 4 评论 -
npm run build后不执行
参考百度方法:修改淘宝镜像后重新打包就OK了npm config set registry http://registry.cnpmjs.org或者隐藏check-versions.js这一段原创 2020-04-14 11:10:03 · 1356 阅读 · 0 评论 -
vue transition动画
1、展开收起动画<template> <button @click="show= !show">点击展开/关闭</button> <!--这里的name 和 css 类名第一个字段要一样--> <transition name="popup"> <div class="box" v-show="show">&l...原创 2020-04-03 11:08:55 · 774 阅读 · 1 评论 -
vue背景音乐,点击音效audio实现
<audio ref="audio" :src="audioUrl"></audio>data() { return { audioUrl:require('../../common/images/energy_charge/my.mp3'),//声音文件 }}methods:{ play(){ this.$refs.audio.play();//点击...原创 2020-04-03 10:46:18 · 4488 阅读 · 5 评论 -
路由无法跳转,或自动返回的原因
项目使用vant-uiaxios请求数据后使用了this.$toast.clear();清除加载中等弹窗,此时 如果页面接口没有任何弹窗使用this.$toast.clear();时,可能造成路由跳转错误,或者自动返回上个路由或首页等错误...原创 2020-04-02 14:59:19 · 2251 阅读 · 0 评论