一、视图无实时刷新问题

解决方案:

this.$nextTick(function(){

     //  需要改变的数据
})

二、在webAPP时单位的换算

window.onresize = function () {
    ​​​​document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 +"px";
}

注意:若UI的设计图为750px,此时,在以下情况中,根据给定或测得的数据大小/100,即设置的大小。

三、在开发环境下,使用axios进行数据交互时,遇到跨域问题

问题报错:No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

解决方案:

1.首先在main.js配置如下代码

Vue.prototype.$axios = Axios
Axios.defaults.baseURL = '/api'
Axios.defaults.headers.post['Content-Type'] = 'application/json';

2.其次在index.js 中的proxyTable配置如下代码

 proxyTable: {
      '/api':{
        target: "http://xxxx/",
        secure: false,
        changeOrigin:true,
        pathRewrite:{
            '^/api':''
        }
      }
    },

3.然后把axios请求改成

var _this=this;
 _this.$axios.get("/api/js/shopData.json").then(res=>{
       console.log(res.data)
})

如图所示:

四、vue项目真机测试

1)有时候我们在vue真机测试的时候,希望通过IP地址第访问页面。
2)比如:192.168.1.105:8080 但是发现打不开,无法访问
3)这是因为前段项目是通过webpack-dev-server启动的。而它默认不支持通过ip地址访问。这时候就需要对package.json中的配置项做修改。
4)然后我们就可以通过手机输入IP地址来测试项目了。

解决方案:

五、安卓手机上真机测试白屏的问题

问题原因:主要是因为有些安卓手机浏览器不支持promise,可以引入一个插件来解决。

解决方案:

cnpm install babel-polyfill --save

在main.js里面引入
import ‘babel-polyfill’

六、解绑全局事件问题

解决方案:

mounted() {  
      window.addEventListener('scroll', this.handleScroll)
    },
unmounted() {
      // 解绑全局事件,否则会在所有页面都触发这个事件,这就需要解绑。
      window.removeEventListener('scroll', this.handleScroll)
    }

七、vuex的流程图

八、Axios请求 的函数封装问题

//  get封装

	Vue.prototype.post = function (url,data,fun,headers){	
	  			this.$axios.post(url,data,{headers:headers})
	             .then(function (response) {
	                if(fun){ 
	                  fun(response.data);
	                }
	            })
	            .catch(function (error) {
	            	// alert(error)
	            });
	}

//  post封装
 
	Vue.prototype.get = function (url,data,fun,headers){ 
    	this.$axios.defaults.withCredentials = true 
	  	this.$axios.get(url,{headers:headers,params: data})
	             .then(function (response) {
	                if(fun){
	                  fun(response.data);
	                }
	            })
	            .catch(function (error) {
	            	// alert(error);
	            });
	}

九、打包之后页面空白的问题

解决方案:

assetsPublicPath: './',

十、app.js的体积过大分割项目,实现懒加载

const Home = r => require.ensure([], () => r(require('@/pages/Home')), 'home') 

十一、在使用vue.js框架的时候,有时候会希望在页面渲染完成之后,再来执行某个函数方法

解决方案:

watch:{
    // 监测路由的变化,只要发生变化就调用获取路由参数方法将数据存储本组件即可;
    'Sroute':'getParams',
    headImgList:function(){
        this.$nextTick(function(){
            // do  somthing 
        })
    }
}

headImgList 是我要监听的列表数组,当他全部加载结束之后再执行某任务;

十二、在微信中分享网站,如何在地址栏中截取内容,并且重定向页面,重新添加新获取的内容

if(/MicroMessenger/.test(window.navigator.userAgent)){ 
    var openId = this.getUrlKey("openid"); 
     if(openId==undefined || openId=="" || openId==null){  
          openId = this.getStorage(this.Storage.WX_openId);
          if(openId==undefined || openId=="" || openId==null){   
                this.saveStorage("lastURI",location.href);   
                location.href="http://你的微信域名地址/wx/load?redirectURL="+this.baseURL+"?token=413445f4545";
                return;                  
          } 
    }else{
         this.saveWxUserStorage(openId);   
         var lastURI = this.getStorage("lastURI");
         if(lastURI==undefined || lastURI==""){
             lastURI = this.baseURL;
         } 
         location.href=lastURI; 
    }           
}else{ 
     this.clearStorage(this.Storage.WX_openId);
} 

十三、异步回调函数中使用this无法指向vue实例对象

场景:setTimeout/setInterval ajax Promise等等

解决方案:

  //箭头函数访问this实例 因为箭头函数本身没有绑定this
     setTimeout(() => { 
       console.log(this);
    }, 500);


    //使用变量访问this实例
    let self=this;
        setTimeout(function () {  
          console.log(self);//使用self变量访问this实例
        },1000);


说明:setInterval路由跳转继续运行并没有及时进行销毁

十四、setInterval路由跳转继续运行并没有及时进行销毁

使用场景:比如一些弹幕,走马灯文字,这类需要定时调用的,路由跳转之后,因为组件已经销毁了,但是setInterval还没有销毁,还在继续后台调用,控制台会不断报错,如果运算量大的话,无法及时清除,会导致严重的页面卡顿。

解决方案:在组件生命周期beforeDestroy停止setInterval

//组件销毁前执行的钩子函数,跟其他生命周期钩子函数的用法相同。
beforeDestroy(){
     //我通常是把setInterval()定时器赋值给this实例,然后就可以像下面这么停止。
    clearInterval(this.intervalId);
}

十五、vue 滚动行为用法,进入路由需要滚动到浏览器底部 头部等等

使用场景:使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。

解决方案:

 const router = new VueRouter({
     mode: 'history',
     scrollBehavior(to, from, savedPosition) {
         if (savedPosition) { //如果savedPosition存在,滚动条会自动跳到记录的值的地方
             return savedPosition
         } else {
             return {
                 x: 0,
                 y: 0
             } //savedPosition也是一个记录x轴和y轴位置的对象
         }
     },
     routes: [...]
 })

注意: 这个功能只在支持 history.pushState 的浏览器中可用。

十六、使用better-scroll插件实现滚动时点击失效问题

解决方案:

this.scroll = new Bscroll(this.$refs.wrapper,{click:true})

十七、IE9中,elementUI的el-input删除操作无法触发数据变动监听

解决方案:加入ie9input事件垫片

cnpm install --save ie9-oninput-polyfill

十八、Vue框架里使用Swiper

1.下载swiper

npm install swiper

2.引入swiper

import Swiper from ‘swiper’;
import ‘swiper/dist/css/swiper.min.css’;

3.使用swiper


<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="../../static/images/ad1.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="../../static/images/ad2.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="../../static/images/ad3.jpg" alt="">
      </div>
    </div>
  </div>

4.调用方式:mounted里面调用

   mounted(){
       var mySwiper = new Swiper('.swiper-container', {
         autoplay:true,
         loop:true
       })
     },

注意:如果想要从后台请求图片放上去 new Swiper要写在网络请求成功的函数里面,否则不会出来数据。

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐