Umbrella_Um的博客

1.场景在处理列表时，常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。2.遇到的问题用 vue-router 重新路由到当前页面，页面是不进行刷新的采用 window.location.reload() ，或者 router.go(0) 刷新时，整个浏览器进行了重新加载，闪烁，体验不好3.解决方法provide / inject 组合作用：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。App.vue:声明

最近在项目中使用 elementui 中的table组件popover进行开发，官网的案例如果使用数据遍历，操作列使用 <template></template> 做 插槽的话就不行了。记录下解决办法：1. popover演示效果2. 解决办法如下在 el-popover 中加属性 :ref="popover-${scope.$index}"取消 el-button 按钮加 @click="scope._self.$refs[popover-${scope.$index.

在 style 经常用 scoped 属性实现组件的私有化时，要改变 element-ui 某个深层元素（eg:.el-input__inner）或其他深层样式时，需要使用 /deep/，如：.conBox /deep/ .el-input__inner{ padding:0 10px;}注意，/deep/ 在 vue 3.0或者新版scss-loader不支持 会报错如果 /deep/ 报错，可采用 ::v-deep ，效果基本一样，有人说 ::v-deep 能加快编译速度，但是我在网上

需求一：我需要在cascader级联选择后，拿到当前选择对象的其他参数信息，而不单单只获取到选择的value值如上图，ElementUI 提供了这个获取所选节点的信息函数 getCheckedNodes，正好解决了我需要当前节点的其他信息，不单单只是选择时返回的 value 值需求二：后端返回的数组，并不是cascader级联选择器默认的value，label，children怎么修改成当前的键值来循环呢？但至于怎么用，文档都没有给出例子，所以这里补充一下用法，直接上代码：<t

问题描述在做微信分享的时候有遇到过这样的问题，，第一次分享到微信，描述和图片都能正常显示，但是打开连接用微信自带的分享功能进行分享时，就会出现以下情况：描述变链接、图片不显示、标题变更。导致的原因实现微信分享需要调用JSSDK的两个分享接口，按照微信JSSDK最新JS 1.4.0文档上说： “原有的 wx.onMenuShareTimeline、wx.onMenuShareAppMessage 接口，即将废弃”。所以我们使用了最新的 wx.updateAppMessageShareData 、upd

https://www.cnblogs.com/liuyishi/p/9459289.htmlhttps://blog.youkuaiyun.com/xianchanghuang/article/details/104363955

vue cli 3:Invalid Host/Origin header error @client 解决办法：项目根目录下创建 vue.config.js , 添加配置如下：// vue.config.jsmodule.exports = { .... devServer:{ disableHostCheck:true }}

一开始的需求是这样子的，我为了实现两个页面组件之间的数据传递，假设我有页面A，点击页面A上的某一个按钮之后，页面会自动跳转到页面B，同时我希望将页面A上的某一些参数携带过去给页面B。（我知道，小参数的时候可以通过路由的params或者query去传参数，或者大型数据可以用vuex来处理，很遗憾我到现在还没有做很大型的项目，所以还没有用过vuex，接下来会学习一下。）然后我就想，这不就是不同组件之间的数据传递问题而已吗？直接用bus 巴士事件来传递数据不就行了吗。于是，我就很愉快地进行了。关于vue中的.

前言前端有时会有这样的需求：点击复制就可以复制对应的文案，这也是方便用户操作实现复制的目的，这里就整理一下实现该功能的使用方法及注意事项~~~document.execCommand相比用过这个 API 的多半是写原生 Aditor 编辑器的吧，他算是最早提供该支持的API了，API 里面有很多方法，如很常见的 加粗/斜体/字号/字体颜色/插入图片/插入链接/复制、剪切、撤销等等… 具体可以看 MDN而我们这里就来用用这个「复制」功能，废话不多说先上代码：function copy(text

出现这个报错，是你 @click 的方法没有在 methods 中定义，很奇葩的报错，竟然不会定向到具体哪行。

文章目录1.编写高质量可维护的代码之优化逻辑判断1.1JavaScript 语法篇1.1.1嵌套层级优化1.1.2多条件分支的优化处理1.1.3使用数组新特性简化逻辑判断多条件判断判断数组中是否所有项都满足某条件判断数组中是否有某一项满足条件1.2.1函数默认值使用默认参数使用解构与默认参数复杂数据解构1.3.1策略模式优化分支逻辑处理2.框架篇之 React JSX 逻辑判断优化2.1JSX-Control-StatementsIf 标签Choose 标签For 标签With 标签3.总结4.参考文献1

前言由于自身的项目比较简单，只有几个H5页面，用来嵌入app中，所有没有引入移动端的UI框架，但是介于能让用户在浏览H5页面时有下拉刷新和上拉加载，有更好的用户体验，自己写组件实现。1、下拉刷新 DropDownRefresh.vue<template lang="html"> <div class="refresh-moudle" @touchstart="touchStart($event)" @touchmove="touchMove($event)" @touch

一、需求分析在Vue构建的单页面应用（SPA）中，路由模块一般使用 vue-router 。vue-router 不保存被切换组件的状态，它进行 push 或者 replace 时，旧组件会被销毁，而新组件会被新建，走一遍完整的生命周期但有时候，我们有一些需求，比如跳转到详情页面时，需要保持列表页的滚动条的深度，等返回的时候依然在这个位置，这样可以提高用户体验。在Vue中，对于这种“页面缓存”的需求，我们可以使用 keep-alive 组件来解决这个需求。二、keep-alive定义keep-a

1.子组件给父组件传值-------------------父组件：----------------- <router-view @getShopCode='getShopCode'></router-view>methods:{ getShopCode(value){ conso.log(value); } }-------------------子组件：----------------- methods:{ goShop

vue页面开发中，我们经常需要根据路由的变化去实现一些操作，那么如何监听路由的变化呢？当然是利用vue中的 watch ，请看代码。一、监听路由从哪儿来到哪儿去在这里插入代码片

静态绑定内联样式v-bind:style 的对象语法十分直观，CSS属性名可以用 驼峰式 (camelCase) 或 短横线分隔 (kebab-case，记得用引号括起来) 来命名：<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>data: { activeColor: 'red', fontSize: 30}直接绑定到一个样式对象通常更好，这会让模板更清晰：

对象方法最简单的绑定（这里的active加不加单引号都可以，以下也一样都能渲染）:class="{ 'active': isActive }"判断是否绑定一个active:class="{'active':isActive==-1}" 或者:class="{'active':isActive==index}"绑定并判断多个------------------------- 第一种（用逗号隔开）--------------------------:class="{ 'act

在vue中，使用watch来响应数据的变化watch的用法大致有三种，下面代码是watch的一种简单的用法：<input type="text" v-model="cityName"/>new Vue({ el: '#root', data: { cityName: 'shanghai' }, watch: { cityName(newName, oldName) { // ... } } })直接写一个监听处理函数，当每次监

文章目录setState的定义及运行机制1. 合成事件中的setState2. 原生事件中的setState3. callback中的setState4. setTimeout中的setState5. setState中的批量更新总结参考setState的定义及运行机制在 React 日常的使用中，一个很重要的点就是，不要直接去修改 state。例如：this.state.count = 1是无法触发 React 去更新视图的。因为React的机制规定，一个state的更新，首先需要调用 setStat

一、父组件使用子组件的方法子组件 children.vue子组件： 在子组件中定义好给父级调用的方法即可 childMethod()<template> <div>我是子组件Children</div></template><script> export default { data(){ retu...

前端在进行资源文件上传的时候，可以借助HTML5中，fileReader对象进行图片和文件的上传。利用该对象提供的一些属性方法更加方便的获取所上传的文件信息。在vue项目中操作方法如下：（1）绑定input[type=‘file’]的change事件<input @change="uploadPhoto($event)" type="file" class="kyc-passin"&gt...

vue之 el-form表单之自定义正则表达式：基本的表单属性name、password、phone、peopleID、carID、email、address…如下演示：vue.js export default { name: "form", data() { //ip地址校验 var IPValidator = (rule, value, c...

需要考虑的问题Vue中获取DOM节点元素涉及请求数据如何确认数据到达再去渲染DOM节点涉及图片加载渲染的，如何监听DOM渲染完毕再去计算元素高度（Bug：如果涉及图片加载的，在网络不快的情况下，Vue中拿到的当前含有图片的元素的高度是不正确的，会影响后续的瀑布流布局）如何实现根据设备屏幕大小来自动计算当前瀑布流卡片的宽度，并且可自定义距离屏幕边距以及卡片与卡片元素间的距离（自定义拓展）...

① 面包屑的使用格式：<当前城市定位>美团 > <当前城市定位><所在城市地区名>HTML：使用E-UI的面包屑页面代码https://element.eleme.cn/#/zh-CN/component/breadcrumb这种有静态属性的拼接，为了避免浏览器重绘闪动，使用ssr去服务端渲染； <div class="m-crumbs...

切换城市实现图：组件化结构，使用多组件页进行合并拼凑：省市二级联动如何做？依靠E-UI完成界面后，我们开始写逻辑交互：最后完成的template：<div class="m-iselect"> <span class="name">按省份选择：</span> <el-select v-model="pvalue" pla...

都是类比巩固 …↓ 在server/interface中创建接口search.js来搭建关于搜索推荐的接口/** * descripe: 搜索栏及推荐列表的接口设置 * author: umbrella * date: 2018-6-28PM21:39:01 * --------------------说明----------------------- * --koa-router路...

编写城市服务类接口查询类接口开始 → 数据库导入操作步骤：① 打开下载好的Robo 3T，首次右键New Connection点击create Database穿件② 进入对应的数据源文件夹，通过命令导入对应的数据源导入成功后可以回到robomongo界面：③ 项目中使用接口签名实现去搭建好的服务端拿对应的接口数据签名sign怎么获取？这里注意一下：现在服务端已经...

Register中的sendMail方法在这里插入代码片

xxxx

需求分析 >> 模板设计（总体分析）需求分析 >> 组件设计(城市服务组件)topBar>>公共组件如上面两个图的请求完成该流程都是发送两个请求才能完成从请求到拿到数据的过程，其中可以使用vuex+ssr来减少一次请求！埋下三个问题，后续记录！searchBar>>布局使用element-ui里的layout布局即可需求：...

项目依赖版本，最好安装这个版本安装，为最稳定nuxt的升级2.0.0使用下面命令安装npx@10.2.0$ npm install -g npm $ npx create-nuxt-app <project-name>注意这里有个报错处理：npx create-nuxt-app …时报错 安装 create-nuxt-app@latest 失败解决：① 亲测先安...

开篇图示：vue的生命周期我们可以到官网看一下 生命周期图：（Ps：看不太清的可以点上面的链接，去官网看哈~）生命周期函数和钩子函数是干什么的？使用vue框架，需要在合适的时机做合适的事情，了解了vue对象的生命周期和钩子函数，才能知道，哪些事情应该咋哪个函数里做·····························································...

解决报错You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.报错图示：报错解析：就...

如果已经安装了vue-devtools可以不看这部分先介绍三种安装vue-devtools的方法：① 可以直接去chrome商店下载该插件（科学上网）② 事实上并不是都可以科学上网的，所以又不想找梯子，也不想npm install的，这里就给你们准备了大礼-------------------------------------------------5.1.0--------------...

大家好，我是小伞，下面是自己对Vue.js源码中new Vue()部分的整理，如有错误欢迎点出哦。源码直通车vue.js源码github直通车：https://github.com/vuejs/vue正题引入在 Vue.js 中我们可以采用简洁的模板语法来声明式的将数据渲染为 DOM：<div id="app"> {{ message }}</div>v...