vue
关注
分享
扫一扫
文章平均质量分 55
vue学习
enchantedovo
这个作者很懒，什么都没留下…
展开
-
【登录】Vue项目中登录功能：vuex+路由拦截+axios+scss
一、简介1.功能全局样式统一路由拦截vuex全局状态管理Cookies使用2.文件涉及的文件有：views/login/index.vuestore/modules/user.jsutils/auth.jsapi/user.js二、代码1.views/login/index.vue全局样式统一表单预验证登录请求 //只保留核心代码 methods: { handleLogin() { this.$refs.loginForm.validate原创 2021-01-22 12:10:37 · 199 阅读 · 0 评论 -
【mock.js】mock.js在vue-admin-template项目中的使用
记录学习mock.js一、什么是mock.js使用mock.js拦截ajax请求，更加方便的构造需要的假数据。二、项目介绍vue-element-admin项目的所有请求都是通过封装的request.js进行发送的，所有的请求都设置了一个baseURL，而这个baseURL又是通过读取process.env.VUE_APP_BASE_API这个环境变量来动态设置的。在vue-element-admin的模板当中，所有的数据都是模拟实现的，这里可以仿照着它模拟数据的流程进行数据的模拟mock。.原创 2021-01-15 11:39:01 · 807 阅读 · 0 评论 -
【Vue】vuex存储和本地存储(localstorage、sessionstorage)的区别
摘自：https://www.cnblogs.com/jsanntq/p/9288144.html一、区别1.存储vuex存储在内存localstorage（本地存储）则以文件的方式存储在本地,永久保存；sessionstorage( 会话存储 ) ,临时保存。注：localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理2.应用场景vuex用于组件之间的传值loca.转载 2020-07-22 12:16:29 · 341 阅读 · 0 评论 -
Vuex学习笔记【2】案例笔记
实现ToDoList的基本功能一.初始化案例1.创建项目（见上一节）首先使用vue ui初始化一个使用vuex的案例2.添加模拟数据json文件然后打开public文件夹，创建一个list.json文件，文件代码如下：[ { "id": 0, "info": "Racing car sprays burning fuel into crowd.", "done": false }, { "id": 1,.原创 2020-07-11 23:52:48 · 161 阅读 · 0 评论 -
Vuex学习笔记【1】核心概念
一、Vuex概述Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享使用Vuex管理数据的好处：A.能够在vuex中集中管理共享的数据，便于开发和后期进行维护B.能够高效的实现组件之间的数据共享，提高开发效率C.存储在vuex中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新二、核心概念1.State State提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储 例如，打开项目中的store.js文件，在原创 2020-07-11 16:06:34 · 136 阅读 · 0 评论 -
【Vue】生命周期的理解
官网生命周期图：vue有8种生命周期函数：钩子函数 触发的行为 在此阶段可以做的事情 beforeCreadted vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。 加loading事件 created vue实例的数据对象data有了，$el还没有 结束loading、请求数据为mounted渲染做准备 beforeMount vue实例的$el和data都初始化了，但还是虚拟的dom节点，具转载 2020-07-08 19:39:17 · 172 阅读 · 0 评论 -
【Vue】nextTick的理解和场景
参考文章：https://juejin.im/post/5ae3f0956fb9a07ac90cf43ehttps://www.cnblogs.com/fozero/p/10863667.html一、引言首先看下面一段代码var vm = new Vue({ el: '#example', data: { msg: 'begin', }, mounted () { this.msg = 'end' console.log(.转载 2020-07-08 19:18:10 · 158 阅读 · 0 评论 -
【Vue】vue-cli生成的项目中使用其他库（js库、css库）
起因：在vue项目中使用jQuery，animate等库一、用vue-cli生成项目1. vue init webpack-simple vue-jq2. cd vue-jq3. cnpm install4. 使用git bash（只是为了方便）5. package.json 中修改端口 --port 80886. npm run dev二、构建项目结构，引入相关文件目录结构如下： |--assets |--js |--fn.js |--jque转载 2020-07-07 23:05:27 · 153 阅读 · 0 评论 -
【Vue】父子组件传值
一、父组件---->子组件传递数据Vue中的父组件要想向子组件传递值的化需要通过属性的方式传递<body> <div id="root"> <counter :count="1"></counter> <counter :count="2"></counter> </div> <script> var counter={ props:["count"],转载 2020-07-07 22:54:29 · 112 阅读 · 0 评论 -
【vue】中封装 axios
1.写在@/utils/requestimport axios from 'axios'import { Message } from 'element-ui'import store from '@/store'import { getToken } from '@/utils/auth'// 创建axios实例const service = axios.create({ baseURL: process.env.BASE_API, // api的base_url timeout:转载 2020-07-07 22:30:26 · 137 阅读 · 0 评论 -
【Vue】vue-router学习笔记
一、前言1.什么是vue-router路由模块的本质：建立起url和页面之间的映射关系2.实现原理单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面;vue-router在实现单页面前端路由时，提供了两种方式：Hash模式和History模式；根据mode参数来决定采用哪一种方式。Hash模式vue-router 默认 hash 模式 ，hash - 即地址栏URL中的 # 符号（此hash不是密码学里的散列运算）比如这个URL：http：//www.abc.com/#/hello转载 2020-07-07 12:07:11 · 274 阅读 · 0 评论 -
【vue】axios拦截器学习笔记
一、分类request请求拦截器发送请求前统一处理，如：设置请求头headers、应用的版本号、终端类型等；场景：每次都要在请求中加入token 判断是否登陆等。response响应拦截器有时候我们要根据响应的状态码来进行下一步操作，例如：由于当前的token过期，接口返回401未授权，那我们就要进行重新登录的操作。二、使用与配置1.安装 axiosnpm install axios --save-dev2.在@/utils/下新建request.js文件import axios f转载 2020-07-07 10:13:39 · 199 阅读 · 0 评论 -
【Vue】v-if与v-show的区别
【Vue】v-if与v-show的区别相同点：v-if与v-show都可以动态控制dom元素显示隐藏不同点：v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css–display:none，dom元素还在。都修改为false后，第一个div是直接被移除掉了需要注意的是，当一个元素默认在css中加了display：none属性，这时通过if-show修改为true是无法让元素显示的。原因是显示隐藏切换，只是会修改element style为display:""或者d转载 2020-05-21 09:43:08 · 149 阅读 · 0 评论