vue2.0
卡卡欧文
这个作者很懒,什么都没留下…
展开
-
前端面试知识点归纳:vue,react,webpack,bable,项目开发
原创 2021-08-04 14:23:07 · 101 阅读 · 0 评论 -
什么是MVC和MVVM,两个例子读懂它们!
MVC:Model、View、ControllerM:数据层,V:视图层,C:负责数据和视图交互的控制层他们是如何工作的?举例子:C是老板,M是一堆文件,V是展示这些文件的展台,老板( C )负责自己处理这些文件(M)如何展示到展台(V)MVVM:Model、View、ViewModel。M:数据层,V:视图层,VM:数据视图交互的工具(封装了交互的规,方法)举例子:C还是老板(不过现在角色不是很重要,只负责发布命令),M是一堆文件,V是展示这些文件的展台,老板觉得自己展示很累,就使用了一个工具原创 2021-07-20 11:14:30 · 301 阅读 · 0 评论 -
Vue2.0 $set()处理数据更新但视图不更新的问题(给对象添加属性必须用this.$set(this.data,”key”,value’))
vue2.0 给data对象新增属性,并触发视图更新如下代码,给 student对象新增 age 属性data () { return { student: { name: '', sex: '' } }}众所周知,直接给student赋值操作,虽然可以新增属性,但是不会触发视图更新mount...转载 2019-06-03 09:58:37 · 1501 阅读 · 0 评论 -
下载后台返回的文件
this.axios({ url:this.common.getApi() + '/sys/api/project/downloadSample', method:'get', params: { id: Number(this.editform.id), type: N...原创 2019-07-02 15:26:35 · 1028 阅读 · 0 评论 -
vue中使用vuex结合sessionStorage做的登录功能
最近做项目需要保存用户登录状态,要做到刷新页面用户状态不变,以及实现登出功能。实际上是很简单的,但是对于vue新手来说,我找了好几个网址都讲的不是很清楚,磕磕绊绊理清了关系,在这里总结一下。首先,vuex安装完成之后,构建如下目录:vuex目录结构这样做的目的是降低代码的耦合度,方便以后的修改与维护。然后,vuex中几个文件详情如下...转载 2019-07-11 15:25:40 · 9932 阅读 · 2 评论 -
后端返回文件,前端下载导出
this.axios({ url:this.common.getApi() + '/sys/api/convertgifs/downloadConvertGifs', method:'get', params: { ids: this.ids }, responseType: 'blob', }).then((res)...原创 2019-07-31 15:02:50 · 4573 阅读 · 0 评论 -
vue router.beforeEach跳转路由验证用户登录状态
使用vue判断验证用户登录状态导航钩子类似于生命周期钩子,包含路由进入前,进入后,更新时,退出前等几个周期,主要用于控制导航的前进后退或跳转等。其中router.beforeEach就是路由进入前的周期,同时有路由的来源...转载 2019-08-26 12:01:49 · 334 阅读 · 0 评论 -
使用vue-qriously插件,在vue项目中生成二维码
之前使用qrcodejs2发现二维码内容的长度太长会出问题,所以改用vue-qriously 代码案例安装npm install vue-qriously --save-devmain.js 入口文件import Vue from 'vue'import VueQriously from 'vue-qriously'Vue.use(VueQrious...转载 2019-08-27 15:20:15 · 1074 阅读 · 0 评论 -
在vue中使用MD5加密
npm安装:npm install --save js-md51.在需要使用的项目文件中引入:import md5 from 'js-md5';使用:md5('holle') // bcecb35d0a12baad472fbe0392bcc043 2.或者在main.js文件中将md...转载 2019-09-05 11:02:53 · 423 阅读 · 0 评论 -
vue中使用富文本编辑器wangEditor及踩坑
因为上传图片的问题使用过了各种富文本,最后发现还是这个比较好用。分享记录一下。安装npm install wangeditor --save新建一个wangeditor.vue(组件),代码内容如下<template lang="html"> <div class="editor"> <div ref="toolbar" class="toolb...原创 2019-09-09 13:47:41 · 4173 阅读 · 2 评论 -
vue中使用flexible.js并配合px2rem-loader实现移动端布局
适配移动端flexible.js适用于最新版vue-cli,配置手淘的lib-flexible.js和rem实现移动端页面自适应1.安装lib-flexible.jsnpm install lib-flexible --save2.在项目入口文件main.js中引入lib-flexibleimport 'lib-flexible/flexible.js'3.px转换rem使用...原创 2019-09-11 11:21:14 · 844 阅读 · 0 评论 -
axios的http拦截
axios的http拦截 // 引入axios以及element ui中的loading和message组件import axios from 'axios'import { Loading, Message} from 'element-ui' // 超时时间 axios.defaults.timeout = 5000 // http请求拦截器var loadingin...原创 2019-09-19 17:42:33 · 164 阅读 · 0 评论 -
vue中文件上传方法
vue中文件上传方法(图片,表格)//html部分<input type="file" id="people-export" ref="inputer" @change="fileUpload"/>//方法fileUpload(event){ // 上传文件 console.log(event); let file = eve...原创 2019-05-29 18:13:46 · 19051 阅读 · 2 评论 -
vue项目做本地代理
在config里的index.js 的proxyTable里面配置格式为dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', //做本地代理 proxyTable: { '/doctor_sys_api': { target: 'http:/...原创 2019-05-29 15:49:20 · 899 阅读 · 0 评论 -
vue项目中使用lib-flexible解决移动端适配
第一部分:项目中引入lib-flexible一、项目中安装lib-flexible$ npm install lib-flexible --save二、在项目的入口js文件中引入lib-flexibleimport 'lib-flexible'通过要以上两步,就完成了在vue项目使用lib-flexible来解决移动端适配了。lib-flexible会自动在ht...转载 2019-05-06 09:27:22 · 3088 阅读 · 0 评论 -
vue 中使用rem布局
在用vue或react等工具搭建一个移动端项目时,怎样做到自适应呢? 当然选择rem布局比较方便快捷.此处已vue为例,在使用vue-cli搭建好项目框架后,在目录结构的index.html文件中添加一段js代码:fnResize();window.onresize = function () { fnResize();}function fnResize() { var dev...转载 2019-05-06 12:41:23 · 715 阅读 · 0 评论 -
Vue登录注册,并保持登录状态
关于vue登录注册,并保持登录状态,是vue玩家必经之路,网上也有很多的解决方法,但是有一些太过于复杂,新手可能会看的一脸懵逼,现在给大家介绍一种我自己写项目在用而且并不难理解的一种方法。项目中有一些路由是需要登录才可以进入的,比如首页,个人中心等等有一些路由是不需要登录就可以进入,比如登录页,注册页,忘记密码等等那如何判断路由是否需要登录呢?就要在路由JS里面做文章在router.js中...转载 2019-05-06 17:24:48 · 509 阅读 · 0 评论 -
中国标准时间格式化
中国标准时间格式化{{time | timmer}}过滤器如下filters:{timmer:function(time){function checkTime(i){if (i<10){i=“0” + i}return i;}var date = new Date(time);var date_value=date.getFullYear() + ‘/’ + (da...原创 2019-05-20 11:52:15 · 2307 阅读 · 0 评论 -
路由守卫
路由跳转前做一些验证,比如登录验证,是网站中的普遍需求。对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards)。导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧。贴上文档地址:https://router.vuejs.org/zh-cn/advanced...转载 2019-05-10 13:30:04 · 121 阅读 · 0 评论 -
axios文档
很全的axios文档http://www.axios-js.com/zh-cn/docs/原创 2019-05-10 13:31:42 · 368 阅读 · 0 评论 -
vue父子组件通信
一、父组件利用props往子组件传输数据父组件:<div> <child v-bind:my-message="parentMsg"></child>//注意传递参数时要用—代替驼峰命名,HTML不区分大小写</div>子组件:Vue.component('child', { // camelCase in JavaScript...原创 2019-05-10 14:56:52 · 95 阅读 · 0 评论 -
element-ui按需引入
1.安装cnpm i element-ui -S //-S表示 --save2.借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。npm install babel-plugin-component -D 2.1 在.bable.js天下如下配置{ "presets": [ ["es2015", { "modules...原创 2019-05-13 10:22:12 · 2632 阅读 · 0 评论 -
vue登录业务逻辑
这次给大家带来vue2.0实现注册登录步骤详解,vue2.0实现注册登录的注意事项有哪些,下面就是实战案例,一起来看一下。前言前段时间和公司一个由技术转产品的同事探讨他的职业道路,对我说了一句深以为然的话:“不要把自己禁锢在某一个领域,技术到产品的转变,首先就是思维上的转变。你一直做前端,数据的交互你只知道怎么进,却不知道里面是怎么出的,这就是局限性。”醍醐灌顶般,刚好学习vue的时候...转载 2019-05-27 10:03:30 · 10822 阅读 · 0 评论 -
vue+axios 前端实现登录拦截(路由拦截、http拦截)
一、路由拦截登录拦截逻辑第一步:路由拦截首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录。如果用户已经登录,则顺利进入路由,否则就进入登录页面。const routes = [ { path: '/', name: '/', component: Index }, ...转载 2019-05-27 16:00:25 · 111 阅读 · 0 评论 -
axios post,get,put
POSTthis.$axios({ method:'POST', url: url_g + '/dcas/datacustom', data: this.ruleForm }).then((res) => { let data = res.data i...原创 2019-05-31 14:10:05 · 540 阅读 · 0 评论 -
vuex从安装到使用
vuex的安装 npm install vuex --save或cnpm install vuex --savemain.js引入vueximport Vue from 'vue'import Vuex from 'vuex'import store from './vuex/store'Vue.use(Vuex)vuex的目录结构和store.js的代码store....转载 2019-04-12 11:39:47 · 423 阅读 · 0 评论