- 博客(26)
- 收藏
- 关注
RSS订阅原创 vue项目中引入jQuery
1.安装jquery依赖包npm install jquery -S2.在vue.config.js中引入jq插件 configureWebpack: { plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "windows.jQuery": "jquery" }) ] },3.在main.js中引入jq
2021-01-18 16:22:17
309
原创 PS 图片添加水印
文件 - 新建 ：(宽度 高度 透明度) 点击确定文字编辑 - 写需要添加的水印内容 ctrl+t----自由变换 然后 点击鼠标右键 点击旋转 点击鼠标左键鼠标右键点击整体图层 选中混合选项 选中描边 然后填写大小 位置 混合模式 选中颜色 点击确定编辑 – 定义图案ctrl+o(打开图片) 编辑 填充(选择自定义图片找到之前设置的)点击确定，就是最终结果或者编辑 – 定义画笔预设 - ctrl+o 打开图片 直接点击画笔 选中之前设定的画笔样式，可以随机更换前景色后景.
2020-09-03 17:56:01
351
转载 vue 事件修饰符
冒泡与捕获冒泡 由里向外捕获 由外向里<div class="aa" style='width:200px;height:200px;background:red;overflow:hidden;' @click='asd'> <div class="" style='width:100px;height:40px;background:pink;margin-left:30px;margin-top:20px;' @click='fgh'>&...
2020-08-27 13:51:11
105
转载 Vue 刷新当前页面
方法一window.location.reload()方法二this.$router.go(0)方法一和方法二是会出现一瞬间的白屏，用户体验不好，这里推荐第三种，亲测好用在app.vue的加上v-if属性<router-view v-if="isRouterAlive"></router-view>在data里面加上isRouterAlive,当然这个属性名可以自己定义，默认值为truedata () { return { isRoute
2020-08-13 16:41:05
117
原创 v-cloak
v-cloak: 使用 v-cloak 指令可以有效解决屏幕闪动。v-cloak不需要表达式，它会在vue实例结束编译时从绑定的html元素上移除，经常和display:none;配合使用：<div id="app" v-cloak> <div :style="{'color':color,'fontSize':fontSize+'px'}">文本</div> {{message}}</div>new Vue({ el:'#app',
2020-08-03 18:52:13
140
转载 vue中watch的使用
在vue中，使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种简单的用法：<input type="text" v-model="cityName"/>new Vue({ el: '#root', data: { cityName: 'shanghai' }, watch: { cityName(newName, oldName) { // ... } }})直接写一个监听处理函数，当每次监听
2020-08-03 18:38:44
143
原创 深拷贝与浅拷贝
简单描述：普通类型:let aa = 1let bb = aaconsole.log(Object.is(aa, bb)) //truelet arr = [1, 2, 3, 4, 5]let arr1 = arrarr1[2] = '6'console.log('原数组：' + arr) //1,2,6,4,5console.log('新数组：' + arr1)//1,2,6,4,5浅拷贝的时候如果数据是基本数据类型，那么就如同直接赋值那种，会拷贝其本身，如果除了基本数据类型之外还
2020-07-28 10:19:03
82
原创 ES6 对象的扩展
ES5判断两个值是否相等:1.相等运算符（==）2.严格相等运算符（===），二者都有缺点前者会自动转换类型，后者的NaN不等于自身，+0不等于-0Object.is(),用来比较两个值是否严格相等，与严格运算符基本一致，解决了+0===-0 NaN ===NaNObject.assign()用于对象的合并，将原对象的所有可枚举性复制到目标对象。Object.aggign()实现的是对象的浅拷贝，而不是深拷贝。也就是说,如果原对象某个属性的值是对象，那么目标对象拷贝得到的就是这个对象的引用.
2020-07-27 15:22:33
80
原创 封装Storage的方法
// 存储export function setStorage(key, value) { localStorage.setItem(key, JSON.stringify(value))}// 取出数据export function getStorage(key) { return JSON.parse(localStorage.getItem(key))}// 删除数据export function removeStorage(key) { localStorage.re.
2020-07-27 14:33:39
315
转载 JS的节流与防抖
函数防抖是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。这可以使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求。// 函数防抖的实现function debounce(fn, wait) { var timer = null; return function() { var context = this, args = arguments; // 如果此时存在定时器的话，则取消之前的定时器重新记时 i
2020-07-27 11:49:05
76
转载 JS 方法封装
获取指定范围内的随机数const getRandom = (min = 0, max = 100) => { if (typeof min !== 'number' || typeof max !== 'number') { throw new Error('Argument(s) is illegal !') } if (min > max) { [min, max] = [max, min] } return Ma..
2020-07-27 11:09:31
116
原创 JS 隐式类型转换
javascript中的运算，如果运算符两边的数据类型不一样，那么就会将运算符两边的数据类型转换成一样的，然后进行运算。console.log(2 + '1')输出 21解析:任何非字符串与字符串相加，都会先隐式转换为字符串，然后再相加在js中，+有两种应用场景，一种是字符串拼接，一种是数值运算符，但减号不一样，减号要么表示负数，要么是数值运算符。console.log(2 - '1')输出 1解析:在数值运算时，任何非数值都会通过Number(value)转换为数值，加
2020-07-27 10:00:37
154
原创 弹性盒模型 列表实现
方法一(这种方法常见于一行展示三个或四个):<div class="box"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div>
2020-07-23 13:41:55
230
转载 vue 数据赋值了 但是视图没有更新
针对对象的特定方法<template> <div> <div> <span>用户名: {{ userInfo.name }}</span> <span>用户性别: {{ userInfo.sex }}</span> <span v-if="userInfo.officialAccount"> 公众号: {{ userInfo.officialAcc
2020-07-20 16:05:00
4812
转载 vue 项目中生产环境 去除console.log
在开发环境写了很多console.log/infi/debugger,在生产环境需要去掉这些console.log。如果手动删除太累了，再说，以后想在开发还得重新写consolewebpack提供了删除console.log的插件，在vue-cli3中是这样用的:首先安装terser-webpack-pluginnpm install terser-webpack-plugin -Dvue.config.js 写插件的配置（此处是直接修改webpack的配置）:module.exp.
2020-07-20 14:14:17
2363
2
原创 css实现倒三角
width: 40px;height: 40px;border: 40px;border-style: solid;border-color: red green blue brown;三角形:width: 0;height: 0;border: 50px;border-style: solid;border-color: red green blue brown;倒三角就是把其他边取消掉
2020-07-17 17:51:49
250
原创 vue页面特定区域生成PDF
下载依赖//将页面html转换成图片npm install --save html2canvas//将图片生成pdfnpm install jspdf --save引入依赖import html2Canvas from 'html2canvas'import JsPDF from 'jspdf'将特定部分转为PDF//将特定部分转成pdf并下载getPdf () { var title = this.title; html2Canvas(document.querySelec
2020-07-17 17:32:11
759
原创 vue 事件总线 eventBus
父组件向子组件传递参数用v-bind子组件向父组件传递参数用this.$emit兄弟组件传参eventBus或者是用vuex进行传递下边说说eventBus首先在src的assets的目录下新建一个vue-bus.js文件import Vue from 'vue'export default new Vue()兄弟组件a组件import Bus from '@/assets/js/vue-bus.js'methods: { handlerClick(event) { Bus.$
2020-07-14 17:22:30
186
原创 vue 模块自动化加载 require.context
import Vue from 'vue'const requireComponent = require.context( // 其组件目录的相对路径 './', // 是否查询其子目录 true, // 匹配基础组件文件名的正则表达式 /\w+\.vue$/)requireComponent.keys().forEach(fileName => { // 获取组件配置 const componentConfig = requireComponent(file
2020-07-08 16:42:02
534
原创 vue 插槽
简介插槽就是子组件中提供给父组件的一个占位符，用<slot></slot>表示，父组件可以在这个占位符中填充任何模板内容，如html、组件等，填充的内容会替换子组件的<slot></slot>标签没有使用插槽的：**没有使用插槽的：**//子组件<template><div class=""></div></template>//父组件<template lang="html.
2020-07-07 17:27:53
89
原创 vue 混入
简介主要是来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项，当组件使用混入对象时，所有混入对象的选项将被‘混合’进入组件选项。// 定义一个混入对象var myMixin = { created: function () { this.hello() }, methods: { hello: function () { console.log('hello from mixin!') } }}// 定义一个使用混入对象的组件v
2020-07-07 11:41:32
82
原创 vue eslint
eslint 安装全局安装npm i -g eslint(npm install -global)项目安装npm i -D eslint(npm install --save-dev eslint)编辑器安装在 Atom 编辑器中，安装插件 linter 和 linter-eslint。eslint配置环境：你的脚本会在哪种环境下运行。每个环境带来了一组特定的预定义的全局变量。全局变量：脚本运行期间会访问额外的全局变量。规则：使用那些规则，并且规则的等级是多少。e
2020-07-06 16:29:41
145
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人