- 博客(8)
- 收藏
- 关注
原创 axios的封装
axios封装,使用拦截器统一处理接口在vue-cli项目的src路径下新建一个axios文件夹,在axios文件夹里新建aps.js和request.js,api.js用于写接口,对axios的封装写在request.js里.:1. axios统一封装然后开始统一封装axios, 首先引入axios、qs依赖,引入main.js主要是用于后面对接口进行统一处理,比如调接口的时候,显示loading等。这个main.js根据你个人情况,可加可不加。//request.jsimport axios
2021-05-04 21:49:34 246
原创 vuex的核心概念和运行机制
vuex的五大核心特性1.state 存储vuex所有的数据,类似于vue中data数据//1. state 存储vuex所有的数据,类似于vue中data数据state:{ num:1, list: [],}2.mutations 方法对象,同步修改state中的数据 类似于Vue中methodsmutations:{ changeNum(state,payload){ state.num = payload;//修改state中的数据 }
2021-05-04 21:35:09 115
原创 vue-router钩子函数和执行顺序
vue路由钩子大致可以分为三类:1.全局钩子主要包括beforeEach和afterEachbeforeEach钩子函数有三个参数:to 即将进入的路由对象 from即将进入的路由对象 next 是否继续进入进入路由 next(false)阻止进入 next()继续进入路由地址afterEach有两个参数 to from 没有next()函数这类钩子主要用于全局,一般用来判断权限,以及页面丢失时候需要执行的操作const router = new VueRouter({ ... })
2021-05-04 21:25:02 1529
原创 Vue中的$nextTick()
一、NextTick是什么官方给出的定义是:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM原理是什么?this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。假设我们更改了某个dom元素内部的文本,而这时候我们想直接打印出这个被改变后的文本是需要dom更新之后才会实现的,也就好比我
2021-05-04 16:53:47 171
原创 Vue修改数据页面不更新的原因和解决方案
vue2是通过Object.defineProperty来实现数据响应式 ,因此在vue中写在data中的属性是可以转换成getter和setter,换句话说就是响应式的,其他定义在data之外的数据,是无法响应的渲染,意思就是改变数据 页面也不会刷新,所以一切要渲染到页面上的数据,必须写在data中.列举几个不刷新的实例:修改对象的某一属性vue只会将已经在data中声明的属性变为响应,没有声明的是不响应的<template> <div> <div v
2021-05-04 16:41:03 2029 1
原创 v-if和v-for的优先级
v-if和v-for的优先级1.v-for的优先级高于v-if原因:v-for比v-if优先级高,所以使用的话,每次v-for都会执行v-if,造成不必要的计算,影响性能,尤其是当前需要渲染很小一部分的时候。<ul> <li v-for="user in users" v-if="user.isActive" :key="user.id"> {{ user.name }} </li> </ul>如上情况,即使有很多us
2021-05-03 23:49:16 8034 1
原创 Vue组件通信的六种方式
前言组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。方法一 props/$emit1. 父组件向子组件传值//App.vue父组件<template> <div id="app"> <users v-bind:users="users"></users>//前者自定义名称便于子组件调用,后者要传递数据名 </div></template>&l
2021-04-25 08:53:39 78
原创 js的数据类型和判断
js的数据类型js数据类型有哪些基本数据类型: Number String Boolean Undefined Null Symbol(es6中独一无二的值) BigInt(es10新增)引用数据类型: Object 包括Object Array Function Date RegExp(基本数据类型也称值类型)数据类型判断四种判断方式**typeof、instanceof、constructor、Object.prototype.toString.call()、**jquery.type()
2021-03-31 21:25:50 60
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人