vue
小皇帝web前端
积累自己前端路上的知识,以备参考。
展开
-
Vue Element正则验证(所有)
1. 手机号: var validateMobilePhone = (rule, value, callback) => { if (value === '') { callback(new Error('手机号不可为空')); } else { if (value !== '') { var reg=/^1[3456789]\d{9}$/; if(!reg.tes.原创 2021-02-02 08:58:41 · 1758 阅读 · 1 评论 -
vue动态路由权限管理
通常我们在vue项目中都是前端配置好路由的,但在一些项目中我们可能会遇到权限控制,这样我们就涉及到动态路由的设置了。动态路由设置一般有两种:(1)、简单的角色路由设置:比如只涉及到管理员和普通用户的权限。通常直接在前端进行简单的角色权限设置(2)、复杂的路由权限设置:比如OA系统、多种角色的权限配置。通常需要后端返回路由列表,前端渲染使用1、简单的角色路由设置(1)配置项目路由权限// router.jsimport Vue from 'vue'import Router f转载 2020-09-22 15:42:59 · 4115 阅读 · 3 评论 -
async await处理异步请求数据
vue使用axios向后端发送请求。默认是异步发送请求。 例如: handleSubmitTest(systemId) { fetchGetProjectInfoBySystemId(systemId).then(response => { const projectObj = response.data.data const branchObj = this.getBranchInfoB...原创 2020-06-22 16:09:56 · 1455 阅读 · 0 评论 -
vue中nextTick和$nextTick的区别
<ul id="app"> <li v-for="item in Array">{{item}}</div></ul><script>new Vue({ el:'#demo', data:{ Array=[0,1,2,3,4,5,6,7,8,9,10] }, methods:...原创 2020-05-07 10:08:34 · 1047 阅读 · 0 评论 -
Promise-当一个接口需要依赖另一个接口的请求数据
场景一:先调用getData1,再调用getData2,再调用getData3 ...//创建一个Promise实例,获取数据。并把数据传递给处理函数resolve和reject。需要注意的是Promise在声明的时候就执行了。var getData1=new Promise(function(resolve,reject){ $.ajax({ type:"get...原创 2020-04-13 10:54:27 · 5424 阅读 · 0 评论 -
vue中async await请求处理
Promise.all()用法示例:const wait = ms => new Promise((resolve, reject) => { setTimeout(() => { console.log(`wait ${ms}ms`) resolve() }, ms)})const PA = Promise.all([...原创 2020-04-13 10:38:31 · 6538 阅读 · 0 评论 -
vue组件之间的通信传值方式
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢?首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就好像过年回家,坐着一屋子的陌生人,相互之间怎么称呼,这时就需要先知道自己和他们之间是什么样的关系。vue组件中关系说明:如上图所示, A与B、A与C、B与D、C与E组件之间是父子关系; B与...转载 2020-04-02 16:23:22 · 434 阅读 · 0 评论 -
解决vuex在页面刷新后数据丢失的问题
一、原因 js代码是运行在内存中的,代码运行时的所有变量、函数也都是保存在内存中的。 刷新页面,以前申请的内存被释放,重新加载脚本代码,变量重新赋值,所以这些数据要想存储就必须存储在外部,例如:Local Storage、Session Storage、Index DB等。这些都是浏览器提供的API,让你可以将数据存储在硬盘上,做持久化存储。具体选择哪一个就根据你实际需求来选择。二...转载 2020-03-30 18:42:52 · 2029 阅读 · 0 评论 -
Vue性能优化
Vue性能优化今天来谈一谈Vue中一些性能优化的问题,仅仅是个人使用中的一些小心得,来,今天我一句废话不多说,直接上内容好吧 1.v-if和v-show的使用, 我们都知道这两个都可以控制显隐,那我们用哪个呢,个人觉得要从两个方面入手来确定使用哪个, 1.权限的问题,只要涉及到权限相关的展示用v-if比较好 2.切换地频率,如果频繁的切换我们用v-show,...翻译 2020-03-10 16:43:44 · 357 阅读 · 0 评论 -
vue中实现登录控制
sessionStorage.username = this.username; 上面的登录页面注意:login方法中登录成功需要写入sessionStorage以便路由进行判断 import Vue from 'vue'import Router from 'vue-router' Vue.use(Router) const routes = [ {...翻译 2019-12-13 10:08:07 · 164 阅读 · 0 评论 -
Vue入门小结
1、指令{{msg}}/v-text #文本插值v-html #原始html v-once #只渲染一次 v-show #css控制显示隐藏 v-if #根据表达式渲染元素 #用 key 管理可复用的元素 v-else/v-else-if #紧跟v-if的else v-for #列表渲染 可以循环数字、数组、对象和对象数组 v-on...原创 2019-11-28 19:12:40 · 181 阅读 · 0 评论 -
created和mounted区别
有改变dom的时候 就用mounted 没有改变dom操作就用createdcreated:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。 mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。备注:其实两者比较好理解,通常created使用的次数多,而mounted通常是在一些插件的使用或者组件的使用中进行...原创 2019-11-28 19:06:45 · 1532 阅读 · 0 评论 -
vue extend 的基本使用
vue extend 的基本使用vue.extend 局部注册的应用2请注意,extend创建的是一个组件构造器,而不是一个具体的组件实例。所以他不能直接在new Vue中这样使用:new Vue({components: fuck})最终还是要通过Vue.components注册才可以使用的。<!doctype html><html><h...转载 2019-03-26 14:32:13 · 3843 阅读 · 0 评论 -
npm安装 vue-cli安装
一、使用之前,我们先来掌握3个东西是用来干什么的。npm: Nodejs下的包管理器。webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。vue-cli: 用户生成Vue工程模板。(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装)开始:...翻译 2018-10-09 08:57:40 · 1776 阅读 · 0 评论