u010007013的博客

第一种就是get请求啦，点击按钮的时候执行window.location.href或者window.open就可以自动让浏览器去下载对应地址的文件，具体代码如下：methods: { // 导出文件 exportFile() { const downloadURL = '下载接口 const params = '?请求参数' const requestUrl = downloadURL + params window.location.href = reques

1.在vue中获取dom推荐使用$refs来获取，可是有时会出现 this.$refs.xxx 为undefined的情况。场景1：在created()里使用在这个生命周期中进行数据观测 ，属性和方法的运算，watch 事件回调。但是页面还没有挂载上去，没有el属性，this.el 属性，this.el属性，this.refs无法调用dom。解决办法：换成在mounted()里使用场景2：父元素或当前元素使用了v-if或v-show因为$refs不是响应式的，只在组件渲染完成后才会生效，

先来说说什么是postMessage：postMessage是html5引入的API,postMessage()方法允许来自不同源的脚本采用异步方式进行有效的通信,可以实现跨文本文档,多窗口,跨域消息传递.多用于窗口间数据通信,这也使它成为跨域通信的一种有效的解决方案。场景：今天在vue项目中本来想使用eventBus(中央事件总线)进行组件间通信的。但是发现$emit后，另外一个组件没有收到通知。我检查了一下，发现其中一个组件是被另外一个组件使用iframe嵌套进页面的，而 $emit无法突破ifr

代码如下：defaultImg.js:function install(Vue, options = {}) { /** * 检测图片是否存在 * @param url */ let imageIsExist = function (url) { return new Promise((resolve) => { var img = new Image(); img.onload = function () { if (th

1. props/$emit最常见的方式，父组件通过props的方式向子组件传递数据，子组件通过$emit 提交事件向父组件通信。2. $children/$parent通过$parent和$children就可以访问组件的实例，其中 $children是数组，$parent是对象3. ref/$refsthis.$refs.xxx可以获取组件实例4. eventBus通过中央事件总线的方式，一个组件$emit,另外一个组件$on5. vuex项目复杂采用它6. localStorage

一个vue插件需要对外暴露一个install方法，然后再通过Vue.use()注册它。举个例子：定义一个控制权限访问的auth.js插件： function check(item){ const role = localStorage.getItem('role'); //这里的role是登录时存在storage里的角色类型，例如:"admin" return item.includes(role) } function install(Vue,options){

在vue中，普通 DOM 元素进行底层操作，这时候就可能用到自定义指令。也就是说我们在操作普通DOM的时候有可能会用到自定义指令。自定义指令和自定义组件一样，也是先注册后使用，其注册和组件的注册很类似，也分为全局注册和局部注册。只是注册组件时是使用的component关键字，而注册指令时要使用directive关键字。全局注册使用自定义指令：Vue.directive('mydirective',{ // 钩子函数bind：只调用一次，指令第一次绑定到元素时调用。 // 在这里可以进行一次性的

首先npm安装vue-lottie:npm install vue-lottie -S在需要使用的组件里引用lottie动画的json文件：import * as animationData from '@/assets/json/loading.json'import Lottie from 'vue-lottie/src/lottie.vue'注册到组件里：data(){ ...

在项目中要求点击banner之后滚动到特定的位置。查询了资料后发现了几种方法：1.scrollIntoView() <div ref="wrapper"> <div @click = goAnchor()></div> <ul id="idName" ref="refName"> <li></li&gt...

在开发环境写了很多console.log/info/debug,在生产环境需要去掉这些console。如果手动删除未免也太累了，再说以后想再开发还得重新写console。事实上webpack提供了删除console的插件，在vue-cli3里面是这样用的：首先安装terser-webpack-pluginnpm install terser-webpack-plugin -D然后在vu...

在vue中有时候需要监听子组件的生命周期钩子。可以直接这样写：<template> <Child @hook:mounted="listenToChild"></Child></template><script> methods:{ listenToChild(){ //do something ...

今天在项目中需要使用v-html来输出文本，但是文本中有些内容是需要先过滤一遍的。vue1.x中是可以直接加“|”来使用过滤器，但是在vue2.x中作者移除了这种写法。现在可以使用的写法是：<div v-html="$options.filters.formatTime(text)"></div>过滤器的代码：filters:{ formatTime:fu...

之前写了一篇文章说了$forceUpdate(),链接地址：vue中遇到数据更新但是页面没有更新的情况后来发现有个小Bug：只能修改对应项的状态，不能一次性修改所有相关项的状态。首先看下之前的代码：<template> <div v-for="card in cards" :key="card.id"> <img src="xxx" /> ...

今天在项目中遇到了一个需求，点击改变数据，之后在页面上立即看到更改后的数据。首先，如上图的黄色按钮是通过v-for 循环产生的，data()里只有数据cards:[ … ]，cards的值是通过调用后台接口拿到的。data(){ return { cards:[] }}<div v-for="card in cards" :key="card.id"> ...

今天在项目的一个组件需要向兄弟组件传数据，所以想到了使用eventBus。首先，我先建立了一个eventBus.js，代码如下：import Vue from 'vue'const eventBus = new Vue()export default eventBus然后在需要往外传值的组件中引用eventBus.js：import eventBus from '@/assets/j...

vue项目中onscroll的坑在项目中需要监听一个组件的scroll事件，以触发到底时加载更多。但是实际操作下来发现scroll事件并没有被监听到。通过查询资料得知，监听的目标元素element的scroll事件不冒泡。解决scroll绑定失败的方法是：scroll直接绑定在window的捕获阶段；window.addEventListener(‘scroll’,methodName，...

在vue项目中，如果前一个页面有滚动条的滚动，当路由跳转后发现滚动条的位置还保持在原来的位置，这个就带来了困扰。查询了资料，发现可以在路由的导航守卫afterEach里面添加：window.scrollTo(0,0);这种方法可以在每次路由跳转后手动使滚动条回到头部位置。如图：其实在vue官网中介绍了scrollBehavior方法，同样可以实现路由跳转之后滚动条滚到顶部。https:...

今天在项目中用img标签动态加载图片，img的src属性的值是循环出来的数据当我加载的时候发现图片始终出不来，关键是图片的路径是正确的我在浏览器检查了元素，发现图片没有被压缩处理于是我查询了相关的解决方法，最后发现在js里用require引入图片可以解决这个问题再次加载之后发现图片就被正常的压缩处理了原因是：之前没有使用require的时候，vue并没有把你的路径字符串当做路径...

最近下载了vue-cli3,研究了下vue-cli3下多环境的配置。首先，安装vue-cli3。npm install -g @vue/cli安装好之后的项目是这样的，见下图：相比较vue-cli2的项目，缺少了build和config目录，另外static目录也没了，多了个public目录。配置文件需要自己写一个vue.config.js,可以参考官方文档文档写，网址https:/...

先贴下官方的解释：vue组件的data为什么要是一个函数一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：data: function () { return { count: 0 }}我自己的理解是：JS里面的原型链和原型继承导致必须使用函数而不能使用对象。每个组件相当于是Vue构造函数的一个实例，而data是Vue构造函数...

vuex想要改变state里的属性，官方推荐的方法是通过mutaion的方式修改state。例如：const mutations = { SET_LOGDATA(state, payload) { state.logData = payload; },}

今天在项目中使用了public文件夹里的静态资源，在本地测试没有发现问题，但是项目部署到fat服务器却报了404错误。我发现原因在于我的项目没有部署在域名的根部，而我引用public文件是通过绝对路径方式引用的，因为就出现了路径错误。路径如下：<img :src="`/image1.png`">在官网文档中发现这种情况需要为 URL 配置 publicPath 前缀：proc...

有些情况下，我们在子组件使用$emit传出参数后，如果父组件在接收的时候添加了自定义参数，就无法再接收到子组件传出的参数了。有办法可以解决这个问题，既能拿到子组件传过来的参数，又能在父组件自定义调用函数时传入的参数。1.子组件只传一个参数时：//父组件<Item @handle="handle($event,parentParam)"/>//子组件this.$emit("...

当我们在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时，该资源将会被包含进入 webpack 的依赖图中。在其编译过程中，所有诸如 <img src="...">、background: url(...) 和 CSS @import 的资源 URL 都会被解析为一个模块依赖。在其内部，vue 通过 file-loader...