xqhys的博客

返回上一级页面时刷新页面

基本使用Promise(resolve,reject)

输入框Input输入限制

vue<template> <div> <video controls style="display: none;"></video> </div></template>js // 文件上传成功时的钩子 handleUploadSuccess(response, file, fileList) { this.findVideoCover(file.url) },

const paras = { key: file.attachKey, name: file.attachName } axios.post(this.downAction, paras, { responseType: 'blob' }).then(response => { if (window.navigator.msSaveBlob) { // IE以及IE内核的浏览器 try { window.navigator.msSaveBlob(response.data, ..

前言对于watch的使用大家都还是比较熟悉的，我们平时使用的比较多的就是watch一个变量，偶尔还是使用deep：true来监听对象，但是immediate的使用就相对比较少，之前有遇到过这个属性，而且也查找过资料，但是一直都是有点懵懵的，要深刻去理解他，我们还是主要是从它的作用，需要在那种情境下使用它首先我们理解下watch的使用首先确认 watch是一个对象，一定要当成对象来用。对象就有键，有值。键：就是你要监控的那个家伙，比如说$route，这个就是要监控路由的变化。或者是dat

axios.post('path', {key: ''}, { responseType: 'blob' //指定返回数据的格式为blob}).then(response => { console.log(response);//把response打出来，看下图 let url = window.URL.createObjectURL(response.data); console.log(url) var a = document.createEl...

Vue页面template<template> <div> <canvas style="width: 80%!important;height: auto!important;" id="canvas"></canvas> <br/>{{charId}} </div></template>Vue页面js<script>expo..

1. <router-link>标签实现新窗口打开：官方文档中说v-link指令已经被一个新的<router-link> 组件指令替代，这一部分的工作已经被 Vue 2 中的组件完成。注意：<router-link>不支持target="_blank"，如果你想打开一个新标签页，你必须用<a>标签。但事实上vue2版本的 <router-link> 是支持 target="_blank" 属性的(tag="a")，如下：...

1、安装依赖npm i webpack-merge2、引入import merge from 'webpack-merge'3、引用this.$router.push({ //修改原有参数id query:merge(this.$route.query,{'id':'23233'})}) this.$router.push({ //新增一个参数teamName query:merge(this.$route.query,{'teamName':'新

判断是否是数字的正则表达式var numReg = /^[0-9]*$/var numRe = new RegExp(numReg)if (!numRe.test(number)) {this.$message({type: 'warning',message: '请输入数字 ',duration: 10000,showClose: true,})return false}在判断一个字符串数字之前，首先要分析这个字符串数字可能出现的情况1、首位可能有符号

在学习vue自定义事件的.sync修饰符实现改变数值时发现一个问题如下由于props的大小写命名:fatherNum,对应不同的$emit()会有不同的效果，具体如下：使用.sync修饰符,即 // this.$emit('update:father-num',100); //无效 this.$emit('update:fatherNum',100); //有效 //...... <father v-bind:father-num.sync="test"&g.

Vue项目打包命令：npm run build:prod等编译后的文件会出现在项目中的“dist”文件夹中。就这么简单

问题描述：在使用Vue框架开发时，在函数中改变了页面中的某个值，在函数中查看是修改成功了，但在页面中没有及时刷新改变后的值；解决：运用 this.$forceUpdate(); //强制刷新，解决页面不会重新渲染的问题例： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 .

Scoped CSS规范是Web组件产生不污染其他组件，也不被其他组件污染的CSS规范。　　vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素，它是通过使用PostCSS来改变以下内容实现的：<style scoped>.example { color: red;}</style><template> <div class="example">hi</div>&lt.

vue集合离线百度地图vue.js百度地图api离线发布于 1月9日一、需求场景所谓离线，大概都是项目在内网中使用，无法连接外网，所以需要开发离线地图功能。在看以下步骤前，先提示这个vue项目是vue-cli生成的二、开发步骤1、通过API下载百度接口JS访问此链接打开会看到以下内容在代码中找到src=http://api.map.baidu.com/getscript?v=3.0&ak=biuHZmoAow03mjwThwt8f2whaf4mVdHf&am

当访问url需要带有权限才可以访问时(如需携带token),可以先使用axios下载下来,然后通过URL.createObjectURL()转化为url赋值给imgasync getBarcode(row) { const { data: result } = await this.$axio.get( "book/barcode?id="+row.id, { //设定接收类型为blob,头部什么的自行添加 r.

Vue导航守卫以我自己的理解就是监听页面进入，修改，和离开的功能。每个守卫接受三个参数to: Route: 即将要进入的目标路由对象 from: Route: 当前导航正要离开的路由 next: Function: 一定要调用该方法来resolve这个钩子。执行效果依赖next方法的调用参数。next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是conf...

如何使用点击方式控制当前页返回到上一个路由页面：查阅相关资料，返回上一目录用到的是 this.$router.go(-1); 将该方法些到返回按钮上，点击触发该方法；具体代码如下:1.在当前页面添加返回按钮<!--返回按钮--><div class="backTo" v-show="isShow"> <span v-on:click="...

以前做遮罩层都是写最小高度来占满屏，但是总会出现问题，也没改变，今天一个人在交流群上问这个时，看到一个回答解决了我这一个bug，学到了，现在记录一下样式。<div class='popContainer'></div>div.popContainer{ position: fixed; top: 0; left: 0; right: ...

UI组件element- 饿了么出品的Vue2的web UI工具套件Vux- 基于Vue和WeUI的组件库mint-ui- Vue 2的移动UI元素iview- 基于 Vuejs 的开源 UI 组件库Keen-UI- 轻量级的基本UI组件合集vue-material- 通过Vue Material和Vue 2建立精美的app应用muse-ui- 三端样式一致的响应式 U...

首先我们要明白一个前提，CommonJS模块规范和ES6模块规范完全是两种不同的概念。CommonJS模块规范Node应用由模块组成，采用CommonJS模块规范。根据这个规范，每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的expo...

项目中原本使用的富文本编辑器是wangEditor，这是一个很轻量、简洁编辑器但是公司的业务升级，想要一个功能更全面的编辑器，我找了好久，目前常见的编辑器有这些：UEditor：百度前端的开源项目，功能强大，基于 jQuery，但已经没有再维护，而且限定了后端代码，修改起来比较费劲bootstrap-wysiwyg：微型，易用，小而美，只是 Bootstrap + jQuery......

可能大家都会遇到数据更新要求滚动条置底到最新信息的需求，今天做一个功能需求，话不多说直接上代码：在methods里我们用一个sendLy方法控制它触发：各位可以操作试试，希望对大家有帮助。...

在开发过程中经常遇到的一个场景，就是，页面弹窗，弹窗上有一个确定或者关闭按钮,这时，如果下方有一个按钮，那你点击弹窗的时候，也会触发弹窗下层的按钮事件，vue提供的解决方法就是直接在click.stop//阻止单击事件继续传播<a v-on:click.stop="doThis"></a>js的解决办法是，直接在事件的方法中添加event.stopProp...

转载：https://www.cnblogs.com/lijuntao/p/7777581.html懒加载：----------------------------------------------------？　　　　也叫延迟加载，即在需要的时候进行加载，随用随载。为什么需要懒加载？　　　　像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，...

1、html<div ref="getheight"></div> <br><br>2、JavaScript// 获取高度值 （内容高+padding+边框）letheight=this.$refs.getheight.offsetHeight;// 获取元素样式值 （存在单位）letheight = window....

由于在项目中需要对数据进行可视化处理，也就是用图表展示，众所周知echarts是非常强大的插件。一开始想在网上找一个基于vue封装好的（懒省事），eg:vue-echarts ，但是拉取下来发现，跟项目中使用的类型有点偏差，而且他们的数据大多都是定制好的，我很难在此基础上进行更改（惹不起），于是选择了放弃，最终还是选择echarts。以下是我使用的一些心得体会~我的示例是在vue-cli搭建...

转载：https://blog.youkuaiyun.com/wuqiongqiong_/article/details/77073030尽管子组件可以用this.$parent访问它的父组件及其父链上任意的实例，不过子组件应当避免直接依赖父组件的数据，尽量显式地使用props 传递数据。另外，在子组件中修改父组件的状态是非常糟糕的做法，因为：这让父组件与子组件紧密地耦合； 只看父组件，很难理...

转载：https://blog.youkuaiyun.com/c2311156c/article/details/80415633两者在使用效果上没有任何区别，都是为了将实例化后的vue挂载到指定的dom元素中。如果在实例化vue的时候指定el，则该vue将会渲染在此el对应的dom中，反之，若没有指定el，则vue实例会处于一种“未挂载”的状态，此时可以通过$mount来手动执行挂载。注：如果$...

转载：https://www.cnblogs.com/toonezhr/p/10325457.html1、路由传值 this.$router.push()（1） 想要导航到不同的URL，使用router.push()方法，这个方法会向history栈添加一个新纪录，所以，当用户点击浏览器后退按钮时，会回到之前的URL（2）当点击 <router-link> 时，这个方法...

转载：https://www.jianshu.com/p/a7550c0e164fVue中的nextTick涉及到Vue中DOM的异步更新，感觉很有意思，特意了解了一下。其中关于nextTick的源码涉及到不少知识，很多不太理解，暂且根据自己的一些感悟介绍下nextTick。一、示例先来一个示例了解下关于Vue中的DOM更新以及nextTick的作用。模板<div ...

转载：https://www.jb51.net/article/138831.htm一般来讲，获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。然后在javascript里面这样调用...

转载：https://blog.youkuaiyun.com/qq_35585701/article/details/81216704vue有8种生命周期函数：钩子函数 触发的行为 在此阶段可以做的事情 eforeCreadted vue实例的挂载元素$el和数据对象data都为undefined，还未初始化 加loading事件 created ...

转载：https://www.cnblogs.com/sorrowx/p/7932242.html先从github上下载或者clone一个vue分支项目https://github.com/vuejs/vue查看下目录结果先列出一些目录Vue|— build 打包相关的配置文件，其中最重要的是config.js。主要是根据不同的入口，打包为不同的文件。...

转载：https://segmentfault.com/a/1190000012296163我们先来看一个简单的事例首先我使用官方脚手架新建一个项目vue init webpack vue-demo然后我创建两个文件index.js plugins.js.我将这两个文件放置在src/classes/vue-use目录下接下来对这两个文件进行编写// 文件: src/class...

转载：https://blog.youkuaiyun.com/yanzhi_2016/article/details/85339420注册全局组件。使用Vue.component()方法注册全局组件。第一个参数是自定义元素名称，也就是将来在别的组件中使用这个组件的标签名称。第二个参数是将要注册的Vue组件。import Vue from 'vue';// 引入loading组件impor...

转载：https://blog.youkuaiyun.com/fungleo/article/details/53171052Vue2+VueRouter2+webpack 构建项目实战（一）准备工作2017年8月补充2016年，我写了一系列的 VUE 入门教程，当时写这一系列博文的时候，我也只是一个菜鸟，甚至在写的过程中关闭了代码审查，否则通不过校验。本来写这一系列的博文只是为了给自己看的，但没...

转载：https://blog.youkuaiyun.com/zgpeterliu/article/details/80102837vue+webpack解决css引用图片打包后找不到资源文件的问题使用vue打包，通过css引用图片资源。[css]view plaincopy.img{height:500px;width:100%;backgro...

转载：https://www.zhi-jie.net/vue2-study-vue-router-navigation-hook/当我们在创建一个带有登录的功能的时候就会用到 vue-router 导航钩子，所以这章我们就来熟悉 vue-router 导航钩子我先来贴一个登录的钩子实例 // 组件import Vue from "vue";import Router fro...