vue
思楠早睡了嘛
这个作者很懒,什么都没留下…
展开
-
懒加载和预加载
1、懒加载1.什么是懒加载?懒加载也就是延迟加载。当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次,俗称占位图),只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来。这就是图片懒加载。2.为什么要使用懒加载?很多页面,内容很丰富,页面很长,图片较多。比如说各种商城页面。这些页面图片数量多,而且比较大,少说百来K,多则上兆。要是页面载入就一次性加载完毕。估计大家都会等到黄花变成黄花菜了。3.懒加载的原理是原创 2020-06-21 19:21:20 · 190 阅读 · 0 评论 -
vuex数据持久化
vuex结合localStorage实现状态持久化1 . 安装npm install vuex-persistedstate2 . 在store.js里import createPersistedState from 'vuex-persistedstate'const state = { user:{},}export default new Vuex.Store({ state, getters, actions, mutations, p原创 2020-06-21 01:09:37 · 131 阅读 · 0 评论 -
keep-alive
keep-alive是什么?keep-alive 标签:是Vue的内置组件,能在组件切换过程中将状态保留在内存中,取消组件的销毁函数,防止重复渲染DOM。当用它包裹 时,会缓存不活动的组件实例,而不是销毁它们。和 相似,它自身不会渲染一个 DOM 元素。使用 组件后即可使用 activated() 和 deactivated() 这两个生命周期函数应用场景?例如我们将某个列表类组件内容滑动到第100条位置,那么我们在切换到一个组件后再次切换回到该组件,该组件的位置状态依旧会保持在第100原创 2020-06-19 21:18:21 · 147 阅读 · 0 评论 -
slot
1 、slot 基本用法插槽指允许将自定义的组件像普通标签一样插入内容import Vue from 'vue'// 定义组件componentOne const compoentOne = { template: ` <div :style="style1"> <slot></slot> // 定义插槽 </div> `, data () { return原创 2020-06-18 20:04:01 · 138 阅读 · 0 评论 -
Vue项目中用户登录及token验证
在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下:1、第一次登录的时候,前端调后端的登陆接口,发送用户名和密码2、后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token3、前端拿到token,将token存储到localStorage和vuex中,并跳转路由页面4、前端每次跳转路由,就判断 localStroage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面5、每次调后端接口,都要在请求头中加token6、后端判断请求头中有无token,原创 2020-06-17 10:18:29 · 270 阅读 · 0 评论 -
async、await
1.asayc的用法,它作为一个关键字放到函数前面,这样普通函数就变为了异步函数2.异步async函数调用,跟普通函数的使用方式一样3.异步async函数返回一个promise对象4.async函数配合await关键字使用(阻塞代码往下执行)是异步方法,但是阻塞式的使用场景async主要来处理异步的操作,需求:执行第一步,将执行第一步的结果返回给第二步使用。在ajax中先拿到一个接口的返回数据,后使用第一部返回的数据执行第二步操作的接口调用,达到异步操作。模拟出一个摇色子的异步操作,先通过一原创 2020-06-15 23:43:21 · 130 阅读 · 0 评论 -
Promise理解以及封装ajax
Promise面试官可能会问:Promise你怎么理解的,在项目中用过没有 1.Promise是一种为了避免回调地狱的异步解决方案 2.Promise是一种状态机: pending(进行中)、fulfilled(已成功)和rejected(已失败) 只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。 3.Promise暴露的API## .then(函数1,函数2)函数1:表示成功返回函数2:代表失败返回## .c原创 2020-06-12 00:02:28 · 152 阅读 · 0 评论 -
call apply、bind区别
apply、call和bind的区别相同点:1.都是用来改变函数的this对象的指向的。2.第一个参数都是this要指向的对象。3.都可以利用后续参数传参。区别:1.fn.call(obj, arg1, arg2, …),调用一个函数, 第一个参数为要改变的this,第二个参数为要传递的参数,参数与方法中是一一对应的。2.fn.apply(obj, [argsArray]),第一个参数为要改变的this,第二个参数为要传递的参数作为一个数组(或类数组对象)提供的参数3.bind 和call/原创 2020-05-27 20:47:10 · 153 阅读 · 1 评论 -
vue better-scroll插件完成上拉加载更多
一、下载 better-scrollnpm install better-scroll -S二、组件中引入<template> <div class="rules"> <p class="drop-down" v-if="dropDown">松手刷新数据...</p> <div class="bscroll" ref="bscroll"> <div class="bscr转载 2020-05-27 19:44:19 · 195 阅读 · 0 评论 -
axios数据封装
安装axiosnpm i axios -Saxios官方github仓库地址:https://github.com/axios/axio创建个http文件夹创建个request.js用来创建axios实例,默认接口域名url’,默认超时时间在main.js引入http再创建个api.js业务逻辑封装最后在也页面调用即可...原创 2020-05-19 23:26:14 · 137 阅读 · 0 评论 -
Please restart this script from an administrative PowerShell!
解决办法1、以管理员身份运行cmd搜索cmd,然后右键“以管理员身份运行”2.再运行命令npm install --global --production windows-build-tools原创 2020-05-18 21:02:51 · 1137 阅读 · 0 评论