JS原型链1234567891011function Person() {}Person.prototype.name = "abc";Person.prototype.sayName = function () { console.log(this.name);};let person = new Person();person.__proto__ = Person.prototype;String.__proto__ = Function.prototype;String.constructor = Function;
JS继承原型继承12345678910function Parent() { this.name = "Parent"; this.sex = "male";}function Child() { this.name = "Child";}Child.prototype = new Parent ...
响应式数据根据数据类型【数组和对象】进行不同处理。
对象内部通过defineReactive方法，使用Object.defineProperty()监听数据属性的get进行数据依赖收集，再通过set完成数据更新。
数组则通过重写数组方法实现。扩展7个变更方法（push/pop/shift/unshift/splice/reverse/sort），通过监听这些方法收集依赖和派发更新。
多层对象通过递归实现监听，Vue3使用proxy实现响应式数据。响应式流程：defineReactive定义响应式数据；给属性增加dep收集对应的watcher；等数据变化进行更新。dep.depend——get取值，依赖收集；dep.notify——set设置，通知视图更新。
性能优化点：1. 对象层级过深；2. 不需要响应式数据不放在data；3. Object.freeze可以冻结数据。
日期格式化12345678910111213141516171819202122// 格式化日期类型,fmt格式可选择function dateFormat(fmt, date) { let ret; let opt = { "Y+": date.getFullYear().toString(), // 年 "M+": (date.getMonth() + 1).toString(), // 月 "D+": date.getDate().toString(), // 日 "h+": date.getHours().toString(), // 时 "m+": date.getMinutes().toString(), // 分 "s+": date.getSeconds().toString(), // 秒 "ms+": date.getMilliseconds().toString ...
最近在做一个消息定时器，需要在离线环境中使用，通过表单写入事项存储到本地，渲染在表格中。尝试过使用Node.js进行文件读写操作，受到UI框架的限制；同时测试了localStorage存储，也达不到想要的效果。最后直接使用WebSql和indexDB来完成。以下是一个DEMO，实际效果正在测试中…
123456789// html<button id="btn-create">创建user数据表</button><button id="btn-insert">插入数据</button><button id="btn-query">查询数据</button><button id="btn-update">修改数据</button><button id="btn-delete">删除数据</button><button id="btn-drop&qu ...
安装编译工具
12345678910"scripts": { "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\"", "lite": "lite-server", "tsc": "tsc", "tsc:w": "tsc -w"},"devDependencies": { "concurrently": "^5.0.0", "lite-server": "^2.5.4"}
props父传子组件的属性，props值可以是一个数组或对象。
$emit子传父组件绑定自定义事件。
1234// 父组件<home @title="title">// 子组件this.$emit('title',[{title:'这是title'}])
vuexvuex是一个状态管理器插件，适合数据共享多的项目。
state：定义存储数据的仓库，可通过this.$store.state或mapState访问；
getters：获取store值，可认为是store的计算属性，可通过this.$store.getters或mapGetters访问；
mutations：同步改变store值，为什么会设计成同步，因为mutation是直接改变store值，Vue对操作进行了记录，如果是异步无法追踪改变，可通过mapMutations调用；
actions：异步调用函数执行mutation，进而改变store值，可通过this.$dispatch或mapActions访问；
modules：模 ...
前言浮动float的渲染位置在行框与包含块之间，这样可以使得行框内文字与浮动元素不重叠，并且环绕它显示。在布局过程中经常使用它实现左右并排布局的效果。但是，由于浮动特性，容器如果没有明确设定高度，会依照普通流内元素高度设置，这样就会导致脱离普通流的浮动元素溢出容器，影响后面的元素布局。
已知的清除浮动元素方法：
采用一个HTML标签，以及css的clear属性，手动清除浮动；
采用伪类:after动态建立一个块元素，设定clear属性，清除之前的浮动元素；
采用css overflow非visible值（overflow:auto/overflow:hidden）设定使父容器包含浮动元素；
采用display:table/display:table-cell等table系列属性将父元素变成table形式自动包含浮动元素；
使用table以及td标签作为浮动元素容器；
采用float:left/float:right方式将父元素同样浮动，就可以包含浮动内容；
在IE 6/7的标准文档模式中设置width/height/zoom等样式来自动清除浮动；
使用clear样式清除1.cl ...
插件
Beautify
chinese Language
open in browser
Vetur
minapp
settings.json123456789101112131415161718192021222324{ "window.zoomLevel": 1, "markdown.preview.fontSize": 16, "[html]": { "editor.defaultFormatter": "HookyQR.beautify" }, "[javascript]": { "editor.defaultFormatter": "HookyQR.beautify" }, "[json]": { "editor.defaultFormatt ...
