日暮途远人间何世？-CSDN博客

原创 vue3.0项目创建并集成vue-router、vuex

vue3.0项目创建vue-clinpm i -g @vue/cli@next本地的vue-cli需要删除并重启电脑新建项目会有vue3选项，如果需要其他配置，需要选择第三个选项手动选择。vite使用vite速度更快$ npm init vite-app project-name$ cd project-name$ npm i$ npm run dev路由npm安装npm i vue-router@next创建路由文件/* 从路由中导入createRouter c

2021-06-01 16:07:18 492

原创二次封装element-ui分页器

<template> <div :class="{ hidden: hidden }" class="pagination-container"> <el-pagination :background="background" :current-page.sync="currentPage" :page-size.sync="pageSize" :layout="layout" :total="total" v-bind="$attrs" @size-change=

2020-11-20 14:07:46 318

原创通过v-model绑定父子组件，最方便的组件通信

最近在做的一个项目少说要有几十个下拉选择框，于是我就对element-ui的下拉框进行了二次封装，但是在使用时候发现了一个问题，每个组件都需要提交一个事件来同步在父组件表单中绑定的对象，特别繁琐。于是我就想到用v-model来绑定父父组件的值，在子组件直接改变，而不是再提交事件到父组件去改变。逻辑很简单，直接上代码父组件<template><div class="home"> <Child v-model="value" /></div>&l

2020-11-05 18:27:03 319

原创 element-ui动态增加表单项并验证

先来上图，默认效果如图所示然后点击添加按钮输入框是动态添加，并且结果表是通过是否加工控制DOM元素的加载。点击删除回到最初。下面上代码template <el-form-item id="make_group" v-for="(item, index) in ruleForm.group" :key="index" :class="ruleForm.group.length > 1 ? 'active' : ''">

2020-11-05 15:54:48 1436 4

原创 element表格分页选中、限制多选条数

1. 在标签上添加row-key，值可以是你在当前表格里面循环数组的任意唯一值，我这里是id<el-table row-key="id" ref="multipleTable" @selection-change="handleSelectionChange" ></el-table>2. 在多选列上面添加:reserve-selection=“true”，在数据更新之后会保留当前选中的数据<el-table-column type="selection" width=

2020-10-28 18:43:37 3549

原创 vue自定义下拉框组件

<template> <div v-show="isShow"> <div class="pull_down_container" :style="{top:top,left:left,right:right,height:height}"> <slot name="pullDown"></slot>  &lt

2020-09-28 11:52:07 436 1

原创获取小程序页面路径

第一步：进入小程序后台，点击工具，点击生成小程序码第二步：输入小程序appID，然后下一步第三步：鼠标移动到获取更多页面路径，然后输入当前小程序的开发者微信号第四步：进入虎牙小程序。点击左上角更多，然后复制链接复制出来的链接要把.html删除...

2020-09-28 11:48:16 2890 1

原创 JS时间转换多久之前

// 时间格式转换 time(Array){ let showTime //后台返回的数组遍历数组得到每个对象 Array.forEach(ele => { // 获取时间戳 let oldTime = new Date(ele.articleTime).getTime() let time = new Date().getTime() let difference = time - oldTime

2020-09-28 11:34:47 232

原创 vue-amap使用

引入vue-amap安装npm install vue-amap --save引入import VueAMap from 'vue-amap';配置key和插件VueAMap.initAMapApiLoader({ key: '高德地图key', //插件 plugin: [ 'AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.M

2020-09-23 14:19:03 954

原创 element表格出现多余横线（线条）问题解决

app.vue加入以下样式就看不到了body .el-table::before { z-index: inherit;}

2020-09-16 13:56:01 3047 3

原创 vue锚点定位+滚动效果

码以备用只有向上没有向下的定位和滚动locationAnchor() { setTimeout(() => { // 获取dom let cateItem = document.querySelectorAll(".active"); let tempTop = cateItem[0].offsetTop - 10; // 距离细化 let step = tempTop / 50; //

2020-08-23 15:48:56 1046

原创 Vue异步组件加载（代码+注释）

<template> <div class="home">  <button @click="onClick">点击切换组件</button>  <component :is="componentId"></component> </div></template><scr

2020-08-19 23:03:39 140

原创 superMap简单地图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body {

2020-08-18 16:29:49 466

原创 JavaScript 数据类型判断

数据类型JavaScript的数据类型分为基本数据类型和引用数据类型两种基本数据类型NUmberStringBooleanundefinedSymbolnull引用数据类型ObjectObject包含function，Array，Date等。一、typeoftypeof用来判断基本数据类型，返回值是数据类型typeof只能用来判断基本数据类型，对于引用数据类型来说只会返回一个Object（function会返回function）。在 JavaScript 中二进

2020-08-04 22:32:11 313

原创前端面试题总结

这两天电话面试了两家公司，总结一下遇到的面试题ES6新增的一些特性新增了块级作用域，let和const新增了class用来定义类新增了一种基本数据类型symbol，symbol表示独一无二,允许设置默认值，不能用new关键字新增了结构赋值新增了箭头函数，引入了rest参数函数允许设置默认值新增了set和map数据结构set可以用来快速去重map的特点就是key可以是任意类型新增了模块化，import导入和export导出。数组新增了一些api，如 isArray（判断是否为数

2020-07-30 21:03:48 177

原创前后端分离？

前后端分离出现的背景在以前的项目开发过程中，后端开发一直都是开发团队的核心，前端甚至被称为页面仔。顾名思义，就是前端的工作就是写写静态页面交给后端去套模板。在以往的项目中，大部分前后端都是高耦合的，虽然这明显不符合开发过程中经常会提到的高内聚低偶合。但是在以前互联网不是那么繁荣的年代，发挥着巨大的作用。但是随着技术的发展，页面越来越复杂，还是按照以往的方式来开发的话，因为耦合度太高，会极大的拖延项目开发的进度。这时候主要是前端还没有提出模块化，可复用化的开发理念或者思想，后来随着JS提出模块化之

2020-07-13 08:09:00 90

原创防抖节流函数

/* * 函数防抖* 函数节流*//* * 函数节流* fn 需要进行节流的函数* delay 节流期限制*/export const throttle = (fn, delay) => { // 初始化上次调用时间 let last = 0 // 以闭包的方式来实现 return function(){ // 保存参数 let args = arguments let now = +new Date

2020-06-25 21:45:00 256

原创五分钟学VUE会移动端拖拽事件

给标签绑定事件，组件标签需要.native修饰符<Suspend class="suspend_box" @mousedown.native="down()" @touchstart.prevent.native="down()" @mousemove.native="move()" @touchmove.prevent.native="move()" @mouseup.native="end()" @touchen

2020-06-23 22:35:33 1281

原创 http协议

http简介HTTP协议（HyperText Transfer Protocol，超文本传输协议）是因特网上应用最为广泛的一种网络传输协议，所有的WWW文件都必须遵守这个标准。HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）。他不关心数据传输的细节，主要是用来规定客户端和服务端的数据传输格式。最初是用来向客户端传输html页面的内容。默认端口是80。HTTP三点注意事项HTTP是无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求

2020-06-20 22:03:29 142

原创 Event Loop事件循环机制

EventLoopJavaScript是一种单线程语言，所有任务都在一个线程上完成。即代码执行是同步并且阻塞的。Event Loop 就是为了确保异步代码可以在同步代码执行后继续执行的Event Loop即事件循环，指浏览器或者node执行环境下的一种解决JavaScript单线程运行时不会发生阻塞的一种机制。也是我们常说的异步执行的原理。***Wikipedia***对Event Loop的定义a programming construct that waits for and dispatch

2020-06-20 11:33:02 223

原创 vue中使用moment.js

moment.jsMoment.js 是一个轻量级 JavaScript 日期处理类库，提供了日期格式化、日期解析等功能。它支持在浏览器和 NodeJS 两种环境中运行。此类库能够将给定的任意日期转换成多种不同的格式，具有强大的日期计算功能，同时也内置了能显示多样的日期形式的函数。另外，它也支持多种语言，你可以任意新增一种新的语言包。npm下载moment.jsnpm install moment --savevue文件中使用moment首先封装一个时间过滤器文件dateFilter.js

2020-06-18 21:02:10 495

原创动态语言概述

动态语言脚本语言又被称为扩建的语言，或者动态语言，是一种编程语言，用来控制软件应用程序，脚本通常以文本（如ASCII)保存，只在被调用时进行解释或编译。（弱类型语言）动态语言特点动态语言(JavaScript，VBscript等)介于HTML和C,C++,Java,C#等编程语言之间。　HTML通常用于格式化和链接文本。而编程语言通常用于向机器发出一系列复杂的指令。动态语言与编程语言也有很多相似地方，其函数与编程语言比较相像一些,其也涉及到变量。与编程语言之间最大的区别是编程语言的语法和规则更为严

2020-06-18 20:10:19 272

原创 formData方法以及异步上传文件

FormDataFormData 接口提供了一种表示表单数据的键值对的构造方式，经过它的数据可以使用 XMLHttpRequest.send() 方法送出，本接口和此方法都相当简单直接。如果送出时的编码类型被设为 “multipart/form-data”，它会使用和表单一样的格式。FormData方法append()向 FormData 中添加新的属性值，FormData 对应的属性值存在也不会覆盖原值，而是新增一个值，如果属性不存在则新增一项属性值。formData.append("key

2020-06-17 23:02:40 808

原创 Redux

Redux的核心原理1.将组件的状态统一进行管理管理，由store来管理state。2.reducer的作用是返回一个新的state去更新store中对用的state。3.按redux的原则,每一次状态的改变都应通过提交action去触发，action传入对应的reducer 中，reducer返回一个新的state更新store中存放的state。4.subscribe是为store订阅监听函数，这些订阅后的监听函数是在每一次dipatch发起后依次执行5.redux避免了数据在组件之间流通导致

2020-06-12 22:52:17 104

原创 webpack babel-loader一些配置属性

初始化项目npm init安装webpacknpm i webpack webpack-cli --save-d安装babel-loadernpm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack// 导入静态资源目录const path = require('path')module.exports = { // 指定开发环境 mode:"development",

2020-06-11 22:35:32 256

原创 vue传递token信息到后台

login.vue// 登录方法 submitForm(ruleForm) { this.$refs[ruleForm].validate(valid => { if (valid) { // 调用登录接口传递用户信息到后台获取数据 Login(this.ruleForm.username, this.ruleForm.password) // 成功回调 .then(re.

2020-06-11 22:27:02 1723

原创 vue自定义指令

vue自定义指令**vue除了默认的指令，还允许设置自定义指令 directive **。自定义指令的使用场景不多，但是如果我们需要直接操作DOM就可以用到它。自定义指令分为全局自定义指令和局部自定义指令全局自定义指令场景：输入框默认选中场景//mian.js注册全局自定义指令//使用Vue.directive来新建一个全局的自定义指令，第一个参数focus是指令名称//第二个参数是一个对象，对象内使用了一个inserted钩子函数，el参数表示了绑定了这个指定的DOM元素//指令名在

2020-06-10 19:53:54 89

原创 vue路由拦截之响应拦截使用

/* * 新建配置响应拦截文件* routerGuard.js*/// 设置路由拦截// 引入路由页面import router from "./index"// 本地存储的getItem方法import {GET,SET} from "../appLocation/localManager"// 登录的api接口import {userInfo} from "../network/requestData"// 路由守卫router.beforeEach((to,from,n.

2020-06-09 20:10:27 239

原创 vue响应式原理

要了解vue响应式原理首先应该知道什么是响应式<template> <div> <div> {{user.name}} </div> <button @click="onClick"> 更改 </button> </div></template><script>data() { ret

2020-06-09 19:01:18 600

原创 vue指令

vue提供了很多的指令，使用这些指令能够更加方便我们进行编程v-textv-text 能够整体更新节点的内容，如果需要部分更新则需要用{{textContent}}插入<template> <div> <span v-text="msg" ></span> || 上下两种写法作用相同 <span>{{msg}}</span> </div></t

2020-06-09 18:54:48 147

原创 Promise

PromisePromise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API(应用程序接口)，各种异步操作都可以用同样的方法进行处理。Promise对象有以下两个特点对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）和Rejected（已失败）。只有异步操作的结果

2020-06-08 21:29:53 100

空空如也

空空如也