Vue
Vue学习记录与使用案例,测试Demo
一个头发贼多的小火鸡
。
展开
-
Electron builder配置
1. 安装compression-webpack-plugincnpm install compression-webpack-plugin@5.0.2 --save 2. 在根目录下创建vue.config.js打包配置文件,如下注意看注释://let publicPath = process.env.NODE_ENV === 'production' ? 'sing-app-vue-dashboard/' : '/';const CompressionPlugin = requ原创 2021-07-22 15:01:40 · 1324 阅读 · 0 评论 -
Electron入门(新建工程)
前言:因为工作需要使用Electron做桌面应用程序,了解一下学习成本最低的只有Electron。直接结合Node.js + Vue.js 可以快速实现使用,当然了解的并不深入。这里做一下记录。顺便吐槽一下遇到一个问题,就是Electron打包后会出现部分Node.js的node_modules库找不到,当然了也找到了解决方式。Electron文档:https://www.electronjs.org/Electron-builder文档:https://www.electron.build原创 2021-07-21 14:47:40 · 453 阅读 · 1 评论 -
Crypto aes-128-cbc加密
1.crypto (如node.js)var key = '2cef781a9c0411eb'var str = JSON.stringify({ "ip": "192.168.12.1", "mac": "80:3F:5D:0E:04:2B", "wan_ip": "0.0.0.0", "internet": "1", "5g_ssid": "531A6-yang_test_2G", "2g_ssid": "531A6-yang_test_5G", "5g_tx_power": "100", ".原创 2021-06-04 10:56:50 · 2032 阅读 · 0 评论 -
Vue3.0开发文档 (转载)
本文为转载博文。 学习Vue3.x方便c Vue 3 新增内容的整理文档(经过验证的) 重点内容: ViteComposition API新的响应式机制计算属性和侦听器teleport (传送)Fragment(碎片)自定义事件($emit 验证)组件的 v-model 升级 利用 vite 创建下一代的 Vue 项目...转载 2020-11-23 15:52:12 · 1052 阅读 · 1 评论 -
Vue:九宫格抽奖 (模拟用途,纯前端)
<template> <div style="width: 100%; height: 90vh;; background: rgb(245, 224, 224);"> <div style="width: 100%;"> <div style="width: 80%; float: left; margin-top:50px; height: 300px; margin-left: 10%; border:0px solid black;">.原创 2020-09-28 10:25:34 · 678 阅读 · 1 评论 -
Vue的几种生命周期
1.创建之前beforeCreate(){ console.log("生命周期---创建之前")},2.创建完成created(){ console.log("生命周期---创建完成")},3.挂载之前beforeMount(){ console.log("生命周期---挂载之前")},4.挂载完成mounted(){ console.log("生命周期---挂载完成")}5.更新之前beforeUpdate(){ console.log("生原创 2020-08-14 09:40:20 · 187 阅读 · 0 评论 -
Vue:加入百度地图经纬度选取。(Ant design pro vue)
需求描述:1.使用百度地图选取地理经纬度位置,结合mongodb 2d索引检索距离。2.可手动输入经纬度地址,和唤起地图选取。3.根据用户信息把用户经纬度传给百度地图组件,回显坐标。4.把获取的经纬度地址截取成数组让mongodb识别。var locations = this.storeLocation.split(',')StoreLocation = [Number(locations[0]), Number(locations[1])]准备工作:申请百度地图开放平台Key(原创 2020-05-30 15:28:43 · 2649 阅读 · 10 评论 -
Vue:文件上传
UI框架不满足使用场景。需要点击头像上传头像!H5部分<van-cell-group> <input type="file" id="updateAvatar" style="display: none" multiple @change="handleFile"/> <div style="display: flex; height: 50px; margin-top: 10px;" @click="selectAvatar"> &.原创 2020-05-16 09:58:00 · 636 阅读 · 0 评论 -
WebSocket消息推送接收-(微仿滴滴打车业务场景)-(node.js-Vue.js)
年终结尾最后一次更新,在不写一次估计年前就没机会再写了(保证一月一次)。突然想起之前一个朋友问起实时订单推送如何实现。在年尾没啥事自己也比较感兴趣,简单实现了一下。1.开始准备工作就不写了哈~,直接梭。安装websocket依赖库。//安装 websocket依赖npm install websocket //安装 hashMap依赖npm install hashmap2...原创 2020-01-16 14:58:49 · 1252 阅读 · 1 评论 -
webapp商城:实现购物车模块(Vue+Aant)
此文,只涉及视图层面。业务数据自信设计。效果图:注:金额计算,全选,取消单个商品移除此金额Code:<template> <div> <div v-show="!data" style=" width: 100%; border: 0px solid black;" align="center"> <img ...原创 2019-03-23 16:04:54 · 917 阅读 · 0 评论 -
Vue:Tag标签选中(类型选择,分类选择)
使用三元表达式为类选择器给值。当变量active被点击赋值时则,引用active样式。无点击使用Classification样式。往往就是简单的操作,就把自己玩懵逼了!写半天报找不到Classification,还在想诶?Classification不是变量啊。一脸懵逼。最后发现'active':'Classification'。没加''。(日常自己坑自己)效果图:<...原创 2019-03-19 17:46:01 · 12292 阅读 · 0 评论 -
Android:webview取消滚动条
webView.setHorizontalScrollBarEnabled(false);//水平不显示webView.setVerticalScrollBarEnabled(false); //垂直不显示原创 2019-03-05 15:44:23 · 1781 阅读 · 0 评论 -
关于Vue打包过后样式丢失的问题!
给丢失样式前后加上:/*! autoprefixer: off*/ -webkit-box-orient:vertical;/* autoprefixer: on */即可原创 2019-03-05 09:18:36 · 5358 阅读 · 4 评论 -
Vuex:生命周期
vuex中,第一次打开页面,刷新都会进行初始化,他是一个响应式数据驱动源。例如:state:{ data:'abc' }。父级页面改变这个值时,在引用的子级页面同时发生改变,并且改变之后不受路由跳转的影响而进行初始化。只会受页面第一次加载,刷新,Windows.location.href的影响而进入初始化!...原创 2019-01-07 17:50:10 · 8848 阅读 · 1 评论 -
Vue:页面加载进度条
这段时间在踩Ant design pro Vue的坑,发现了个在手机端页面上经常出现的,加载进度条,效果蛮不错的!记录下来。 cnpm install --save nprogressimport NProgress from 'nprogress'import 'nprogress/nprogress.css'NProgress.configure({ showSpinn...原创 2018-12-25 14:19:15 · 6213 阅读 · 2 评论 -
关于Ant Design Pro Vue引入Viser图表不响应或超出的问题!
问题1:Viser在响应式布局中,会导致图表超出的问题,或者跟随导航栏伸缩导致图表过窄或过长。可能出现的原因!1.由于图表是Canvas画布,在他加载时只确定栅格布局的宽度,当导航栏再次伸缩,就出超出,溢出。解决办法:先render其他父级标签,确定父级宽高,在图表外层包裹的DIV上加v-if ,先让栅格布局加载完成,使用nextTick方法调用状态再让他显示出来!<templ...原创 2019-01-03 16:17:03 · 2809 阅读 · 0 评论 -
Vue:methods方法调用方法 (踩坑随记)
Vue:methods函数集中不能像原声JS中直接调用函数,踩坑半天差点爬不起。1.首先在methods中定义一个函数,redierct(){ window.location.href="https://www.baidu.com/?tn=98012088_5_dg&ch=12"}2.在methods其中一个方法中调用this.$options.methods...原创 2018-11-03 13:49:38 · 15450 阅读 · 1 评论 -
Vue/css图片底部遮罩层
<template> <div > <div v-for="item in list"> <div class="thediv" @click="onClickVideo(item.Video)"> <img src="http://p2.music.126.net/CQDGeibcfkS原创 2018-11-06 11:36:41 · 3321 阅读 · 0 评论 -
cnpm全局式安装
踩坑之:Vue install scss样式 很多三方库使用npm安装不上:warning命令行:npm install -g cnpm --registry=https://registry.npm.taobao.org原创 2018-11-01 17:33:10 · 183 阅读 · 0 评论 -
Vue2.x -Axios请求,拦截器
不得不说不管是微信小程序还是Web,封装的请求使用起来确实很方便,起码能让代码看起来清晰,不那么冗余,不过最重要还是能少写几行代码。哈哈1.创建Vue模板项目:进入项目下,npm install axios2.打开项目进入min.js,将他们挂载到全局中,方便使用。import Axios from 'axios'Vue.prototype.$Axios=Axios3....原创 2018-11-02 15:12:23 · 1800 阅读 · 0 评论 -
Vue-本地跨域访问后台配置。
1.进入Vue项目的config/index.js 文件。未配置之前是这样的:module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: {}, // Various Dev Server settin...原创 2018-11-02 15:18:45 · 1717 阅读 · 0 评论 -
推荐一个好用的CSS样式效果站
https://daneden.github.io/animate.css/原创 2018-11-02 15:22:02 · 1963 阅读 · 0 评论 -
Vue:与android做通信,android调用WebAPP JS方法
这几天遇到个需求,没搞过头大的很!Web给android提供一个调用方法供android调用并返回android参数。首先最重要的是要将函数挂载到window里去,这里是最懵的地方。Android.getClient(msg) 在Vue项目里调用是会报错,不过没关系,没什么影响,不影响程序正常运行。<template> <div> <div ...原创 2018-11-02 17:30:01 · 2519 阅读 · 0 评论 -
Vue:百度地图API 定位 地点检索
一个全栈向前端的退化过程。 (咳~抱怨一句)高德--API清晰,就是定位可能差了那么点!百度--国内较好支持国外定位 搜索的平台。(不过需要申请配额)google -- 需要翻墙,没花钱配额之前给你一次调用机会,进入webpack.base.conf.js文件:在entry{}下添加externals: { 'BMap': 'BMap', 'BMap_S...原创 2018-11-08 17:27:16 · 6073 阅读 · 0 评论 -
webview轮播图与Android滑动冲突的解决办法
在Android中我们经常需要左右滑动,其中内嵌的web页面也有滑动动作。轮播图举例:需要左右翻页时,会触发Android中的ViewPager导致翻页到另一个页面轮播图翻页翻不动,或失效。但是由于安卓是父,而Web是子。在Web中不论你做什么处理,都管不了父窗口的事情,所以需要Android做处理,而前端最好能给Android传递轮播图的位置,让这块区域的viewPager失效。上代码:...原创 2018-11-19 18:01:19 · 1306 阅读 · 0 评论 -
Vue:页面缓存
在Vue中页面缓存是个特别好用的模块。当你的页面不需要实时更新时,进入页面他会把这个页面加载入内存中,减少了不必要的后台请求,减轻后台压力。上代码:App.vue<template> <div id="app"> <keep-alive> <router-view v-if="$route.meta.keepAlive">...原创 2018-11-20 09:23:14 · 1615 阅读 · 0 评论 -
Vue :npm run build打包全家桶
enmmm~~第一个自己写的Vue项目快要上线了,踩坑太多。有点真实!直接开始:第一步:在build之前需要配置一下,进入Vue项目中的Config下的index.js文件打开。找到build代码块,找到assetsPublicPath,在未修改前assetsPublicPath:"/",需要把它修改为:assetsPublicPath:"./"。即可。(第一步解决了打包后访问路径的问题)...原创 2018-11-30 16:05:07 · 1282 阅读 · 0 评论 -
Vue:i18n国际化语言加载
不废话,直接开始!第一步:cnpm install vue-i18n第二步:min.js中import VueI18n from 'vue-i18n'Vue.use(VueI18n)const i18n = new VueI18n({ locale: 'en', messages: { 'zh': require('@/assets/internatio...原创 2018-12-12 16:00:47 · 947 阅读 · 1 评论 -
Android-IOS :webview localStorage本地缓存
APP中嵌套H5时,很多H5原生态的功能会被默认屏蔽掉。类似于浏览器的无痕模式。所以在安卓中需要webview支持localStorage缓存就需要在安卓中设置 如下:webView.getSettings().setDomStorageEnabled(true);webView.getSettings().setAppCacheMaxSize(1024*1024*8);String...原创 2018-12-07 13:54:26 · 1663 阅读 · 0 评论 -
Vue:嵌套路由[子级路由]--(个人理解)
描述一下:由于之前一直使用Vue都是配置单页面,导致只需要路由跳转就可以了。而今天做跳转时,一头懵。每次都是切换页面,导致我的导航栏每次都是初始化状态。还傻里傻气的每个子级都引用布局组件。(真他妈蠢,想想都醉了)在做单页面路由时,只需要配置一个跳转路由方式,name或者path (router-link,this.$router.push())等方式。而在非单页里面:其他内容保持一致,只需...原创 2018-12-27 14:17:11 · 1311 阅读 · 0 评论 -
JSON去除重复数据
之前写的一直有问题,不知道在多数据情况会出BUG。都一年多了我的天,没人反馈。(误人子弟小火鸡)同时感谢下面两位评论的朋友提醒。(已更改)var arr = [{ uuid: '1', name: '张三' },{ uuid: '2', name: '李四' },{ uuid: '3', name: '王五' },{ uuid: '2', name: '李四' },{ uuid...原创 2018-11-03 10:03:29 · 8156 阅读 · 12 评论