Allurewuhui的博客

Vue中的$nextTick有什么作用？ - 简书 (jianshu.com)https://www.jianshu.com/p/dce747bc708f

需求概述：当用户没有进行登录时是不允许跳转到 个人订单，我的购物车等页面的，如果用户在未登录状态下点击了这些选项，则跳转到登录页面让用户进行登录。当用户登录完成之后不是跳转回首页，而是直接跳转回用户点击的那个选项本应跳转的页面。比如点击个人订单跳转到登录页面了，完成登陆后直接跳转回个人订单页面。解决方法：1.在进行路由跳转登录页面时动态的给登录页面传递 query 参数。（下方图片代码是写在全局路由守卫当中的）2.因为在跳转时给 login 登录页面传递了 query 参数.

Vue2中通过 Object.defineProperty 实现数据劫持，使得数据实现响应式更新。Object.defineProperty简介：Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。Object.defineProperty(obj, prop, descriptor)obj：要定义属性的对象。prop：要定义或修改的属性的名称或Symbol。descriptor：要定义或修改的属性描述符。返..

新增属性、删除属性, 界面不会更新。当想动态的向 data 中添加数据，例如调用一个方法，向已有对象中添加一个属性，想要实现响应式，需要调用 组件实例对象身上的 $set方法，或者调用 Vue 身上的 set 方法。直接通过下标修改数组, 界面不会自动更新。1.调用组件实例对象身上的 $set方法，或者调用 Vue 身上的 set 方法。2.调用数组身上的方法进行修改// 想使用Vue身上的方法需要先引入import Vue from 'vue'// 动态更新数据--向已有对象中

场景：用户登录需要携带 token 向服务端获取数据，但是如果将 token 存储在Vuex当中，刷新页面时 token 将被清空，导致服务器无法根据 token 返回对应的用户数据原因：Vuex是无法持久化存储的解决方法：借助 localStorage 存储 token 实现持久化存储// 在Vuex文件中// action内容：// 登录业务 async userLogin({ commit }, data) { let res = await reqLog

一；main.js 入口文件入口文件用来注册Vue实例，路由，Vuex，全局事件总线和注册全局自定义组件参考代码如下：import Vue from 'vue'import App from './App.vue'// 引入路由import router from '@/router'// 引入全局组件--三级联动组件import TypeNav from '@/components/TypeNav'import Carousel from '@/components/Carous

1.在scr文件夹下创建api文件夹，api文件夹中专门用来书写需要向服务器发送的请求2.在api文件夹下创建requests.js文件，其中进行axios的二次封装，详细备注见代码// 对axios进行二次封装import store from '@/store'import axios from 'axios'// 1.利用axios对象方法 create 去创建一个axios实例// 2.request就是axios 只不过可以稍微配置一下let requests = axio

1.先写好一个要设置为全局组件的组件2.在 main.js 入口文件中 通过 import 引入全局组件 注意引入的路径一定要正确3.引入之后通过 Vue.component ('TypeNav',TypeNav) 注册全局组件其中第一个参数是一个字符串 它代表着你全局注册的组件的名字，之后使用书写组件标签时就是这个名字，第二个参数是 import 引入时的名字 一般都与组件名保持一致// 引入全局组件--三级联动组件import TypeNav from '@/components/T

this.$router.push({ name:'search', query:this.$route.query, params:this.$route.params})通过给路由设置 name 属性 可以使用对象方法同时在路由跳转时传递 query参数 和params参数

场景：当前端需要一次性传递很多字段数据的时候，且这些数据都是可传可不传的，我们可以通过Object.assign()方法简化向这些字段赋值Object.assign() ES6合并对象，把后面的形参内容 合并（更新）到第一个形参中data() { return { searchParams: { category1Id: "", category2Id: "", category3Id: "", categor..

一；通过给组件绑定自定义事件实现 子向父传递参数1.首先在父组件当中 给子组件绑定自定义事件2.在子组件中，通过 this.$emit ( '自定义事件名' ， 要传递的数据) 进行子组件中数据的传递3.在父组件中的methods中书写自定义事件函数，函数中的形参用来接收子组件传递过来的数据，在函数体中进行数据的处理// 这是父组件中的子组件标签<SearchSelector @trademarkInfo="trademarkInfo" @attrInfo="attrInfo"/&

路由传参 query传参 直接在请求路径后面以键值对的形式传递参数的形式为query传参 通过$route.query读取对应参数 params传参 直接在请求路径后面接参数且需要在对应路由中使用占位符声明接收params参数 通过$route.params读取对应参数 router-link标签中 to 的对象写法 to必须为动态数据绑定 ..

利用事件委派+编程式导航实现路由的跳转与传递参数一；确认用户点击的是三级联动的哪一级以及这一级的点击内容思路：1.事件委派：给三级联动整体的父元素绑定一个点击事件，通过该事件的event.target属性可以获取到它的子元素对应问题：（1）只有点击a标签时才会进行路由跳转，怎么能确定点击的是a标签？（2）确认了点击是a标签，如何区分是一级二级还是三级的a标签问题解决：把子节点当中的a标签添加自定义属性 data-categoryName="xxx" 其余的子节点是没有的，到当前触

小坑：Vuex的引入和注册不应该在main.js入口文件，而应该在vuex对应的配置文件 index.js中引入Vuex配置方法npm i vuex 下载 vuex包 与components文件夹平级，创建一个 store 文件夹，里面新建子文件 index.js import引入vuex Vue.use (vuex) 使用 Vuex 在index.js文件中配置vuex需要使用的属性，actions，mutations，state new一个Vuex的实例化对象 导出这个实例化对象

<el-table :data="tableData" // 绑定数据源，scope="scopedData"中scopedData的数据也来源于此 stripe //stripe属性可以创建带斑马纹的表格 border // 使表格带有边框 style="width: 50%" // 设置所占屏幕的宽度 一般设置为50%> // 通过 el-table-column 设置表格一列的信息 <el-table-column .

<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane> <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane> <el-tab-pane label="角色管理" name="thir..

Element-ui Cascader 级联选择器使用简介

Vue-element 中 树形控件的基本使用

一；概念：在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。二；自己的总结：把需要共享的数据存放到Vuex中，其他的组件可以共同进行操作更改Vuex中的数据，多个组件需要共享数据时使用。三；如何配置Vuex：（1）通过npm i vuex 安装vuex插件（2）创建一个store文件夹，里面再创建一个js文件夹 该文件用于创建Vuex中最为核心的 store（3）在创建好的文

作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件。默认插槽的使用：（1）组件标签必须是左右闭合的，把想要放入插槽的HTML标签写入组件标签之中，需要数据的地方可以直接从data中获取使用（2）在对应组件的模板中想要插入html标签的位置使用<slot></slot>标签即可父组件中：<Category title="游戏" > <img src="https://s3.ax1x

把需要批量控制的变量都包裹在一个对象中，通过替换对象实现批量控制data中变量的效果。如下是将需要控制的各种变量名放置在 info 对象中data() { return { info: { users: [], isFirst: true, isLoading: false, errMsg: "", }, }; },在需要接收数据的组件中 方法只需要设置一个形参，此形参将接收由发送数据组