![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
Mozzie晓风残月
i am code
展开
-
基于element和vue实现的前端代码结构
一 项目结构二 项目基于vuex实现数据的管理store的结构示意三 基于前端接口的封装(以登录接口为例)1 登录界面<template> <div class="login-container"> <el-form ref="loginForm" :model...原创 2019-08-22 15:55:56 · 771 阅读 · 0 评论 -
vue-router 权限处理
var routes = [ { path: '/user', // component: Layout, redirect: 'noredirect', alwaysShow: true, name: 'userManage', meta: { title: '用户管理', icon: 'chart'...原创 2019-10-11 21:24:12 · 967 阅读 · 0 评论 -
vue 权限匹配路由
permissionList 和 路由列表的匹配。var routes = [ { path: '/user', // component: Layout, redirect: 'noredirect', alwaysShow: true, name: 'userManage', meta: { title: ...原创 2019-10-11 21:05:32 · 1300 阅读 · 0 评论 -
Vue Router 的params和query传参的使用和区别
首先简单来说明一下$router和$route的区别//$router : 是路由操作对象,只写对象//$route : 路由信息对象,只读对象//操作 路由跳转this.$router.push({ name:'hello', params:{ name:'word', age:'11' }})//读...原创 2019-12-09 22:02:41 · 167 阅读 · 0 评论 -
vue的scoped修改三方组件的局部样式
vue引用了第三方组件,需要在组件中局部修改第三方组件的样式,而又不想去除scoped属性造成组件之间的样式污染。此时只能通过 >>>,穿透scoped。有些Sass 之类的预处理器无法正确解析>>>。可以使用/deep/操作符(>>>的别名)<style scoped>外层 >>>...原创 2019-12-06 17:08:46 · 249 阅读 · 0 评论 -
vue项目中keep-alive的使用,从详情页返回列表时保存浏览位置
背景描述:最近在做移动端前端项目中,需要实现以下场景:1.在页面查询列表,进入详情页时,返回需要页面返回到上次浏览的位置2.由于查询列表获取的数据可能会短时间改变,如果前端长时间缓存数据,并不符合业务要求。3.我在进入详情页时可以修改列表的数据,返回时滚动到,用户看到的应该是最新的数据4.每个列表页面需要用到滑动加载更多数据。项目中vue的使用:1.用到keep-ali...转载 2019-12-23 21:43:05 · 1205 阅读 · 0 评论 -
vue iview 前端表格分页
// 获取Table数据 handleListTable() { // 保存取到的所有数据 // 初始化显示,小于每页显示条数,全显,大于每页显示条数,取前每页条数显示 if (this.tableDataAll.length < this.pageSize) {...原创 2019-12-18 23:40:21 · 705 阅读 · 1 评论 -
vue 导航守卫结合keep-alive实现缓存
1 app.vue<template> <div id="main" class="app-main"> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-al...原创 2019-12-18 22:28:21 · 409 阅读 · 0 评论 -
vue+img默认加载
场景:有些时候后台返回图片地址不一定能打开,所以这个时候应该加一张默认图片<script>export default{ data(){ return{ imgUrl:'' } }, methods:{ handleError(e){ e.target.src=reqiure('图片路径') //当然如果项目配置了tr...原创 2019-10-17 15:28:48 · 273 阅读 · 0 评论 -
vue+object.freeze
场景:一个长列表数据,一般不会更改,但是vue会做getter和setter的转换 用法:是ES5新增的特性,可以冻结一个对象,防止对象被修改 支持:vue 1.0.18+对其提供了支持,对于data或vuex里使用freeze冻结了的对象,vue不会做getter和setter的转换 注意:冻结只是冻结里面的单个属性,引用地址还是可以更改。new Vue({ data: { ...原创 2019-10-17 15:02:46 · 153 阅读 · 0 评论 -
vue的attrs和listeners
2.4.0 新增 attrs场景: 如果父传子有很多值 那么需要在子组件定义多个props解决: attrs获取子传父中未在props定义的值。// 父组件<home title="这是标题" width="80" height="80" imgUrl="imgUrl"/>// 子组件mounted() { console.log(this.$attrs) //{ti...原创 2019-10-17 10:25:11 · 302 阅读 · 0 评论 -
vue对象更新检测
数组更新检测变异方法Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下:push() pop() shift() unshift() splice() sort() reverse()替换数组变异方法 (mutation method),顾名思义,会改变被这些方法调用的原始数组。相比之下,也有非变异 (non-mutating meth...原创 2019-03-16 19:08:43 · 730 阅读 · 0 评论 -
vue事件名命名
事件名不同于组件和 prop,事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子,如果触发一个 camelCase 名字的事件:this.$emit('myEvent')则监听这个名字的 kebab-case 版本是不会有任何效果的:<!-- 没有效果 --><my-component v-on:my-event...转载 2019-07-17 14:22:47 · 1873 阅读 · 0 评论 -
v-model指令
v-model指令所谓的“指令”其实就是扩展了HTML标签功能(属性)。先来一个组件,不用vue-model,正常父子通信 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 2...转载 2019-07-17 15:39:27 · 139 阅读 · 0 评论 -
vue使用动态组件
<!-- html 部分 --><div id="app" class="demo"> <button v-for="(tab,key) in tabs" @click="tabIndex=key"> {{ tab }} </button> <keep-alive> <c...原创 2019-07-20 14:32:05 · 122 阅读 · 0 评论 -
vue移动端项目真机调试
1.电脑和手机连接到同一个WIFIa.台式电脑和手机同时链接一个路由器,使用同一个wifi;b.笔记本也可以直接启用一个wifi,手机链接笔记本wifi也可以;2.查询本地IP地址WIN+R,输入cmd回车,打开命令提示符,输入ipconfig,查看本地IPv4;3.修改本地项目中IP地址找到项目中config文件夹,下面index.js文件打开;找到host: ‘...原创 2019-07-21 10:00:58 · 897 阅读 · 0 评论 -
vue 事件修饰符
https://blog.csdn.net/qq_38526573/article/details/94874277转载 2019-07-30 14:22:10 · 240 阅读 · 0 评论 -
vue 强制组件重新渲染(重置)
数据通过异步操作后,对之前刚加载的数据进行变更后,发现数据不能生效方案一当数据变更后,通过watch监听,先去销毁当前的组件,然后再重现渲染。使用v-if可以解决这个问题<template> <third-comp v-if="reFresh"/></template> <script> export defau...原创 2019-12-09 22:01:52 · 1206 阅读 · 0 评论 -
vue element文件的导出 导入 下载
一 导出<i-button type="error" size="small" @click="exportList()"> 导出此列表</i-button><Spin size="large" fix v-if="spinShowExport" style="min-height: 100%"> <Icon ...原创 2019-08-19 20:19:37 · 632 阅读 · 0 评论 -
vue mixins的用法
相信大家都用过less、sass等预编译器。它们中也有mixins,用法也很简单,例如Less中:.box{ border:1px solid red; padding:10px; }.mixin{ .box; margin:10px; }.box{ border:1px solid red; padding:10px; }.mixi...原创 2019-09-11 14:51:52 · 438 阅读 · 1 评论 -
vue 插槽
一 具名插槽<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=...原创 2019-09-24 22:39:17 · 80 阅读 · 0 评论 -
vue首屏加载慢
大文件定位我们可以使用webpack可视化插件Webpack Bundle Analyzer查看工程js文件大小,然后有目的的解决过大的js文件。安装 1 npm install --save-dev webpack-bundle-analyzer 在webpack中设置如下,然后npm run dev的时候默认会在8888端口显示。 ...原创 2019-07-15 20:21:06 · 2092 阅读 · 0 评论 -
vue处理加载状态
这里的异步组件工厂函数也可以返回一个如下格式的对象:const AsyncComponent = () => ({ // 需要加载的组件 (应该是一个 `Promise` 对象) component: import('./MyComponent.vue'), // 异步组件加载时使用的组件 loading: LoadingComponent, // 加载失败时使用的...原创 2019-07-08 10:47:49 · 1137 阅读 · 0 评论 -
vue异步组件
一 基础异步组件demo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...原创 2019-07-08 10:26:05 · 159 阅读 · 0 评论 -
vue-router路由懒加载
一 路由懒加载vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时import Vue from 'vue';import Router ...原创 2019-04-03 14:08:02 · 270 阅读 · 0 评论 -
vue的watch属性
在vue中,使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种简单的用法:<input type="text" v-model="cityName"/>new Vue({ el: '#root', data: { cityName: 'shanghai' }, watch: { cityName(newNa...转载 2019-04-10 22:14:39 · 187 阅读 · 0 评论 -
vue操作dom的ref属性
this.$refs.test.focus()原创 2019-03-27 22:05:05 · 280 阅读 · 0 评论 -
vue的computed计算属性
计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。 注意如果你为一个计算属性使用了箭头函数,则this不会指向这个组件的实例,不过你仍然可以将其实例作为函数的第一个参数来访问。 computed: { aDouble: vm => vm.a * 2} 计算属性的结果会被缓存,除非依赖的响应式属...原创 2019-03-18 21:16:37 · 204 阅读 · 0 评论 -
vue-resource 和 axios区别
VUE-RESOURCEVue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必要引入jQuery。vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简...转载 2019-03-16 23:09:17 · 141 阅读 · 0 评论 -
vue keep-alive实践总结
一 概念<keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。<keep-alive>包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和<transition>相似,<keep-alive>是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。prop...翻译 2019-03-05 10:59:54 · 298 阅读 · 0 评论 -
vue使用iview处理上传音频
一 实现效果图 <FormItem label="音频名称"> <Input v-model="level.audio_name" placeholder="音频名1-15个字" :maxlength="15"/></FormItem><div style="position: relative&原创 2019-02-20 09:21:34 · 2878 阅读 · 0 评论 -
vue响应式原理
一 原理当你把一个普通的 JavaScript 对象传给 Vue 实例的data选项,Vue 将遍历此对象所有的属性,并使用Object.defineProperty把这些属性全部转为getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器。这些 getter/se...原创 2019-02-28 11:56:02 · 83 阅读 · 0 评论 -
vue.nextTick 的原理和用途
一 用法在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。二 原理1 异步说明Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。Vue 是异步执行 DOM 更新的。异步执行的运行机制如下:(1)所有同步任务都在主线程上执行,形成一个执行栈(execution contex...转载 2019-02-23 12:30:13 · 154 阅读 · 0 评论 -
vue如何获取当前路径url及参数
有时候开发需要获取当前url的参数完整url可以用window.location.href路由路径可以用this.$route.path路由路径参数this.$route.params(params是参数名称)this.$route.queryname => paramspath => query...原创 2019-04-16 20:18:47 · 12244 阅读 · 0 评论 -
vue 计算属性computed
var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } }})计算...原创 2019-04-13 22:32:06 · 74 阅读 · 0 评论 -
vue filters 时间戳转日期格式
<li class="statistics-article" v-for="(item, aIndex) in homework" :key="aIndex"> <p class="list-article-cla"> <span> ###: {{item.createdTime | format...原创 2019-05-19 10:01:56 · 624 阅读 · 0 评论 -
js 获取设备参数
util.jsimport md5 from 'js-md5'let util = {};util.device = function () { var getBrowserInfo = function () { var agent = navigator.userAgent.toLowerCase(); var sUserAgent ...原创 2019-05-19 17:39:33 · 1143 阅读 · 0 评论 -
vue表单事件修饰符
.lazy在默认情况下,v-model在每次input事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加lazy修饰符,从而转变为使用change事件进行同步:<!-- 在“change”时而非“input”时更新 --><input v-model.lazy="msg" >.number如果想自动将用户的输入值转...原创 2019-05-14 15:50:33 · 380 阅读 · 0 评论 -
vue组件传值prop类型
Prop 验证我们可以为组件的 prop 指定验证要求,例如你知道的这些类型。如果有一个需求没有被满足,则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。为了定制 prop 的验证方式,你可以为props中的值提供一个带有验证需求的对象,而不是一个字符串数组。例如:Vue.component('my-component', { props: {...原创 2019-05-05 19:58:54 · 6000 阅读 · 0 评论 -
vue+axios+拦截器+token的接口封装+vue-router
一 项目结构二 API.js(class类枚举了post和get接口)import axios from 'axios'import {config, publicUrl} from './config'import Cookies from 'js-cookie';import vue from 'vue';class API { // 登录接口 logi...原创 2019-04-17 17:45:07 · 1263 阅读 · 0 评论