w晚风-CSDN博客

原创 Vue导航守卫beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave详解

Vue导航守卫以我自己的理解就是监听页面进入，修改，和离开的功能。每个守卫接受三个参数进入路由时调用 beforeRouteEnter(to,from,next){ //此时不能获取组件实例 this //因为的当前守卫执行前，组件实例还没被创建 next();// 必须有这个，相当于一个按钮开启一样。}在当前路由改变，但是该组件被复用时调用 beforeRouteUpdate(to,from,next){ //此时不能获取组件实例 this //因为的当前守卫执行前，组件实

2020-11-12 13:57:25 469

原创不同页面设置body背景颜色

由于SPA页面的特性，传统的设置 body 背景色的方法并不通用。解决方案：利用组件内的路由实现第一种方式// 实例创建之前beforeCreate(){ document.querySelector('body').setAttribute('style','background: #FFFFFF');},//页面销毁之前执行beforeDestroy(){ document.querySelector('body').removeAttribute('style');}第二种方式

2020-11-12 13:56:38 850

原创 vue 性能优化(图片懒加载)

Vue项目中实现图片懒加载对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验。实现方法(使用vue的vue-lazyload插件)1.安装插件npm install vue-lazyload --save-dev2.在入口文件main.js中引入并使用import VueLazyload from 'vue-lazyload'直接使用Vue.us

2020-11-12 13:56:00 601

原创 Vue利用keep-alive实现页面缓存

keep-alive是vue内置的一个组件，可以使被它包含的组件处于保留状态，或避免被重新渲染。<div> <keep-alive> <router-view></router-view> </keep-alive></div>接下来让我们来结合router缓存部分页面在App.vue中的设置<template> &.

2020-11-12 13:53:43 127

原创 vue生命周期函数

beforeCreate第一个生命周期函数，表示实例完全被创建出来之前，会执行它注意：在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的属性与方法定义都还没有没初始化created第二个生命周期函数，在 created 中，data 和 methods 都已经被初始化好了！如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作beforeMount第三个生命周期函数，表示模板已经在内存中编辑完成了，但

2020-11-12 13:52:40 97 1

原创 vue动态监听页面滚动高度

// 获取页面滚动高度methods:{ scrollHandle(e){ let top = e.srcElement.scrollingElement.scrollTop; // 获取页面滚动高度 console.log(top); }}mounted(){ window.addEventListener('scroll',this.scrollHandle);//绑定页面滚动事件 },...

2020-11-12 13:50:55 1191 1

原创 vue 单页面如何设置网页title

vue单页面应用里，使我们无法去如往常方式一样的去更改页面标题百度了下，推荐使用vue-wechat-title插件，蛮好用的第一步下载安装插件依赖npm install vue-wechat-title --save第二步在main.js中引入插件import VueWechatTitle from 'vue-wechat-title'Vue.use(VueWechatTitle)第三步在路由文件 index.js中给每个路由添加titleroutes: [{ path

2020-11-12 13:50:05 382

原创 vue中，点击button按钮后，页面上的input框再次自动获取焦点

如果想在DOM状态更新后做点什么，则需要用到nextTick。在vue生命周期的created()钩子函数进行的DOM操作要放在Vue.nextTick()的回调函数中，因为created()钩子函数执行的时候DOM并未进行任何渲染，而此时进行DOM操作是徒劳的，所以此处一定要将DOM操作的JS代码放进Vue.nextTick()的回调函数中。this.$nextTick( () =>{ this.$refs.gain.focus()} )...

2020-11-12 13:47:26 652

原创 vue父子传值小demo

子传父<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app">

2020-11-12 11:55:47 104

原创 vue路由传参的基本方式

项目中很多情况下都需要进行路由之间的传值，想过很多种方式sessionstorage/localstorage/cookie 进行离线缓存存储也可以，用vuex也可以，不过有些大材小用吧，不管怎么说因场景而异下面我来说下vue自带的路由传参的三种基本方式先有如下场景点击当前页的某个按钮跳转到另外一个页面去，并将某个值带过去<div class="examine" @click="insurance(2)">查看详情</div>第一种方法页面刷新数据不会丢失

2020-11-12 11:53:22 90

m0_52469153的博客