hello_dashen-CSDN博客

原创文件 API

7. 文件 API7.1. 读取本地文件信息文件域对象可以获取用户选择文件的信息：文件名最近修改时间文件大小文件类型var input = document.querySelector('#input_1');var file = input.files[0];file.name // 获取文件名file.lastModifiedDate // 获取最近修改时间file.size // 获取文件大小（单位KB）file.typ

2022-03-15 10:34:57 523

原创什么是render: h=＞ h(App)

什么是render: h=> h(App)=> 是ES6的箭头语法// ES5 (function (h) { return h(App); }); // ES6 h => h(App); render: function (createElement) { return createElement(App);}// 进一步缩写为(ES6 语法)：render (createElement) { return createEleme

2022-03-13 21:19:48 451

原创 Parsing error:x-invalid-end-tag

Parsing error:x-invalid-end-tag原因：iView将标签渲染为原生html标签时，有些标签是自闭合的，比如input，所以有end标签会报错。解决1：去掉end标签解决2：修改配置文件，忽略该项检查：根目录下 - .eslintrc.js - rules添加一行：“vue/no-parsing-error”: [2, { “x-invalid-end-tag”: false }]...

2022-03-13 21:14:40 2896

原创 Do not use ‘new‘ for side effects

错误提示 Do not use ‘new’ for side effects方法一：在new Vue上加/* eslint-disable no-new */, 这句注释可以绕过规则检测/* eslint-disable no-new */new Vue({ el: '#app', router, components: { App }, template: '<App/>'})方法二let vm = new Vue({ router, el:

2022-03-13 21:08:20 1205

原创 No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.

No ‘Access-Control-Allow-Origin’ header is present on the requested resource.跨域请求出错，在config/index.js中// 代理配置表，在这里可以配置特定的请求代理到对应的API接口// 例如将'localhost:8080/api/xxx'代理到'www.example.com/api/xxx'proxyTable: { '/api': { // 匹配所有以 '/api'开头的请求路径 ta

2022-03-13 21:03:51 462

原创 [eslint] Unexpected template string expression.

[eslint] Unexpected template string expression.ES6的新语法，小撇号必须使用Tab上面的撇号，不能用引号，否则会报错export const reqAddress = (geohash) => ajax(`/position/${geohash}`)

2022-03-13 21:03:11 1505

原创 expected “indent“, got “eos“

混用空格和tab键造成的代码需要规范，注释:// 后面空一格再写注释文件的最后一行要是个空行用来结尾，否则报错：Newline required at end of file but not foundvue文件的<template></template>只能有一个根文件，报错：Component template should contain exactly one root element.在编写stylus样式的时候，切记按着格式编写，如果运行的时候没有报错，但是样式

2022-03-13 21:02:13 1548

原创 vue项目加webpack相关

webpack配置webpack.config.js：'use strict';const path = require('path')const htmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: { main: './src/main.js' // main是默认入口,也可以是多入口 }, // 出口, 所有产出资源路径 output: {

2022-03-11 16:55:42 818

原创 vue基础

vue介绍核心概念: 组件化双向数据流 (基于ES5中的defineProperty来实现的) IE9才支持export default框架：export default { // 对象 data() { // 函数 return { // 对象 isRed: false, stus: [{name:'jack',score:'A'},{name:'rose',score:'B'}

2022-03-11 16:54:54 460

原创 jQuery

基本概念使用javascript开发jQuery1. 查找元素的方法太少，麻烦1. 查找元素的方法多种多样，非常灵活2. 遍历伪数组很麻烦，通常要嵌套一大堆的for循环2. 拥有隐式迭代特性，因此不再需要手写for循环了3. 有兼容性问题3. 完全没有兼容性问题4. 想要实现简单的动画效果，也很麻烦4. 实现动画非常简单，而且功能更加的强大5. 代码冗余5. 代码简单、粗暴【02-让div显示与设置内容.html】$(document).rea

2022-03-09 15:17:31 105

原创 h5 缓存机制

浏览器缓存机制http缓存指的是: 当客户端向服务器请求资源时，会先抵达浏览器缓存，如果浏览器有“要请求资源”的副本，就可以直接从浏览器缓存中提取而不是从原始服务器中提取这个资源。常见的http缓存只能缓存get请求响应的资源浏览器缓存机制是指通过 HTTP 协议头里的 Cache-Control（或 Expires）和 Last-Modified（或 Etag等字段来控制文件缓存的机制。总结协议缓存有效时间标识位辅助无修改有修改优先级http 1.1Cache-

2022-02-22 20:42:33 3842

原创面向对象游戏案例：贪吃蛇

功能实现搭建页面放一个容器盛放游戏场景 div#map，设置样式#map { width: 800px; height: 600px; background-color: #ccc; position: relative;}分析对象游戏对象蛇对象食物对象创建食物对象Food属性xywidthheightcolor方法render 随机创建一个食物对象，并输出到map上创建Food的构造函数，并设置属性v

2022-02-18 15:55:48 214

原创 vue3.0

创建vue3项目1、vue-cli## 安装或者升级npm install -g @vue/cli## 保证 vue cli 版本在 4.5.0 以上vue --version## 创建项目vue create my-project然后的步骤Please pick a preset - 选择 Manually select featuresCheck the features needed for your project - 选择上 TypeScript ，特别注意点空格是选择，点

2021-09-28 18:47:07 1453 1

原创 typescript

安装安装npm install -g typescript检测安装是否成功tsc -V编译手动编译对于 xxx.ts 文件，执行tsc xxx.ts输出为 xxx.js 文件，将ts文件里面的代码转成js代码通过node.js 运行代码node xxx.js自动编译1). 生成配置文件tsconfig.json tsc --init2). 修改tsconfig.json配置 "outDir": "./js", ts文件编译后的js文件会在./js目录

2021-08-20 18:13:03 112

原创圣杯布局与双飞翼布局的区别

相同点实现效果：两边顶宽，中间自适应的三栏布局，中间栏在放在文档流前面以优先渲染。实现技术：三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。不同点 - 解决 “中间栏div内容不被遮挡” 问题圣杯布局<div class="center">...</div>将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配

2021-08-05 22:12:30 87

原创双飞翼布局

双飞翼布局<div class="middle"> <div class="center"> <div class="center-inner"> center 1、上部和下部各自占领屏幕所有宽度 2、上下部之间的部分是一个三栏布局 3、三栏布局两侧宽度不变，中间部分自动填充整个区域,中间盒子优先渲染 4、中间部分的高度是三栏中最高的区域的高度 </div> </div

2021-08-05 19:15:13 78

原创圣杯布局 - float flex grid

圣杯布局特点1、上部和下部各自占领屏幕所有宽度2、上下部之间的部分是一个三栏布局3、三栏布局两侧宽度不变，中间部分自动填充整个区域,中间盒子优先渲染4、中间部分的高度是三栏中最高的区域的高度下面列出三种实现方法：float flex grid3行的高度设为： 40px 300px 40px三栏布局的左右侧宽度：200px 150px1. float实现(为了优先渲染center放在left前面)<div class="container"> <div cl

2021-08-05 17:44:21 203

原创两栏布局 - 左自填充右固定

左侧自动填充整个区域，右侧固定的两栏布局1.左侧div写在右侧div的前面<div class="wrap"> <div class="left">这是左自填充</div> <div class="right">这是右固定宽度</div></div>用float实现的css：.left { float: left; width: calc(100% - 200px); background-color

2021-08-04 19:51:23 128

原创块级格式化上下文 BFC

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。包括浮动，外边距合并等等BFC 有着具体的布局特性：有宽度和高度，有外边距margin 有内边距padding 有边框 border不是所有的元素模式都能产生BFC，w3c 规范： display 属性为 block, list-item, table的元素，会产生BFC.注意其他的display属性，比如 inline 等等，创建的是 IFC 。什么情况下可以让元素产生BFCbody根元素f

2021-08-04 16:26:58 56

原创 CSS3 - calc()

calc()特点：CSS3 的 calc() 函数允许在属性值中执行数学计算操作1、混合使用各种单位进行计算，百分比、px、em、rem等单位2、使用" + " 、" - " 、" * " 和 " / " 四则运算3、表达式中有" + "和 " - "时，其前后必须要有空格，如"width: calc(12%+5em)"这种没有空格的写法是错误的；4、表达式中有 " * " 和 " / "时，其前后可以没有空格，但建议留有空格。5、使用 calc()，计算值是表达式它自己，而非表达式的结果，浏

2021-08-04 16:20:37 105

原创两栏布局：左固定右自填充

两栏布局：左固定右自适应剩下的宽度<div class="wrap"> <div class="left">这是左</div> <div class="right">这是右</div></div>右侧的 width 也可以设置百分比，不过没有 calc 灵活1.利用 inline-block，需要配合 font-size，要不会导致字不显示父：font-size: 0左右：display: inline-blo

2021-08-04 16:18:55 142

原创 v-html scoped 修改样式与清除样式

<template> <div class="content" v-html="contentView"></div></template><script> export default { name: 'v-htmlScoped', data () { return { contentView: '<h4>v-html</h4>' } }, .

2021-07-30 14:46:34 742

原创浏览器警告：Uncaught (in promise) undefined

浏览器警告：Uncaught (in promise) undefinedreturn Promise 的时候加上catchreturn new Promise(function(resolve, reject) { ......}.bind(this)).catch(error => {});

2021-07-28 11:56:29 6165

转载基于iview的树形选择器

树形选择器基于iview实现：多级树形结构，可搜索，可清空传入data结构：data: [ { title: '早餐', children: [ { title: '北方', children: [ { title: '豆浆', children: [ {title: '豆浆+咸豆腐脑'} ]

2021-07-20 16:27:39 1546 4

原创 iview-select-tree树型选择器组件封装

iview-select-tree树型选择器组件封装实现效果：二级单选，二级多选（新建与编辑）具体效果：1、数据手风琴样式显示，默认第一组数据展开2、每次只能选择同一组数据，选择不同组数据时原来被选择的数据清除3、编辑时只用传一组数据，因为不能选择不同组数据4、编辑时原先被选中的数据不能被删除，只能新增同组下的其他数据数据格式：// treeData: flag - 新建或编辑； title，value必填，name必须没有； // children里面的name，title必填，val

2021-07-16 18:44:30 1424

转载 reduce()

JS数组reduce()方法详解及高级技巧reduce()方法可以搞定的东西，for循环，或者forEach方法有时候也可以搞定，那为啥要用reduce()？这个问题，之前我也想过，要说原因还真找不到，唯一能找到的是：通往成功的道路有很多，但是总有一条路是最捷径的，亦或许reduce()逼格更高…1、语法arr.reduce(callback,[initialValue])reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次

2021-06-07 14:47:21 57

原创作用域

作用域js变量生命周期在它声明时初始化局部变量在函数执行完毕后销毁全局变量在页面关闭后销毁。ES5三种作用域：全局函数 eval（ES5严格模式下存在）// eval把字符串当做代码执行 es3.0不能使用 "use strict";var a = 123;eval('console.log(a)'); // 123// eval可以改变作用域ES6：块级作用域在如if else while for {}内使用let，let只在该代码块内生效，超出无

2021-04-25 11:06:05 59

原创标准盒模型、怪异盒模型

css 盒子模型(Box Modal)：封装周围的HTML元素，包括：margin border padding content 四个属性标准盒模型（W3C盒模型）怪异盒模型（IE盒模型）设置的width包含content宽度content + padding + border盒子总宽度width + padding + border + marginwidth + margin指定盒模型种类box-sizing: content-box;box-si

2021-04-25 11:05:09 49

原创 vue 2.x

vue 特点遵循 MVVM 模式编码简洁，体积小，运行效率高，适合移动 / PC端开发本身只关注 UI，可以轻松引入 vue 插件或其他第三方库开发项目与其他前端 JS 框架的关联借鉴 angular 的模板和数据绑定技术借鉴 react 的组件化和虚拟DOM 技术vue 扩展插件vue-cli： vue 脚手架vue-resource(axios)： ajax 请求vue-router：路由vuex：状态管理vue-lazyload：图片懒加载vue-

2021-04-23 18:02:19 40

原创 ES11

6、 ES111. 私有属性#class Person { name; // 公有属性 #age; // 私有属性 constructor(name, age) { this.name = name; this.#age = age; } show() { console.log(this.name) console.log(this.#age) }}const a = new Person('zhangsan', 18);console.lo

2021-04-20 20:23:27 290

原创 ES10

5、 ES101. Object.fromEntries 对象扩展方法创建一个对象，接收参数：二维数组或者Map数组。与 Object.entries 相反接收二维数组const result = Object.fromEntries([ ['name', 'zhangsan'], ['city', 'beijing, tianjin, shanghai']])console.log(result); // {name: "zhangsan", city: "beijing, ti

2021-04-20 20:22:46 61

原创 ES9

4、ES91. rest 参数与扩展运算符ES6 中引入的 rest 参数与 spread 扩展运算符只针对于数组ES9 为对象提供了同样功能的 rest 参数与扩展运算符function connect({host, username, ...user}) { // 除了host与username，其他参数都会存到user里面 console.log(host) console.log(username) console.log(user)}connect({

2021-04-20 20:22:14 438

原创 ES8

3、ES81. async函数和await表达式acync:async函数的返回值为promise对象promise对象的结果由async函数执行的返回值决定async function fn() { // 1.return的不是promise对象，则返回的结果就是成功的promise对象 return '123'; // [[PromiseState]]: "fulfilled" [[PromiseResult]]: "123" return // [[Promi

2021-04-20 20:21:32 98

原创 ES7

2、ES71. Array.prototype.includes检测数组中是否包含某个元素，返回布尔类型值let arr = [1, 4, 7];arr.includes(1); // truearr.includes(2); // false2. 指数操作符**用来实现幂运算，功能与Math.pow相同2 ** 10; // 1024Math.pow(2, 10); // 1024...

2021-04-20 20:20:40 43

原创用js实现模糊查询

4种方法测试数据：var list1 = [ { name: "bbAhhhaia", other: "akka" }, { name: "哈哈ad", other: "cai" }, { name: "js", other: "aa" } ] fuzzyQuery(list1, "a");1 indexOf从头到尾地检索字符串 item.name，看它是否含有子串 ke

2021-04-14 16:40:28 3385

原创 [].concat.apply([], arguments)

[].concat.apply([], arguments)concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。var a = [1,[2,3]];console.log([].concat(a)) // [1,[2,3]]// 利用apply扁平化数组console.log([].concat.apply([],a)) // [1, 2, 3]var obj = { 0: 3, 1: 4, length: 2}// 利

2021-04-09 14:07:54 717

原创 [].slice.call()与Array.prototype.slice.call()

[].slice.call()与Array.prototype.slice.call()将类数组转化为真正的数组在ES6以前，将一个伪数组转换为真正数组通常情况下都是使用[ ].slice.call()方法补充：ES6的方法为 Array.from()1、区别[].slice === Array.prototype.slice // true[]为创建数组,当[].slice的时候,自然会去找原型链[].__proto__.slice === Array.prototype.slic

2021-04-08 14:58:32 314

原创 es6笔记

http://kangax.github.io/compat-table/es6/ 查看兼容性1、 ES61. let 变量变量不能重复声明let a, b = 123, c = 'haha', d = [];// 再let a = 1; 会报错 var可以重复声明块级作用域在如if else while for {}内使用let，let只在该代码块内生效，超出无效ES5三种作用域：全局函数 eval（ES5严格模式下存在）不存在变量提升如果变量a在未定

2021-03-29 14:18:01 397

原创渡一js视频笔记

1. 浏览器1.1 语言类型编译性语言 c c++优点：快，写完后才整体翻译成一个文件缺点：不跨平台解释性语言 javascript php优点：跨平台，不需要编译成文件，写一行编译一行；单线程缺点：稍慢.java — javac — 编译 — .class — jvm虚拟机 — 解释执行java不属于两种语言中的任一种，是 oak 语言1.2 主流浏览器及内核IE tridentc

2021-03-29 14:16:21 679

原创 CSS - 元素的显示与隐藏

元素的显示与隐藏让一个元素在页面中消失，但是不在文档源码中删除属性值特点displaynone隐藏之后，不再保留位置visibilityhidden隐藏之后，继续保留原有位置overflowhidden不显示超过对象尺寸的内容，超出的部分隐藏掉...

2019-06-07 11:20:15 246

空空如也

空空如也