- 博客(67)
- 资源 (1)
- 收藏
- 关注
RSS订阅转载 element ui 按需导入的配置方法
首先，关于 element-ui 我使用的导入方式是 npm 安装，最开始的引入方式也是官方文档上的全部引入，在这里就不多说了，接下去多说说按需引入时碰到的问题，以及我是怎么解决我的问题的。然后是将.babelrc 文件进行修改，这里我一直找不到这个文件在哪，最后直接修改了 babel.config.js 也是能实现按需引入的。然后将 babel.config.js 的 “es2015” 修改成 “@babel/preset-env”，修改过后重新启动就可以了。
2023-03-08 21:20:23
1526
原创 如何将大小不一的行内元素（文字）水平方向 居中对齐
实现水平方向对齐，注意只能设置在行内元素或者行内块元素中。由于无法设置margin想要实现水平居中只能使用。
2023-03-07 10:07:35
357
原创 js中常见的错误类型
ReferenceError引用错误 console.log(a); // a is not defined引用一个没有定义的属性会出现此错误 TypeError 类型错误/ let num = 123 // num() // 只有函数类型才能使用小括号/一个值 对他调用了不属于他的语法 会出现此错误SyntaxError 语法错误 // let a - 2RangeError数值不在其所允许的范围递归中会出现此错误...
2021-01-24 17:28:10
172
原创 JS合并数组 对象
合并数组使用concat合并对象使用Object.assign // 合并两个数组 --- 如果参数为空 返回副本 不是引用 let arr1 = ['red', 'green', 'blue'] let arr2 = [1, 2, 3] let allArr = arr1.concat(arr2) allArr // ["red", "green", "blue", 1, 2, 3] // 合并两个对象 --- 浅拷贝 let obj1 =
2021-01-07 13:04:11
308
原创 检查属性在Object中的存在性
in 操作符会向上查找原型链* hasOwnProperty 只会检查当前对象不查找__proto__ let o = { name: 'fj', age: 18 } /** * in 操作符会向上查找原型链 * hasOwnProperty 只会检查当前对象不查找__proto__ */ console.log('age' in o); // ture console.log('value
2021-01-06 15:10:25
108
原创 作用域插槽
作用域插槽常用场景是父组件使用插槽时需要子组件的数据时 <slot v-bind:todo="todo"></slot>在子组件中动态绑定一个传出的值在solt 的模板中使用 v-slot:具名插槽的名字=”传出的值“<template v-slot:default="{todo}"> <ul> <li v-for="(item,index) in todo" :key="index" v-if="item.isOve
2020-12-22 16:03:34
109
原创 使用Object.definProperty定义可遍历的对象
let myObj = { a: 2, b: 3 } Object.defineProperty(myObj, Symbol.iterator, { enumerable: false, writable: false, configurable: true, value: function () { var o = this; var idx = 0; var ...
2020-12-21 14:23:04
199
原创 let 声明的变量不会绑定在window中
function foo() { console.log(this.a); //此时的this 指向window中 } var a = 2; foo()此时的foo调用之后可以打印2 如果var 改为let 声明就访问不到
2020-12-20 22:15:07
365
3
原创 [[1, 2], [3, 4]].map(([a, b]) =＞ a + b)返回[3,7]的原因
要理解[[1, 2], [3, 4]].map(([a, b]) => a + b)这段代码首先理解一下map内部的运行机制思考以下代码 let arr = ['val1', 'val2', 'val3'] arr.map((item, index) => { console.log(item); // 每次遍历打印: val1 , val2 , val3 console.log(index); // 每次遍历打印: 1 , 2 , 3 })
2020-11-30 14:37:59
404
原创 理解sort中的比较函数
数组的sort()方法sort()方法是数组自带的一种排序方法，为了实现排序sort方法会默认调用每个数组项的toString转型方法然后比较得到的字符串sort方法接收一个比较函数，比较函数有两个参数，如果第一个参数应该位于第二个参数之前则返回负数，如果相等返回0，如果第一个参数应该位于第二个参数之后则返回正数1.当元素为字符串时比较元素的第一位，第一位相同后比较第二位var arr = ["cb","a","g","cy"];arr.sort();console.log(arr); //
2020-11-25 21:03:15
2014
2
原创 v-for遍历对象
v-for遍历对象时 第一个参数是值(value) 第二个参数是对象的键(key) <div id="vm"> <div v-for="(value,key) in obj"> {{value}} {{key}} </div> </div> <script> let app = new Vue({ el: "#vm", data: { obj: {
2020-11-23 20:03:51
1018
原创 Vue watch监听器的两种写法
// $watch 是一个实例方法vm.$watch('a', function (newValue, oldValue) { // 这个回调将在 `vm.a` 改变后调用})
2020-11-23 18:58:29
1310
原创 跨域资源共享cors在express中的写法
// 跨域资源app.use("*", function (req, res, next) { res.header("Access-Control-Allow-Origin", "*"); //*号代表所有都跨域访问 res.header("Access-Control-Allow-Headers", "X-Requested-With"); res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
2020-11-22 19:54:48
153
原创 数组操作方法
数组迭代方法every 查询数组中的所有项是否满足某个条件返回值 全部满足返回true 否则返回false实例 var arr = [1, 2, 3, 4, 5, 4, 3, 2, 1] let flag = arr.every(item => item > 2 ); console.log(flag); //falsesome 查询数组中是否有满足的项只要有一个满足条件则返回true实例 var arr = [1, 2, 3,
2020-11-21 16:14:35
101
原创 数组位置方法
位置方法ES5提供了两个位置方法分别是 indexOf() 和 lastIndexOf()区别是 indexOf 从数组的起始位置查找 lastIndexOf 从数组末端开始查找查找是按照 === 三个等号的严格相等进行查找返回值查找到 返回数组下标没有找到 返回-1实例var arr = [1, 2, 3, 4, 5, 4, 3, 2, 1]console.log(arr.indexOf(4, 4)); //结果打印5第一个参数代表要查找的值 第二参数代表查找起始位置...
2020-11-21 16:03:21
370
原创 Math.random自定义随机范围
最小范围 + Math.random() * (最大范围-最小范围)1 + Maht.random() *( 9 - 1) /* 1 - 9 的随机数 */
2020-11-18 14:05:24
338
原创 && || 的运算规则
//&& 是找假 fn && fn()//如果第一个数转换后的值为false，则直接返第一个数， 不管第二个数是真还是假；否则执行并返回第二个数// || 是找真fn || fn()// 如果fn 是true 如果第一个是真则直接返回第一个数 ...
2020-11-17 16:17:29
675
原创 第三方模块bcrypt 的使用
// 生成随机字符串 保存在salt中const salt = await bcrypt.genSalt(10);// 对密码加密const password = await bcrypt.hash(req.body.password, salt);// 将原来的密码替换成加密后的密码req.body.password = password;bcrypt 比对密码 // compare 方法返回一个Boolean值 比对成功返回true 比对失败返回false // 第一个
2020-11-17 16:14:28
195
原创 js中apply和call的区别
apply ：阅读js高级程设笔记使用apply改变this指向，并调用有两个参数第一个参数是this指向谁，第二参数是一个数组用于传递参数第二参数可以是argument function showSum(num1, num2) { console.log(this, num1 + num2); } let arr = [3, 4] showSum.apply(new Date(), arr)//第二行打印结果 Sun Nov 08
2020-11-17 16:08:35
120
原创 alias别名的用法
build 目录下找到 webpack.base.conf.js 配置文件 resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': resolve('src'), 'components': resolve('src/components'), 'assets': resolve('src/assets'), 'views': resolve('src/views'),..
2020-10-20 16:08:44
182
原创 安装Vue脚手架的npm命令
安装脚手架3npm install @vue/cli -g安装脚手架2npm install @vue/cli-init -g
2020-08-03 19:26:48
608
原创 Vue中v-for如何才能做到响应式
<body> <div id="vue"> <ul> <li v-for="item in arr">{{item}}</li> </ul> <button @click="onClick">按钮</button> </div> <script> const app = n..
2020-07-27 07:24:59
1188
原创 VueJs中 v-bind指令 的用法
v-bind 可以实现动态改变属性的属性值1.基础用法：后期可以通过操作app.msg动态改变src的属性值 <div id="ve"> <!-- 冒号是v-bind是简写 --> <img :src="msg"> </div> <script> const app = new Vue({ el: '#ve', data:
2020-07-25 15:58:05
328
1
原创 Vue基本指令 v-once v-html v-text v-pre v-cloak
1.v-once可以使渲染的数据不会动态发生改变 <div id="ve"> <!-- v-once 不会响应式 --> <div v-once>{{msg}}</div> </div><script src="js/vue.js"></script><script> var app = new Vue({ el: '#ve',
2020-07-24 08:36:29
128
原创 使用babel编译es6语句
1.安装node.js初始化项目 npm init -y2.安装babel-clinpm i @babel/core @babel/cli @babel/preset-env -Dnpm i @babel/polyfill -S3.在package.js中添加执行脚本script{“build”:“babel src -d dest”}4.添加 .babelrc 配置文件{“presets":["@babel/preset-env"]}5.执行编译npm run build
2020-07-23 14:17:37
120
原创 客户端模板引擎向模板内部开放一个外部变量用于操作数据
固定写法 // 向模板内部开放一个外部变量 template.defaults.imports.dataFormat = dataFormat;//配置完之后定义该方法然后用参数的形式将data传递出来 {{each info}} <tr> <th>{{dataFormat($value.update_time)}}</th> <th>{{$v
2020-07-22 15:50:57
162
原创 安装谷歌浏览器扩展程序
首先打开谷歌浏览器插件配置地址：chrome://flags/#extensions-on-chrome-urls配置选项设置为启用更改下载好的插件的后缀改为zip后缀最后拖动至
2020-07-17 17:53:55
194
原创 使用FormData上传二进制文件&进度条的制作
1首先获取到上传文件的控件 // 获取文件选择控件 var file = document.getElementById('file');2.获取到文件的方法//文件控件.files[0]返回该文件 file.files[0]3.然后给文件控件添加事件并把文件使用Ajax传递到服务器端注意要用post请求方式file.onchange = function () { // 创建空的formData表单对象 var formData = new FormData(); //
2020-07-09 19:40:04
458
原创 FormData的具体应用
使用FormData首先需要有一个form表单 不用写请求地址和请求方式 <!-- 创建普通的html表单 --> <form id="form"> <input type="text" name="username"> <input type="password" name="password"> <input type="button" id="btn" value="提交"> </form>获取元素// 获
2020-07-09 19:26:25
210
原创 客户端使用art-template模板引擎的方法
第一步去art-template的官网下载 模板引擎的js库文件并将文件引入到页面中 <!-- 将模板引擎的库文件引入到页面中 --> <script src="../js/template-web.js"></script>第二步写一个script标签并设置id属性<!-- 2.准备art-template模板 --> <!-- id用来区分 --> <script type="text/html" id
2020-07-04 21:46:47
285
原创 Ajax怎么处理错误
网络畅通，服务器端能接收到请求，服务器端返回的结果不是预期结果。 可以判断服务器端返回的状态码,分别进行处理。xhr.status获取http状态码网络畅通, 服务器端没有接收到请求，返回404状态码。检查请求地址是否错误。网络畅通, 服务器端能接收到请求,服务器端返回500状态码。//Ajax错误处理app.get('/error',(req,res)=>{//要先改状态码再send res.status(400).send('hello');}) var b.
2020-07-04 08:41:51
626
原创 利用Ajax状态码获取服务器端的响应
Ajax状态码是什么？在创建Ajax对象，配置Ajax对象，发送请求，以及接收服务端响应数据，这个过程的每一个步骤对应一个数值，这个数值就是Ajax状态码0 未初始化1 请求已经建立但是还没有发送没有调用send2 请求已经发送3 请求正在处理中已经有部分可以用了4 请求已经完成可以获取并使用服务器响应了xhr.readyState // 获取Ajax状态码onreadystatechange //当Ajax状态码发生改变时触发该事件 //创建Ajax对象 var xh
2020-07-03 22:50:18
283
原创 Ajax提交json请求
get请求不能提交json设置请求头 告诉服务器端 客户端传递过来的请求参数是json格式 xhr.setRequestHeader('Content-Type','application/json')<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i
2020-07-03 19:17:01
525
原创 使用Ajax传递post请求参数
post请求必须在请求报文中明确设置请求的类型 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');post请求要写在send方法里//post请求要把请求参数写在send方法中 xhr.send(parase);<!DOCTYPE html><html lang="en"><head> <meta charset="UTF
2020-07-03 17:54:01
3448
原创 使用Ajax传递get请求参数
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <p>
2020-07-03 17:34:10
7916
原创 Ajax获取到的数据默认格式
客户端代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <s
2020-07-03 16:12:08
480
原创 Joi第三方模块的使用
//导入第三方模块const Joi = require('joi');module.exports = async (req, res) => { //定于对象的验证规则 const schema = { uname: Joi.string().min(2).max(10).required().error(new Error('用户名不合法')), email: Joi.string().email().required().error(new
2020-06-28 17:00:34
1108
原创 express中session的基本使用
第一步下载第三方模块npm install express-session配置模块//引入session第三方模块const session = require('express-session');//配置session模块app.use(session({secret:'secret key'}));使用//引入框架const express = require('express');//创建路由const admin = express.Router();//集合构造函数
2020-06-28 10:07:41
271
原创 serializeArray()方法获取到空数组
该方法是获取表单中输入的内容获取到了空数组有可能是因为input元素中没有设置name属性实例function serializeArrayToJson(form){ var obj = {}; var f = form.serializeArray(); f.forEach(function(item){ obj[item.name] = item.value; }) return obj; }...
2020-06-26 16:12:27
942
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人