vue
vue
Mosowe
vue(2/3),react,uniapp,小程序,javascript,typescript,node
展开
-
vue:vue-router导航守卫
文章目录全局导航守卫路由独享守卫组件独享导航守卫组合式 API中的路由函数组合式 API中的导航守卫全局导航守卫全局前置守卫beforeEach:一般用于权限校验全局解析守卫beforeResolve:是获取数据或执行任何其他操作(如果用户无法进入页面时你希望避免执行的操作)的理想位置。全局后置钩子afterEach:它们对于分析、更改页面标题、声明页面等辅助功能以及许多其他事情都很有用。路由独享守卫beforeEnterconst routes = [ { path: '/u原创 2021-10-21 14:00:43 · 340 阅读 · 0 评论 -
优化6指标
原创 2021-09-22 10:49:52 · 126 阅读 · 0 评论 -
html:小知识
页面导入样式时,使用link和@import有什么区别?(1)link属于XHTML标签,除了加载CSS外,还能用于定义RSS, 定义rel连接属性等作用;而@import是CSS提供的,只能用于加载CSS;(2)页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;(3)import是CSS2.1 提出的,只在IE5以上才能被识别,而link是XHTML标签,无兼容问题;(4)link支持使用js控制DOM去改变样式,而@import不支持;HTML语义原创 2021-09-22 10:47:45 · 110 阅读 · 0 评论 -
vue:首屏加载优化方案
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script><script src="https://unpkg.com/vue-router@3.2.0/dist/vue-router.js"></script><script src="https://unpkg.com/vuex@3.4.0"></script><script src="https://c原创 2021-09-22 10:09:30 · 1951 阅读 · 0 评论 -
浏览器打印功能
vue2.x +vue-cli4.x实现浏览器无预览打印数据IE内核浏览器打印(IE11)配置js文件:/** * 批量打印 * @param printCont 批量打印数据的数组 */const printFn = function (data, cb) { let wdapp; let wddoc; try { // 创建ActiveXObject对象 wdapp = new ActiveXObje原创 2021-06-11 17:23:12 · 1044 阅读 · 0 评论 -
vue:vue-cli渲染markdown文件
看演示:一定要看到文末!步骤:安装依赖:npm i vue-markdown-loader -D、npm i github-markdown-css -S 、npm i highlight.js -S配置vue.config.jsmodule.exports={ chainWebpack:config=>{ config.module .rule('md') .test(/\.md/) .use('v原创 2021-05-19 15:09:07 · 652 阅读 · 0 评论 -
vue:vue-router导航守卫
beforeEach/* 路由拦截 */router.beforeEach((to, from, next) => { if (to.matched.some((res) => res.meta.requireAuth)) { // 验证是否需要登陆 if (store.state.IS_LOGIN) { // 查询是否已经登陆 next(); } else { next({ path: '/Login', query: {..原创 2021-04-23 22:28:53 · 144 阅读 · 0 评论 -
vue:自定义组件挂载原型上
以elementUI二次分装dialog举例:PageDialog.vue<!-- 页面提示弹框 --><template> <el-dialog :visible.sync="show" class="page-dialog-wrapper" custom-class="page-dialog-component" :width="width" :append-to-body="true"原创 2021-03-23 13:49:03 · 1710 阅读 · 1 评论 -
vue:新窗口打开页面
const routeData = this.$router.resolve(`/pay-type?orderId=${item.orderId}`); window.open(routeData.href, '_blank');原创 2021-03-23 13:32:56 · 399 阅读 · 0 评论 -
js:判断页面显示
在移动端开发中,遇到这样的一个问题,在一个网站跳出到另一个网站,返回的时候需要触发下相关行为,通常情况下在安卓手机中vue的相关声明周期可以实现触发,但是在ios部分浏览器中,跳去另一个网站后回退,并不会触发vue的相关生命周期,ios这类浏览器就像是pc浏览器上面新建一个tab,回退就像是切换tab,所以我添加下面这串代码,监听页面的显示,并搞事情:window.addEventListener('pageshow', function (event) { // 页面显示后处理的东西});.原创 2021-02-23 11:57:02 · 637 阅读 · 0 评论 -
vue: 无法加载文件 C:\Users\xxxxx\AppData\Roaming\npm\vue.ps1,因为在此系统禁止运行脚本
开始-选择windows powerShell-以管理员身份运行输入set-ExecutionPolicy RemoteSigned,在返回结果中选择y或a查看vue-cli版本原创 2021-01-26 14:09:27 · 457 阅读 · 0 评论 -
vue:vue实现H5复制文本到剪切板
安转插件npm install vue-clipboard2 --save全局引入:main.jsimport VueClipboard from 'vue-clipboard2'Vue.use(VueClipboard)使用<div class="paste" v-clipboard:copy="'MHKJ51DFJ263H'" v-clipboard:success="copyCode" v-clipboard:error="copyCodeError">复制券.原创 2020-11-09 19:21:33 · 1123 阅读 · 0 评论 -
ios:苹果手机摇手机提示‘撤销键入’,vue项目
在开发vue移动端项目的时候,ios手机开启了‘摇动以撤销’功能,导致单页面项目在上一个页面input框获取焦点并输入文字后直接后退,此时摇手机处罚‘撤销键入’弹框,而在新页面无input输入框,用户体验性不好。对于为何页面销毁后还会存在input焦点事件,若有大神知道望不吝赐教,谢谢!对此我的解决办法便是,在每一次路由切换前,本页面的input全部blur,注意我并不是在destroyed或者deactivated中处理的,如果这样的话就会写很多的代码。而我是在beforeEach路由导航守卫这里处原创 2020-09-29 09:00:59 · 549 阅读 · 1 评论 -
vue:移动端判断键盘事件,兼容安卓ios
if (!this.$isIos) { // 安卓端 const innerHeight = window.innerHeight; window.addEventListener('resize', () => { const newInnerHeight = window.innerHeight; if (innerHeight > newInnerHeight) { // 键盘弹出事件 ...原创 2020-09-27 12:19:58 · 944 阅读 · 0 评论 -
vue:禁止页面滚动
当某一个标签内滑动时,不希望网页滚动,可在此标签加入此事件@touchmove.prevent原创 2020-09-23 16:01:20 · 6489 阅读 · 4 评论 -
javascript:数字转“万“ 过滤器
// 数字转"万" 过滤器Vue.filter('numberTextFormat', (value) => { if(value !== undefined && value !== null) { if(Number(value) < 10000) { let str = value.toString(); let reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)原创 2020-09-14 17:43:24 · 494 阅读 · 0 评论 -
javascript:数字三位加逗号过滤器
// 数字三位加逗号过滤器Vue.filter('numberFormat', (value) => { if(value !== undefined && value !== null) { let str = value.toString(); let reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g; return str.replace(r原创 2020-09-14 17:42:48 · 414 阅读 · 0 评论 -
vue:自定义组件的v-model使用
一般我们在做自定义组件的时候是使用props和$emit来实现子父组件的数据交互,这样做就需要在父组件里面去定义一个方法来接收子组件的状态改变时触发的事件,使用v-model就不必在父组件里面去监听子组件的方法,父组件可以直接获取到v-model值的改变:子组件中除了定义props以外,新增一个model选项:子组件:<template> <div class='fil...原创 2020-04-21 17:12:26 · 864 阅读 · 0 评论 -
vue:js获取当前电脑的ip
mounted () { this.getUserIP((ip) => { this.ip = ip; console.log(ip); }); }, methods: { // 获取电脑ip getUserIP (onNewIP) { let MyPeerConnection = window...原创 2019-10-17 15:19:14 · 12089 阅读 · 10 评论 -
如何在vue项目中使用md5加密
npm安装:npm install --save js-md51.在需要使用的项目文件中引入:import md5 from 'js-md5';使用:md5('holle') // bcecb35d0a12baad472fbe0392bcc0432.或者在main.js文件中将md5转换成vue原型:import md5 from 'js-md5...原创 2018-05-09 16:21:46 · 131323 阅读 · 11 评论 -
vue:监听页面缓存事件
事情的起因是这样的:项目中需要用到websocket,在网页刚打开的时候,就要进行对话的连接绑定,就我这菜鸟来说,第一次这么搞事情,也是刚接触websocket没多久,这咋整啊?在App.vue中设置了绑定,所有的信息返回都在app.vue组件里面,但是其他组件怎么去获取?而且需要缓存到本地。而当初我还没接触vuex,所以在其他组件里面获取服务器返回的信息只能借助于localStorage,这...原创 2019-04-03 22:26:18 · 4488 阅读 · 0 评论 -
vue:高德地图的使用
1.安装 npm安装:npm install vue-amap --save CDN:<script src="https://unpkg.com/vue-amap/dist/index.js"></script>2.配置main.js:import Vue from 'vue';import VueAMap f...原创 2019-04-04 10:53:10 · 12412 阅读 · 6 评论 -
vue:高德地图ios兼容问题
近期做vue与高德地图的时候发现,在安卓及ios低版本的测试中,定位准确。但是,在ios新版本中定位老是偏差几十米,经过各方搜索,才知道问题出现在新版本的ios上:新版本的ios或者是ios10以上的版本吧,默认定位是ip定位,所以需要设置下参数:noIpLocate: 设置为1 也就是禁止手机设备使用IP定位。plugin: [ { p...原创 2019-04-04 11:01:42 · 1386 阅读 · 2 评论 -
js:图片base64转file
dataURLtoFile (dataurl, filename) { let arr = dataurl.split(','); let mime = arr[0].match(/:(.*?);/)[1]; let bstr = atob(arr[1]); let n = bstr.length; let u8arr = new Ui...转载 2019-04-12 09:10:13 · 2140 阅读 · 0 评论 -
vue:引入外部cdn报错 ‘XXX is not defined’ 及事件处理办法
框架:vue-cli(vue脚手架)例:以cdn引入腾讯防水墙为例前因:在html的head中引入外部cdn链接,在vue文件中直接使用,如图结果:如图报错解决办法:1. 在index.html中的head中引入,2.在webpack.base.conf.js中配置module.exports = { externals: { Tencen...原创 2019-04-30 10:11:10 · 26772 阅读 · 7 评论 -
vue:路由未匹配成功,跳转至其他页面(应用于:404页面,功能未开放页面)
1.所有路由匹配路由的匹配规则是按照书写的顺序执行的,第一条匹配成功则不去匹配下一条,利用这一特性,可以在所有匹配路由的下面拦截匹配所有路由:Vue.use(Router);const router = new Router({ routes: [ { path: '/', name: 'home', redirect: '/home',...原创 2019-04-30 11:10:54 · 5955 阅读 · 1 评论 -
转 · vue-cli3 一直运行 /sockjs-node/info?t= 解决方案
首先sockjs-node是一个JavaScript库,提供跨浏览器JavaScript的API,创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。服务端:sockjs-node(https://github.com/sockjs/sockjs-node)客户端:sockjs-clien(https://github.com/sockjs/sockjs-client)如...转载 2019-10-10 14:51:28 · 205 阅读 · 0 评论 -
vue:调用微信jssdk,配置config在安卓系统下正常,ios系统报错invalid signature
框架:vue问题回顾:制作vue单页面,调用微信语音相关功能,配置config在ios端报错'invalid signature'解决办法:在给后端传当前url获取微信config的时候,要去掉路由#后面的内容,所以取url的方法为location.href.split('#')[0]。补充:由于在ios和android中,location.href在spa页面的机制不同(不同在于io...原创 2019-03-08 11:40:08 · 4049 阅读 · 1 评论 -
vue:本地配置ip地址访问,电脑浏览器可以打开页面,同一局域网的手机打不开页面
我的处理办法:关闭电脑防火墙原创 2020-09-17 09:43:51 · 4192 阅读 · 5 评论 -
vue:使用better-scroll滑动,页面滑出问题解决。
问题回顾:每次进入该页面的时候,上拉到最后就会出现这样的问题(如图):底部都没有数据了,但是依然可以滑动,百思不得其解。但是点击tags标签后,就回复正常。代码分析:1.html<!-- 我的问题(已解答,未解答) --><template> <div class="myQuestion"> <topnav :tit...原创 2019-03-08 11:00:33 · 3758 阅读 · 0 评论 -
vue之better-scroll轮播
想吐槽啊,网上看了那么多文章,写来写去,一大堆,就是一个简单的利用better-scroll来制作的一个轮播效果,搞不明白为啥那么多代码。。。html:<template> <div class="banner-warpper" ref="banner"> <div class="banner-group" ref="bannerGroup" &a原创 2018-05-24 16:55:48 · 1915 阅读 · 0 评论 -
vue路由拦截及页面跳转
路由设置:router/index.jsexport default new Router({ routes: [ { path: '/selfcenter', name: 'selfcenter', meta: { requireAuth: true // 配置此条,进入页面前判断是否需要登陆 }, compo...原创 2018-05-24 13:57:44 · 22530 阅读 · 1 评论 -
vue打包显示空白等相关问题
vue打包:npm run build1.打包后在服务器端打开页面显示空白问题处理:2.字体图标失效,将限制改大,大于字体文件大小:原创 2018-05-25 10:15:50 · 1320 阅读 · 0 评论 -
Vue自定义全局函数
自定义全局函数在main.js里面写:Vue.prototype.$ksort = () => { };原创 2018-05-11 17:44:23 · 1051 阅读 · 0 评论 -
vue+axios跨域访问
使用axios跨域访问的时候浏览器报错:我的代码:1.main.js配置:import axios from 'axios';axios.defaults.timeout = 5000;// 在超时前,所有请求都会等待 5 秒axios.defaults.headers.post['Content-Type']= application/x-www-form-urlencoded;chars...原创 2018-05-11 09:49:54 · 8919 阅读 · 0 评论 -
vue学习之路(一)--vue-cli安装+vue-router+vue-resource
一、Vue-cli:脚手架安装a) 安装nodejs;b) win+r,输入cmd进入命令行工具;c) 安装vue-cli:(-g:全局安装)i. 方法一:npm install vue-cli -g:此方法链接的是国外网站会比较卡;ii. 方法二:安装cnpm,通过淘宝镜像安装:npm install -g cnpm --registry=https://registry.npm.taobao....原创 2017-11-19 02:43:25 · 3370 阅读 · 0 评论 -
vue-cli2.0安装步骤
1.安装node。2.win+r 打开输入cmd运行。3.npm install -g vue-cli (安装vue-cli),建议先安装cnpm:npm install -g cnpm --registry=https://registry.npm.taobao.org,然后用cnpm install -g vue-cli安装,这样速度快点。原创 2017-11-01 22:37:50 · 7021 阅读 · 0 评论 -
Vue之better-scroll
Vue设置better-scroll滚动1. 安装:npm install --save better-scroll或cnpm install --save better-scroll2. 使用:例:<template><div ref=”menu”class="wrapper">//新版vue标记ref <div class="box"><div&g...转载 2017-12-25 16:25:05 · 906 阅读 · 0 评论 -
vue2.0数据请求之axios
1.安装npm install axios --save-dev2.引用:main.jsimport axios from "axios"3.引用之后并不能直接使用axios,需要将他改为VUE的原型属性才能使用Vue.prototype.$axios = axios4.使用created () { this.$axios.get('/api/ratings').then((respons...转载 2017-12-13 09:23:37 · 357 阅读 · 0 评论 -
vue2.0在没有dev-server.js下的本地数据配置
vue2.0删除了build文件夹下面的 dev-client.js和dev-server.js; 然而我们之前在制作项目的时候本地配置的数据都在dev-server.js里面完成,如今本地数据的配置换到了同目录下的webpack.dev.conf.js,具体的配置如下:1.找到 const portfinder = require('portfinder'),在后面添加如下代码:const ...原创 2017-12-12 15:37:34 · 3923 阅读 · 1 评论