qq_43248623的博客

vue中this.$nextTick()的用法

Ant Design Vue 限制数字输入框只能输入大于等于0的整数

Visual Studio Code超级装逼编辑自带火花插件Power Mode

vuex-persistedstate

vue监听浏览器原生返回按钮，进行路由转跳

vue elementui 实现图片上传后拖拽排序功能

Div+CSS展示物流跟踪轨迹信息

elementUI的DatePicker+DateTimePicker组件的自定义日期禁用

前端框架Vue——vue-i18n ，vue项目中如何实现国际化，$t的用法vue中html页面写入$t(‘’)怎么显示

vue移动端的一款音频插件vue-aplayer

vue移动端的一款音频插件vue-aplayer

vue音视频播放器 vue-hls-player

Vue Video.js播放m3u8视频流格式（video+videojs-contrib-hl）videojs中文文档详解

JS事件-鼠标滚轮事件vue 监听滚轮滚动事件

我们使用element-ui、vue开发网站的时候，往往图标是起着很重要的作用。1.傻瓜式引用：由于这种方法及其简单 省去了很多繁琐的步骤，a.引入项目生成的，图标地址。b.使用推荐使用这种，详情请看文档！！文档够详细的了。http://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code2.笨拙式引用：准备工作1.先注册，再登录、找到图标管理、我的项目2.点紫色的

在vue.config.js中添加下面的代码即可// vue-cli version > 3modeule.exports = { configureWebpack: config => { if (process.env.NODE_ENV === "production") { config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true

vue中watch不触发、不生效的解决办法及原理Vue watch监听路由不生效，没反应watch的immediate使用

1、lazyv-model 在每次 input 事件触发后将输入框的值与数据进行同步,也就是在失去焦点或者按下回车键时才更新<template> <div> <p>.lazy修饰符</p> <input type="text" v-model.lazy="val"> <p>{{ val }}</p> </div></template&gt

组件的属性有：to 、replace、 append、 tag、 active-class、 exact 、 event、 exact-active-classto（必选参数）：类型string/location表示目标路由的链接，该值可以是一个字符串，也可以是动态绑定的描述目标位置的对象<!-- 字符串 --><router-link to="home">Home</router-link><!-- 渲染结果 --><a href="ho

1.前言：不是正经的前端，所以很多东西无法注意和知道，就知道一点记录一点好了。2.之前想修改mint-ui的样式，但是官方文档丝毫未提及（也许前端人员都知道如何修改???）,后面通过两种方式可以进行mint-ui的样式修改，这两种方式都是通用的，不限于mint-ui.3.方式一：使用Chrome开发者工具查看css的使用，找到class的名字，然后就可以使用了？？？4.方式二：mint-ui的组件直接当成普通html组件使用，样式该加就加，然后加个！important标记，覆盖掉原来的样式。----

尝鲜使用vue-cli 3.0.0-beta.6，很容易就可以完成scss到vue项目中。vue-cli 3提供了两种方式集成sass/scss：创建项目是选择预处理器sass手动安装sass-loader创建项目选择预处理器sass$ vue create vuedemo? Please pick a preset: (Use arrow keys)default (babel, eslint)Manually select features移动上下键选择“Manually selec

首先baseURL只有一个的情况：先安装一下axios: npm install axios --saverequest.jsimport axios from 'axios'export function request(config){ //1.创建axios的实例 const instance = axios.create({ baseURL:'http://152.136.185.210:8000/api/n3' }) //发送真正的网络请求

上问题： 下面选项中后台给的value 有 number和 string 两种导致无法验证解决方案 rules: [, { type: "string", required: true, message: '编码项目至少一项', trigger: 'change', transform(value) {

在基于 Element-ui 写项目的时候，Chrome 提醒：[Violation] Added non-passive event listener to a scroll-blocking ‘mousewheel’ event. Consider marking event handler as ‘passive’ to make the page more responsive.翻译过来如下：违反：没有添加被动事件监听器来阻止’touchstart’事件，请考虑添加事件管理者’passive’

element-ui 侧边栏默认要全部展开怎么做？element-ui文档中是这么写的default-openeds 当前打开的sub-menu的key数组给标签加上这个属性<el-menu class="el-menu-vertical" @open="handleOpen" @close="handleClose" theme="dark" :default-openeds="openeds">openeds需要在data里面定义一下openeds是一个数组（当前打开的sub-

可以使用：vue-router的beforeRouterEnter钩子其实也就是一个路由守卫<script>export default { data() { return { fromPath: "", }; }, beforeRouteEnter(to, from, next) { next((vm) => { // 通过 `vm` 访问组件实例,将值传入fromPath vm.fromPath = fro

在 vue.config.js 中添加配置：// 修改或新增html-webpack-plugin的值，在index.html里面能读取htmlWebpackPlugin.options.title chainWebpack: config =>{ config.plugin('html').tap(args => { args[0].title = '你想要设置的title'; return args;

<template> <div class="wrapper"> <div>21221</div> <div v-on:mouseover="stop()" v-on:mouseout="move()" class="swiper"> <transition-group tag="ul" name="image"> <li v-for="(items, index) in list"

一. 若已全局安装vue-cli (1.x 或 2.x)，需先卸载npm uninstall vue-cli -g 二. 全局安装 vue-cli3.0npm install -g @vue/cli三. node版本要求 Node >=8.9,可以使用 nvm 管理多个 Node 版本。1. 安装nvm2. 安装node–> nvm install 版本号 window系统位数3. 显示所有安装的版本 nvm ls4. 切换node版本 nvm use 版本号四.创

data(){ return { handler: function(e) { e.preventDefault(); }, //阻止body滑动 }},methods: { closeTouch: function() { document .getElementsByTagName("body")[0] .addEventListener("touchmove", this.handler, { passive

使用crypto-js加解密第一步，安装npm install crypto-js第二步，在你需要的vue组件内importimport CryptoJS from “crypto-js”;第三步，使用 // Encrypt 加密 var cipherText = CryptoJS.AES.encrypt( "my message", "secretkey123" ).toString(); console.log(cipherT

如何通过点击的方式控制当前页返回到上一个路由页面：1.在当前页面添加返回按钮<div style="text-align: center"> <el-button v-on:click="backHistory">取消</el-button></div>2.在方法体内写back方法实现点击返回上一页操作methods:{ backHistory(){ this.$router.go(-1);//返回上一层 },},总结：

<template> <div class="page-search"> <mt-search autofocus v-model="value" placeholder="搜索"> </mt-search> <mt-cell v-for="item of filterResult" :key="item" :title="item" @click.native="select(item

路由跳转前做一些验证，比如登录验证（未登录去登录页），是网站中的普遍需求。对此，vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫（navigation-guards）。导航守卫（navigation-guards）这个名字，听起来怪怪的，但既然官方文档是这样翻译的，就姑且这么叫吧。贴上文档地址：https://router.vuejs.org/zh-cn/advanced/navigation-guards.html先来摘抄一段文档中beforeRouteUpda

Vue 中使用watch监听$route失效问题！今天在项目操作中发现一个问题，在watch里面监听$route变化，发现并没有监听到，查阅了一些资料最终解决，现写出与大家共同分享，也忘出现此问题的同学也能顺利解决路由词典：{ name: 'secondUser ', component: secondUser, path: '/secondUser',}----------------------------------------------------

VUE3中，网页图标默认使用的是VUE自带的一个ico的图标，也是VUE的logo。那么作为我们自己开发的项目，如何自定义修改网页的图标和标题呢？很简单，下面就介绍一下。1 标题修改标题修改直接在项目的 /public/index.html中修改title标签即可。 <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <

gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。webpack在打包时可以借助 compression webpack plugin 实现gzip压缩，首先需要安装该插件：npm i -D compression-webpack-plugin在vue cli3.0 生成的项目里，可在 vue.config.js 中按照如下方式进行配置：压缩前后大小大致如下：一般浏览器都已支持.gz的资

效果图:效果图:

总：通过axios，vuex，及自定义的方法实现。以下是思路：1.做token刷新必不可少的是，token（请求时的token） / refresh_token（刷新token时用的refresh_token） / resetTime（token有效时间）2.通过axios请求-回复来做相应的操作，具体实现如下：对应修改之处：（自己看的，如果疑问，可留言）一、在 main.js中 ，写入如下代码import axios from 'axios'import { getRefreshToken,

以token处理登录的web系统，一般会有两个token：access-token和refresh-token。node.js中，一般用jsonwebtoken这个模块。access-token，是用户输入登录的账号密码，后台去db验证然后颁发的，它一般记录在浏览器的cookie中，并在浏览器关闭时自动删除，页面访问或ajax访问会自动通过cookie传回到后台，后台直接内存中校验，不用访问db，所以效率高；为了在access-token泄漏后及时止损，一般access-token会设置一个有效期，如1