- 博客(51)
- 收藏
- 关注
RSS订阅转载 10分钟让你了解vue2和Vue3的写法上去的区别（有vue2基础）
因为第一种写法的学习负担更小，先学第一种方式，掌握最基本的 Vue 用法，然后再根据我这篇文章，快速掌握 Vue3 里最需要关心的内容。实际上这些心智负担，在学习的过程中，是可以完全不需要考虑的。本质上是第二种写法的语法糖，掌握了这种写法，其实第二种写法也基本上就会了。所以我们需要关心的，就是 Vue2 里的内容，怎么用 Vue3 的方式写出来。第一种写法，跟过去 Vue2 的写法是一样的，所以我们不过多介绍。剩下的在 Vue2 里是怎么写的，Vue3 是同样的写法。但是我的建议是，你不需要关心它。
2023-08-11 14:26:08
1022
1
转载 常用的八个vue自定义指令
在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。Vue自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过 Vue.directive( id, [definition] ) 方式注册全局指令。然后在入口文件中进行 Vue.use() 调用。批量注册指令，新建 directives/index.js 文件import copy from '
2022-02-24 14:21:36
618
转载 16个工程必备的JavaScript代码片段(项目常用)
1. 获取文件后缀名使用场景：上传文件判断后缀名/** * 获取文件后缀名 * @param {String} filename */ export function getExt(filename) { if (typeof filename == 'string') { return filename .split('.') .pop() .toLowerCase() } else
2021-08-30 10:45:23
325
转载 ES6- reduce 数组API优雅的解决一些常见问题
它特点之一是将当前计算结果作为下一次的入参，就像一个管道（pipeline），适合应用在连续、累加计算的场景。求解数组最大值acc 是上一次的计算结果，即两数较大值。function MaxInArr(arr) { try { return arr.reduce((acc, cur) => Math.max(acc, cur)); } catch (error) { return null }}复制代码多维数组展开function fla
2021-06-02 16:26:38
281
转载 vue+px2rem实现pc端大屏自适应(rem适配)
配置前言项目构建：基于vue-cli3构建，使用postcss-px2rem px2rem-loader进行rem适配实现原理：每次打包，webpack通过使用插件postcss-px2rem，帮我们自动将px单位转换成rem单位前方有坑：UI框架部分组件使用JavaScript将css作为内联样式直接写在html标签内，打包适配时不会读取相关css,所以要配置相关样式，在style中需要" !important "进行样式覆盖。第一步，安装postcss-px2rem及px2rem-loader
2021-03-29 10:12:41
1093
转载 JS数组Arry 操作方法速记
JS 数组includes 方法 解析：Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。[1, 2, 3].includes(2); // true [1, 2, 3].includes(4); // false [1, 2, NaN].includes(NaN); // true 该方法的第二个参数表示搜索的起始位置，默认为 0 。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长...
2021-01-26 14:25:05
272
转载 Vue2.4中$attrs和$listeners的使用
inheritAttrs：默认值true,继承所有的父组件属性（除props的特定绑定）作为普通的HTML特性应用在子组件的根元素上，如果你不希望组件的根元素继承特性设置inheritAttrs: false,但是class属性会继承（简单的说，inheritAttrs：true 继承除props之外的所有属性；inheritAttrs：false 只继承class属性）attrs−−继承所有的父组件属性（除了prop传递的属性、class和style），一般用在子组件的子元素上，如第一个例子的<
2021-01-14 13:50:48
348
原创 VUE中常用的几种import（模块、文件）引入方式
（1）引入第三方插件代码如下：import echarts from 'echarts'（2）引入工具类1.第一种是引入单个方法代码如下：导入：import {axiosfetch} from './util';需要export导出:export function axiosfetch(option){}2. 第二种导入成组的方法代码如下import * as tools from './libs/tools'其中tools.js
2021-01-07 10:04:26
1702
1
原创 开发项目应用到js函数方法 map() reduce() filter() ...扩展运算符 应用总结
一、概念map()方法定义在JavaScript的Array中，它返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。注意：map()不会对空数组进行检测 map()不会改变原始数组 let index = arry.map(item=>{return {name:item,six:0}}) 二、语法 array.map(function(currentValue, index, arr), thisIndex) 参数说明： function(cur
2020-11-13 15:37:55
321
转载 js异步处理Promise.all()使用方法
在实际项目中，可能会遇到 需要从前两个接口中的返回结果获取第三个接口的请求参数这种情况。 也就是需要等待两个/多个异步事件完成后，再进行回调。对于异步回调，首先想到的就会是使用Promise封装，然后使用.then()来触发回调。那么对于两个或多个异步事件均完成后再触发回调可以使用Promise.all()方法。**Promise.all(iterable)**方法返回一个Promise实例，此实例在iterable参数内所有的promise都“完成（resolved）”或参数中不包含...
2020-10-28 10:25:22
1313
转载 vue中 this.$set的用法详解
当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。<template> <div id="app"> <p v-for="item in items" :key="item.id">{{item.message}}</p> <button class="btn" @click="handClick()">更改数据</button>
2020-10-20 17:27:30
7646
1
转载 ES6 Object.assign()的用法
方法：Object.assign()作用：将sourse对象的值赋值给目标对象，两者都有的会覆盖，target独有会保留，sourse独有会添加使用方法：Object.assign方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。var object1 = { a: { b: 1 } };ar object2 = Object.assign({}, object1);object1.a.b = 2;console.log..
2020-10-20 17:09:39
652
转载 前端SKU算法的实现
实现效果预览实现思路对于前端来说，如果没真的做过SKU，可能并不会了解到它的复杂之处，仔细观察，小小的规格选择，却包含着很多实现细节难点，这里提供一种实现思路供大家参考。1. 获取后端数据这里以7七月老师提供的商品数据为例，由于数据过长，这里只贴出sku_list中的一条数据，这条数据格式也是整个实现过程中最重要的数据格式。 { ... sku_list: [ { "id":2, "price...
2020-09-21 11:37:50
3743
原创 前端sku-spu详解
什么是SKUSKU (stock keeping unit):存货单位/库存单元，定义为库存管理中的最小可用单元。(参考维基百科)既然维基百科称SKU为存货单位，那代表的也应该是一个单位，不是具的数量，就像cm、m、km、元、角、分、件、箱一样，cm不是1cm也不是10cm。它也有单位所拥有的特征，我们具体来看看吧这是某东macbook pro产品页的截图，红色框内有两个属性选择颜色和选择版本,只有两个属性分析起来也是比较简单的了。我们来看看SKU是个什么样的单位,这里任意的颜色与版本.
2020-09-21 11:34:16
1508
转载 JS中的async/await的用法和理解
1、首先需要理解async 和 await的基本含义 async 是一个修饰符，async 定义的函数会默认的返回一个Promise对象resolve的值，因此对async函数可以直接进行then操作,返回的值即为then方法的传入函数// 0. async基础用法测试async function fun0() { console.log(1) return 1}fun0().then( x => { console.log(x) }) // 输出结果 1，..
2020-09-18 16:00:48
22387
2
转载 es6中promise的实现及原理
promise原理其实，promise就是三个状态。利用观察者模式的编程思想，只需要通过特定书写方式注册对应状态的事件处理函数，然后更新状态，调用注册过的处理函数即可。这个特定方式就是then，done，fail，always…等方法，更新状态就是resolve、reject方法。/** * Promise类实现原理 * 构造函数传入一个function，有两个参数，resolve：成功回调; reject：失败回调 * state: 状态存储 [PENDING-进行中 RESOLVE.
2020-09-17 10:00:03
425
原创 Webpack漫谈
1. 核心概念 entry：入口。webpack是基于模块的，使用webpack首先需要指定模块解析入口(entry)，webpack从入口开始根据模块间依赖关系递归解析和处理所有资源文件。 output：输出。源代码经过webpack处理之后的最终产物。 loader：模块转换器。本质就是一个函数，在该函数中对接收到的内容进行转换，返回转换后的结果。 因为 Webpack 只认识 JavaScript，所以 Loader 就成了翻译官，对其他类型的资源进行转译的预处理工作。
2020-09-03 17:31:22
129
原创 个人对vuex的理解
简述对vuex的理解Vuex是什么？ Vuex是vue框架的状态管理工具 如何使用vuex 在main.js中引入store，新建store文件夹引入 state getters mutations actions; vuex的属性 有五种属性，State，Getter，Mutation，Action，Module。 （1）State特性： 存储数据，存储状态。将vuex比作一个仓库，仓库里面存放许多对象。而state就是数据源的存放地，对应vue...
2020-09-03 17:03:50
259
转载 vue插槽的理解和使用
什么是插槽？插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。如下代码：1. 在子组件中放一个占位符2.在父组件中给这个占位符填充内容：3.展示的效果现在来看看，如果子组件中没有放插槽，同样的父组件中在子组件中填充内容，会是啥样的：1. 子组件代码无插槽...
2020-07-01 11:10:22
731
转载 vue @scroll 事件
vue 的 scroll 事件做首页按需加载的时候滚动条滚动到底部之后加载由于如果绑定在window上，那么路由切换之后，事件依然会被触发，所以在div元素上绑定(如果绑定在window上，那么在导航守卫里，路由离开的时候解绑就行了，一样可以实现功能）在元素标签上直接绑定 scroll 事件<div class="home-test" @scroll="scrollGet($event)"> ...</div>如果发现事件无效，那么可能div...
2020-06-22 15:16:00
791
转载 前端常用60余种工具方法
1.邮箱export const isEmail = (s) => { return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)}2.手机号码export const isMobile = (s) => { return /^1[0-9]{10}$/.test(s)}3.电话号码export const isPhone = (s) =...
2020-06-03 11:55:42
136
原创 滚动条高度-页面禁止滚动与复原
滚动条高度 document.body.scrollTop = document.documentElement.scrollTop = 0; 2.页面禁止滚动与复原进行网页开发的时候，我们往往需要限制用户在一段时间内不可以操作滚动条。这样可以防止一些非法操作。所以可以这样控制：document.documentElement.style.overflow='hidden';document.body.style.overflow='hidden';//手机版设置这个。1...
2020-06-03 09:59:00
359
原创 js 获取当前时间的类型
vard=newDate();vardate=d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"日";varmyDate=newDate();myDate.getYear();//获取当前年份(2位)myDate.getFullYear();//获取完整的年份(4位,1970-????)myDate.getMonth();//获取当前月份(0-11,0代表1...
2020-05-25 17:06:44
222
转载 iframe在Vue中的应用
最近写项目，遇到一个问题，那就是如何把vue项目和H5页面嵌套在一起呢？看似风马牛不相及，万万没想到，还有个iframe在候着呢！真是JS解决不了的，可别忘了还有标签呢！步入正题：一、介绍：HTML 中的<iframe> 标签iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。所有浏览器都支持 <iframe> 标签。二、使用...
2020-04-28 11:24:22
9511
转载 git commit之后后面的操作步骤
git commit后面的操作步骤1 按下小写字母i，会进入编辑模式。输入你想要的 message2 按下esc退出编辑模式3 按下英文输入法下的冒号4 再输入wq，就可以保存退出了，w是write，q是quit。4.1 也可以在按esc退出编辑模式以后，切换到大写模式，连按两下Z。...
2020-04-24 16:06:42
1532
转载 vue路由按模块拆分配置
1.问题通常我们编写vue路由配置都会写在 /src/router/index.js 这个文件下。但是，随着我们的vue项目变得越来越大后，路由也随之变得越来越多，出现的问题就是我们所有的路由都定义在一个文件下，代码会变得可读性差，难以维护。 如下图所示。image.png2.通过拆分vue路由配置文件形成多个路由模块比如说我们可以在 /src/router/ 目录下面...
2020-04-18 17:25:14
846
转载 jquery 60s倒计时
前端开发中经常用到的发送按钮倒计时，每次都是重写，挺麻烦的，记录一下，以后直接来复制代码<!DOCTYPE html><html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta co...
2020-04-14 14:58:25
257
转载 vue 移动端video标签视频播放的解决方案
先讲我的问题吧首先相信都遇到过 安卓手机在微信中播放视频 结束时被强制嵌入广告的问题吧。我反正是遇到过两次了。原因可能是因为安卓在微信里使用的是QQ浏览器吧。（这里我真的是不敢确定的哈，只是在qq浏览器里打开页面也是和微信打开的一样而已。）下面献丑的来说下我的情况和思路首先我这边是在列表页里有个预告片。期初的想法是直接点击预告片就在当前页面利用video标签来播放。但是这样安卓和苹果手...
2020-03-27 11:57:28
3721
原创 .vue中如何解决页面不重新渲染问题
(1).修改对象属性后页面未重新渲染可以使用 this.$set(对象名称, '属性名', '属性值')(2).使用this.$forceUpdate()方法可重新渲染页面
2020-03-23 15:35:10
1749
原创 vue-bus实现兄弟组件通讯
一、为什么要使用vue-bus？学习vue的开发者都知道，父子组件的直接的通讯直接使用vue提供的props属性和emit方法。props接受来自父组件的参数，emit将子组件的参数传递给父组件。这样一来父子组件之间的参数传递就得到了解决。（之前做项目的时候看到$parent和$children也可以进行父子组件和兄弟之间的参数传递，但是不提倡，原因在于如果组件想要替换位置就有问题）。那么...
2020-03-23 15:10:49
699
原创 /deep/ 深度选择器
vue组件中，在style设置为scoped的时候，里面在写样式对子组件是不生效的，如果想让某些样式对所以子组件都生效，可以使用 /deep/ 深度选择器。<-- less语法 -->.wrap{ .class1{ font-size:12px; } /deep/ .class2{ font-size:20px; //对所有...
2020-01-07 16:59:01
390
转载 user-select的详细用法
前言做网页的时候，有些文字我们需要能被选中，有些我们不要能被选中，那么这就需要用到一个css属性了，那就是 user-select使用方法user-select: none|auto|text|contain|all; /*firefox浏览器*/-moz-user-select: none|text|all; /*safari、chrome浏览器*/-webkit-us...
2020-01-06 15:33:52
851
转载 vue使用this.$refs.xx在mounted中获取DOM元素为undefined
（1）原因：如果在 DOM 结构中的某个 DOM 节点使用了v-if、v-show或者v-for（即根据获取到的后台数据来动态操作 DOM，即响应式），那么这些 DOM 是不会在mounted阶段找到的。mounted 阶段，一般是用于发起后端请求，获取数据，配合路由钩子做一些事情。简单来说就是在 mounted 钩子中加载数据而已，加载回来的数据是不会在这个阶段更新到 DOM 中...
2019-12-19 11:59:06
3573
原创 vue 常用过滤器
文字长度过滤，超过5个字 ...ellipsis5 (value) {if (!value) return ''if (value.length > 5) {return value.slice(0,5) + '...'}return value}//过滤 年/月/日export function changeTime(input){if(inp...
2019-12-12 18:55:18
103
原创 vue中watch的用法
一、首先确认watch是一个对象，一定要当做对象来用 1 2 3 watch:{ } 对象：有键，有值。 1、键：就是你要监控的那个家伙，比如说$route，这个就是要监控路由的变化。或者是data中的某个变量。 2、值： ① 可以是【函数】：就是当你监控的家伙变化时，需要执行的函数，这个函数有两个形...
2019-12-12 15:08:14
21085
转载 JSON.parse()与JSON.stringify()的区别
JSON.parse()【从一个字符串中解析出json对象】例子：//定义一个字符串var data='{"name":"goatling"}'//解析对象JSON.parse(data)结果是：name:"goatling"JSON.stringify()【从一个对象中解析出字符串】var data={name:'goatling'}JSON.str...
2019-12-11 15:44:53
66
转载 隐藏实力的 JSON.stringify，原来还可以这么用
基本用法JSON.stringify 方法接受一个参数并将其转换成JSON 字符串形式。const firstItem = { title: 'Transformers', year: 2007 };JSON.stringify(firstItem);// {'title':'Transformers','year':2007}复制代码当出现一个不能序列化成 ...
2019-11-29 17:39:27
149
原创 JS 常用方法（二）
编写一个方法 去掉一个数组的重复元素//es6var arr = [1,2,3,4,3,2,1];arr1 = [...new Set(arr)];//answer one:function removeCommon(){ var json = {}; for (var i = 0; i < str.length; i++) { json[str[i]] = s...
2019-11-29 17:35:45
65
原创 JS 对象，数组，字符串常用方法汇总
* 字符串的常用属性:* .length------>字符串的长度* .charAt(索引),返回值是指定索引位置的字符串,超出索引,结果是空字符串* .fromCharCode(数字值,可以是多个参数),返回的是ASCII码对应的值* .concat(字符串1,字符串2,...);返回的是拼接之后的新的字符串* .inde...
2019-11-29 17:34:19
240
原创 JS通用方法汇总
1、判断字符串是否数值*** 判断字符串是否数值* @param str 字符串* @param isInt 是否是整数* @param allowNegative 是否允许负数* @author sunchangtan* @returns {*}* @private*/function _validateNum(str, isInt, allowNegati...
2019-11-29 17:16:04
162
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人