![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue.js
文章平均质量分 67
mn_front
这个作者很懒,什么都没留下…
展开
-
Vue事件总线(EventBus)使用详细介绍
前言vue组件非常常见的有父子组件通信,兄弟组件通信。而父子组件通信就很简单,父组件会通过props向下传数据给子组件,当子组件有事情要告诉父组件时会通过$emit事件告诉父组件。今天就来说说如果两个页面没有任何引入和被引入关系,该如何通信了?如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信,就可以考虑Vue中的事件总线,即 **EventBus**来通信。EventBus的简介EventBus又称为事件总线。在Vue中可以使用EventBus来作为...转载 2021-11-01 10:49:24 · 679 阅读 · 0 评论 -
解决ElementUI的Table组件固定列,在屏幕刚好够表格显示时,会出现固定列显示不全的问题
在使用ElementUI的Table组件中的固定列时,发现当表格刚好显示全,处于临界值状态时,固定列的高度(height)会于表格高度不一致,导致固定列显示不全,出现垂直滚动条。如上图所示,现在表格下方是未出现水平滚动条的,处于表格宽度刚好够显示所有字段的临界值,固定列出现了高度变小的情况,导致显示不全。上图为检查元素找到的固定列的DOM元素,固定列的DOM元素是独立于表格body的,所有在开发代码中,给该列设置任何class或style是无法添加在固定列这个DOM元素上的。从这个DOM元素可以看转载 2021-05-28 11:14:32 · 2232 阅读 · 0 评论 -
Element UI VUE table表头与数据错位问题解决方案
问题分析:个人在做项目时,屏幕的大小以及滚动条(横向滚动条,竖向滚动条)的出现会导致标题描述的问题,经过查阅资料做出如下解决方案,供各位同仁参考1、CSS样式解决横向滚动条出现时错位问题请在Element-UI的 scss 文件中添加.el-table th.gutter{display: table-cell!important;}2、竖向滚动条出现时,出现错位请在 绑定数据后添加如下代码this.$nextTick(()=>{t...转载 2021-05-28 11:01:49 · 1114 阅读 · 0 评论 -
vue-cli项目中.postcssrc.js
module.exports = { "plugins": { "postcss-import": {}, //用于@import导入css文件 "postcss-url": {}, //路径引入css文件或node_modules文件 "postcss-aspect-ratio-mini": {}, //用来处理元素容器宽高比 "postcss-write-svg": { utf8: false }, //用来处理移动端1px的解...转载 2021-05-20 15:18:22 · 725 阅读 · 0 评论 -
VUE操作数组方法
变异方法 ------>>>> 会改变被调用的原始数组push()方法可向数组的末尾添加一个或多个元素,并返回新的长度。 let arrayPush = [] arrayPush.push(1) arrayPush.push(3) arrayPush.push(2) console.log(arrayPush) //=> [1,3,2]pop()方法用于删除并返回数组的最后一个元素。..转载 2021-04-22 16:55:26 · 2627 阅读 · 2 评论 -
深入了解 HTML5 History API,前端路由的生成,解读 webpack-dev-server 的 historyApiFallback 原理
文章目录1、history2、两种路由模式的生成3、historyApiFallback1、historyHistory 接口,允许操作浏览器的 session history,比如在当前tab下浏览的所有页面或者当前页面的会话记录。history属性1、length(只读)返回一个总数,代表当前窗口下的所有会话记录数量,包括当前页面。如果你在新开的一个tab里面输入一个地址,当前的length是1,如果再输入一个地址,就会变成2;假设当前总数已经是6,无论是浏览器的返回还是 h转载 2021-04-22 10:44:15 · 494 阅读 · 0 评论 -
vue删除对象属性-添加对象属性
1:vue删除对象属性this.$delete(this.B,'name');//删除对象属性2:vue判断对象属性是否存在this.B.hasOwnProperty('name')3: vue 判断对象是否存在//对象 为空 true 不为空 falseif(!$.isEmptyObject(object) ){ console.log('exit object')}4:vue添加对象属性data() { return { B...转载 2021-03-20 14:28:57 · 843 阅读 · 0 评论 -
vuex存储与本地储存(localstorage、sessionstorage)的区别
1.区别:vuex存储在内存,localstorage(本地存储)则以文件的方式存储在本地,永久保存(不主动删除,则一直存在);sessionstorage( 会话存储 ) ,临时保存。localStorage和sessionStorage只能存储字符串类型,对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理2.应用场景:vuex用于组件之间的传值,localstorage,sessionstorage则主要用于不同页面之间的传值。3.永久性:当刷新页原创 2021-03-19 16:59:18 · 464 阅读 · 0 评论 -
Vuex的单向数据流
随着前端的项目的越来越复杂,出现了一堆概念来降低开发的复杂性。单向数据流就是其中一个。如果项目很简单,不需要用单向数据流。单向数据流是什么单向数据流指只能从一个方向来修改状态。下图是单向数据流的极简示意:单向数据流的极简示意与单向数据流对对应的是双向数据流(也叫双向绑定)。在双向数据流中,Model(可以理解为状态的集合) 中可以修改自己或其他Model的状态, 用户的操作(如在输入框中输入内容)也可以修改状态。这使改变一个状态有可能会触发一连串的状态的变化,最后很难预测最终的状态是转载 2021-03-18 13:47:51 · 2743 阅读 · 0 评论 -
Vue同构(三): 状态与数据
前言 首先欢迎大家关注我的Github博客,也算是对我的一点鼓励,毕竟写东西没法变现,坚持下去也是靠的是自己的热情和大家的鼓励。各位读者的Star是激励我前进的动力,请不要吝惜。 Vue同构系列的文章已经出到第三篇了,前两篇文章Vue同构(一): 快速上手与Vue同构(二):路由与代码分割都取得了不错的反响(可能是错觉),前两篇文章本质上讲了如何在服务端渲染中使用Vue与Vue Router,基本的Vue全家桶中除了Vuex还没有讲,这篇文章也是围绕这个主题来讲的。引子 一直很认同Re转载 2021-02-22 19:29:47 · 249 阅读 · 0 评论 -
Vue同构(二): 路由与代码分割
前言首先欢迎大家关注我的Github博客,也算是对我的一点鼓励,毕竟写东西没法变现,能坚持下去也是靠的是自己的热情和大家的鼓励。上一篇文章Vue同构(一)我们介绍了如果使用Vue同构在服务端渲染一个简单组件并在服务端对应激活。对应的代码已经上传到Github。本篇文章我们介绍Vue同构中路由相关的知识。路由写到这里我们首先讨论一下为什么会需要有前端路由,为什么我们的程序中需要引入Vue-Router呢?其实最早的网站都是服务器渲染的,并不存在什么浏览器渲染。每次在浏览器导航栏输入对应的URL转载 2021-02-22 19:28:06 · 368 阅读 · 0 评论 -
Vue同构(一): 快速上手
前言 首先欢迎大家关注我的Github博客,也算是对我的一点鼓励,毕竟写东西没法获得变现,能坚持下去也是靠的是自己的热情和大家的鼓励。 同构(服务器渲染) Vue同构也就是我们常说的服务器渲染(Server Side Render),服务器渲染放在今天已经算不上是一个新鲜的东西了,从React到Vue都有各自的服务器渲染方案,很多小伙伴可能都有所接触,首先我们要了解一下为什么需要服务器渲染呢?Vue和React这类框架有一个特点,都属于浏览器渲染,比如一个最简单的例子: <转载 2021-02-22 19:25:50 · 299 阅读 · 0 评论 -
es6 import()函数
import()函数简介前面介绍过,import命令会被 JavaScript 引擎静态分析,先于模块内的其他模块执行(叫做”连接“更合适)。所以,下面的代码会报错。// 报错 if (x === 2) { import MyModual from './myModual'; }上面代码中,引擎处理import语句是在编译时,这时不会去分析或执行if语句,所以import语句放在if代码块之中毫无意义,因此会报句法错误,而不是执行时错误。也就是说,import和export命令.转载 2021-02-19 14:04:38 · 434 阅读 · 0 评论 -
Vue+Axios:使用拦截器来取消多次重复的请求
这篇博客主要解决问题1,即拦截相同url的axios请求,网上教程是一堆,但好像大家都是从同一份魔改出来的?因此我头皮发麻的想了好久,在思否的提问只有21个浏览...推荐阅读Axios的中文文档首先需要明白拦截器的工作原理,axios中内置了两个拦截器,请求拦截器与响应拦截器,分别通过以下两个方法调用axios.interceptors.request.use()axios.interceptors.response.use()拦截器的触发:对于单个请求来..转载 2021-01-06 17:01:00 · 702 阅读 · 0 评论 -
vue 前端
1、v-model是什么? vue中标签怎么绑定事件?答:v-model这个指令只能用在表单元素上,可以用他进行双向数据绑定。绑定事件:<input @click=doLog() />2、mvvm框架是什么?说说对双向数据绑定的理解?它和其它框架(jquery)的区别是什么?哪些场景适合?答:mvvm的m模型就是用来定义驱动的数据、v经过数据改变后的html、vm就是连接数据和视...转载 2020-04-20 16:36:45 · 1318 阅读 · 0 评论 -
vue 前端2
谈谈你对MVVM开发模式的理解MVVM分为Model、View、ViewModel三者。Model 代表数据模型,数据和业务逻辑都在Model层中定义;View 代表UI视图,负责数据的展示;ViewModel 负责监听 Model 中数据的改变并且控制视图的更新,处理用户交互操作;Model 和 View 并无直接关联,而是通过 ViewModel 来进行联系的,Model 和 V...转载 2020-04-20 16:39:11 · 100 阅读 · 0 评论 -
vuedraggable实现拖拽效果
工作中使用了基于vue的拖动组件vuedraggable,在这里进行一些总结。详细的官网案例:https://www.npmjs.com/package/vuedraggable1.简单的拖动使用<template> <div> <draggable @start="start" @end="end"> &l...转载 2020-04-20 16:01:38 · 2508 阅读 · 2 评论 -
MVVM 和 VUE
一,使用jquery和使用vue的区别二,对MVVM的理解三,vue中如何实现响应式四,vue如何解析模版五,vue整个实现流程 一,使用jquery和使用vue的区别jquery实现todo-list<!DOCTYPE html><html lang="en"><head><meta charset=“UTF...转载 2020-04-10 17:58:17 · 90 阅读 · 0 评论 -
axios添加axios.all和axios.spread方法,与promise.all
前言在官方 axios 中,还提供了 axios.all和axios.spread 这两个方法,这两个方法主要是为了执行多个并发请求,官方文档中,它们的用法示例如下:function getUserAccount() {return axios.get(’/user/12345’);}function getUserPermissions() {return axios.get(’...转载 2020-04-09 11:07:12 · 14994 阅读 · 0 评论 -
Vue vue生命周期
原文链接:https://blog.csdn.net/mqingo/article/details/86031260 [vue实例的生命周期](https://cn.vuejs.org/v2/...转载 2020-04-08 10:12:57 · 77 阅读 · 0 评论 -
vue-resource插件使用
本文的主要内容如下:介绍vue-resource的特点介绍vue-resource的基本使用方法基于this.$http的增删查改示例基于this.$resource的增删查改示例基于inteceptor实现请求等待时的loading画面基于inteceptor实现请求错误时的提示画面本文11个示例的源码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星转载 2017-05-25 09:51:24 · 423 阅读 · 0 评论