- 博客(31)
- 收藏
- 关注
RSS订阅原创 Vue常用指令
Vue常用指令总结v-once表示元素或组件只渲染一次，后面修改的都不再进行渲染v-text用于输出文本v-html用于输出 html 代码v-for循环（迭代数组；迭代对象中的属性；迭代数字）v-if根据表达式的值的真假条件（使dom元素销毁或重建）v-else-if必须和 v-if 连用v-else必须和 v-if 连用v-show根据表达式的真假（切换元素的 display css属性） 经常切换某个元素的显示/隐藏时，则使用 v-shou 会更加节省性能
2020-12-16 09:56:21
271
转载 使用Vue.observable()进行状态管理
随着组件的细化，就会遇到多组件状态共享的情况， Vuex当然可以解决这类问题，不过就像 Vuex官方文档所说的，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，今天我们介绍的是 vue.js 2.6 新增加的 Observable API ，通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况。observable()方法，用于设置监控属性，这样就可以监控viewModule中的属性值的变化，从而就可以动态的改变某个元素中的值，监控属性的类型不变量而是一个函数，通过返回一个函数给vie
2020-11-30 14:09:16
524
转载 vue之props、属性、事件传递:$props、$attrs、$listeners
使用介绍:v-bind="$props": 可以将父组件的所有props下发给它的子组件,子组件需要在其props:{} 中定义要接受的props。vm.$props: 当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。官方介绍v-bind="$attrs": 将调用组件时的组件标签上绑定的非props的特性(class和style除外)向下传递。在子组件中应当添加inheritAttrs: false(避免父作用域的不被认作props的特性绑定应用在子组件的根
2020-11-30 13:34:45
895
原创 vue之hook使用
记录一下vue中hook的两点使用1.在同一个组件中例如：在mounted中添加一个监听需要在beforeDistroy中移除这个监听，考虑到某些原因你不想再写个beforeDistroy去实现，这时候绿巨人hook就该登场了！mounted(){ window.addEventListener('online',this.handleOnline) this.$once('hook:beforeDestroy',function() { window.removeEven
2020-11-30 10:38:09
2007
原创 微信小程序防抖和节流封装的轮子
轮子.js//common.js/*函数节流*/function throttle(fn, interval) { var enterTime = 0; //触发的时间 var gapTime = interval || 300; //间隔时间，如果interval不传值，默认为300ms return function() { var that = this; var backTime = new Date(); //第一次函数return即触发的时间 if(backTime -
2020-11-17 13:30:48
388
原创 js数组深度去重
数组对象深度去重var arr = [ {id: 1, name: '周瑜1'}, {id: 3, name: '王昭君1'}, {id: 2, name: '李白1'}, {id: 1, name: '周瑜2'}, {id: 2, name: '李白1'}, {id: 3, name: '王昭君2'}];let newobj = {}; arr = arr.reduce((preVal, curVal) => { newobj[curVal.name] ? ''
2020-11-17 11:25:13
335
原创 htmlcss的一些样式
一条两头尖的线条<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width:200; height:2px; background: -webkit-linear-g
2020-11-17 11:19:59
221
原创 移动端适配方法之flexible.js
flexible.js ;(function(win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc.querySelector('meta[name="viewport"]'); var flexibleEl = doc.querySelector('meta[name="flexible"]'); var dpr = 0; va
2020-11-17 11:08:26
208
转载 微信小程序之函数防抖/函数节流（轮子封装）
前言函数节流是减少函数的触发频率；函数防抖是延迟函数执行，且不管触发多少次都只执行最后一次。函数防抖延迟函数执行。多用于 input 框输入时，显示匹配的输入内容的情况。函数节流单位时间 n 秒内，第一次触发函数执行之后不管用户触发多少次都不会执行。到下一个单位时间 n 秒时，第一次触发函数执行。多用于页面 scroll 滚动，窗口 resize，防止按钮重复点击等。源码小程序中使用函数防抖节流一般都将这两种方法封装在公用 js 里。//common.js/*函数节流*/
2020-10-27 15:11:35
685
1
原创 总结一些Vue的性能优化
代码优化模块化、组件化- 组件是把常用的东西封装起来，最重要的就是复用。- 模块是把同一功能或业务的代码进行分离，降低模块间的耦合性，可以独立运行和管理。- 包括css也可以通过less和sass来减少重复代码。v-for 的 key在使用v-for渲染元素列表时，为每一项都设置唯一的key值，为了让Vue内部更快的定位到该条数据。我们都知道尽量不要使用index下标作为key值，例如：let arr = [ { id: 1, title: 'one' }, { id:
2020-08-28 10:00:32
448
1
原创 Vue技术进阶
1.深层选择器有时，你需要修改第三方组件的CSS，如果您希望scoped样式选择器是“较深的”，即影响子组件，则可以使用>>>组合器：<style scoped>.a >>> .b { /* ... */ }</style>一些预处理器（例如Sass）可能无法>>>正确解析。在这些情况下，您可以改用/deep/或::v-deep组合器-两者都是它们的别名，>>>并且工作原理完全相同。<styl
2020-08-20 14:08:56
228
原创 css优惠卷样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>内圆角</tit
2020-08-19 17:11:42
309
原创 iframe标签使用之Vue事件触发传值
首先先介绍一下 ififrame 传递消息的关键方法 postMessagepostMessage的使用一、简介postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递postMessage(data,origin)方法接受两个参数：data ：要传递的数据，html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点儿，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使
2020-08-18 14:03:10
2409
原创 介绍reduce
reduce用法详解reduce() 方法接收一个函数作为累加器，reduce为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（上一次回调的返回值），当前元素值，当前索引，原数组语法: arr.reduce(callback, [initialValue])callback: 函数中包含四个参数- previousValue (上一次调用回调返回的值，或者是提供的初始值 ( initialValue))- currentValue (数组中当前被
2020-08-14 14:58:13
521
原创 精度计算，优秀的代码
精度计算 加减乘除// 精度计算export const calc = { // 加 plus(...args){ const {pow} = this.base(args); const result = args.reduce((a,b) => a + b); const max = pow.length ? Math.max(...pow) : 1; const maxPow = Math.pow( 10, ma
2020-08-14 10:46:38
293
转载 vue-cli解析
前言这篇文章的主题是vue-cli的理解。或许，很多人在开发vue的时候，我们会发现一个问题——只会去用，而不明白它的里面的东西。现在的框架可以说是足够的优秀，让开发者不用为搭建开发环境而烦恼。但是有时候，我们还是得回到原始生活体验一下，才能够让自己更上层楼，希望大家共勉。正文首先，我们来说一下安装的东西吧！处于有头有尾的目的，还是几句话草草了事。步骤如下：安装vue-clinpm install vue-cli -g以webpack模版安装目录vue init webapck webpac
2020-08-13 13:39:40
483
翻译 websocket的简单使用
1、maven项目，第一步需要配置jar包<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency>2、前台使用var websocket = null;//判断当前浏览器是否支持WebSocketif('WebSocke
2020-08-11 10:16:08
278
原创 vue中 Vue.set 的使用
vue中 Vue.set 的使用Vue.set(vm.items, indexOfItem, newValue)1、vm.items ：源数据；2、indexOfItem : 要修改的数据的键3、newValue : 要修改的数据let a = [ {name:'张三',age:'20',sex:1}, {name:'李四',age:'21',sex:0}, {name:'王五',age:'22',sex:1},]此时要修改李四的 age 为 19 ，如果直接修改
2020-08-11 09:54:16
690
原创 很简单的数组去重
let arr = [1,2,3,4,5,2,4,3] function Uniq(arr = []) { return arr.reduce((t, v) => t.includes(v) ? t : [...t, v], []); } console.log(Uniq(arr))
2020-08-07 18:09:54
162
原创 javaScript 利用迭代器实现 数组扁平化
转载网上大佬 function *flatten(arr) { for (const item of arr) { if (Array.isArray(item)) { yield *flatten(item); } else { yield item; } } } const result = [...flatten([1,2,[3,
2020-08-07 17:55:10
286
原创 检测数组中出现最多次数的元素及次数
检测数组中出现最多次数的元素及次数有个Bug，如果刚好有两个或者两个以上的最多次数，这个只能找到第一次的 let arr1 = [1,2,2,3,4,5,6,6,7,7,7,7,7,7,7]; let arr2 = [1,2,2,2,3,3,4,7,7,4,3,3,1]; function getMaxAmount(data){ let obj = {}; data.forEach(val => { obj[val
2020-08-07 17:37:17
899
原创 Vue之axios 请求拦截 封装
utils >request.jsimport axios from 'axios';import { MessageBox, Message } from 'element-ui';import store from '@/store';import { getToken } from '@/utils/auth';// 创建一个 axios 实例const service = axios.create({ baseURL: process.env.VUE_APP_BASE_AP
2020-08-04 10:34:10
365
原创 Krpano 全景图简单制作
全景图制作图片要求 宽是高的2倍图航拍图 地埋图主思路添加热点主界面的场景跳转主界面与子界面间的跳转VTour Editor 操作：load tour.xml # 加载文件 tour.xmlSet as startup view # 设置为启动试图Add hotspot # 添加热点Edit hotspot # 编辑热点Edit tour.xml # 编辑 tour.xmlSave tour.xml # 保存 tour.xm
2020-08-04 10:32:36
1356
转载 JavaScript常用数组操作方法，包含ES6方法
1. concat()concat()方法用于连接两个或多个数组。该方法不会改变现有的数组，仅会返回被连接数组的一个副本var arr1 = [1,2,3];var arr2 = [4,5];var arr3 = arr1.concat(arr2);console.log(arr1); // [1,2,3]console.log(arr3); // [1,2,3,4,5]2. join()join()方法用于把数组中所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的，默认使用’,'号
2020-08-04 10:29:45
399
原创 element-ui上传图片小demo
以后再具体编辑文字。。。功能上传标题上传简单文本上传图片查询图片 图片回显等上传图片，需要转成base64格式图片回显，返回的图片url是一个字符串，如果是多张记得截取一下，存到一个数组里:file-list="fileList" ，返回的图片path 记得拼接端口号哦 ! https... + path下面是代码<!DOCTYPE html><html lang="en"><head> <meta c
2020-07-30 17:29:37
575
原创 深拷贝和浅拷贝之 Immutable
深拷贝是拷贝数据的值, 浅拷贝是拷贝数据的地址.值传递和引用传递.值传递: var a = 10; var b = a; b += 20 ; console.log(a,b) // 10 30引用传递: var arr = [10,20,30,40]; var newArr = arr; newArr[0] = 100; console.log(arr,newArr) ...
2020-03-25 18:57:00
507
原创 前端开发Vue之状态管理模式——Vuex
什么是vuex? vuex的作用?Vuex 简单来说就是全局状态管理, 当遇到多个组件共享状态时,多层组件的传值非常繁琐,不利于维护,因此把组件的共享状态抽取出来,以一个单例模式管理,这种模式下 不管在哪个组件都可以获取状态或触发行为. 如果需要构建一个中大型的项目,再使用vuex 如果简单直接使用父子传值 或非父子传值。Vuex中的 5个重要属性state : 辅助函数是 mapSta...
2020-03-01 20:55:25
460
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人