- 博客(150)
- 收藏
- 关注
RSS订阅
原创 javascript面试题(1)
如何理解执行上下文JavaScript执行上下文(context)主要指代码执行环境的抽象概念。执行上下文分为三种： 全局执行上下文 函数执行上下文 eval执行上下文 每一段js代码执行，都会先创建一个上下文环境。如何理解作用域链前沿知识：js代码执行前会创建上下文环境，这个上下文环境包含了变量、作用域链和this.简单理解就是从当前环境向父级一层一层查找变量的过程称之为作用域链。varname='前端未来';functionhello...
2020-07-07 02:10:12
1912
1
原创 Liuwei
rem原理rem方案的原理其实就是，将每一个不同的屏幕划分成相同的份数，让同一个元素在不同的屏幕上占据相同比例的空间。1rem等于此页面html的font-size，rem可以理解为每份是多少px，比如说，我们的设计稿宽度为750px，我们规定将页面划分成10份，那么rem=75px我们只需要做一件事，就是确定不同的屏幕下一份有多宽，即不同设备下1rem等于多少px两个实际用的方法：lib-flexible，2.在postccs里使用postcss-pxtorem。https://www.cnblog
2022-11-22 16:42:26
364
原创 liuwei
v-modal的使用。绑定input事件,把当前input标签的value值赋值给绑定变量v-bind绑定一个value属性；v-on指令给当前元素绑定input事件。Vue实现数据双向绑定的原理vue.js是采用数据劫持，并结合发布者——订阅者的模式：通过Object.defineProperty()来劫持vue中各个属性的setter、getter，在数据变动的时候，再发布消息给订阅者Vue响应式原理的核心就是Observer、Dep、Watcher。Observer中进行响应式的
2022-11-22 14:37:02
1599
原创 table
<table border="1" bordercolor="skyblue" width="600" cellspacing="0" cellpadding="5"> <tr> <td>会议名称</td> <td colspan="3">1.2</td> </tr> <tr&g..
2021-03-10 15:06:34
232
原创 数据库sql操作基础和ORM
show databases;-- `显示所有的库`use koa2weibo;-- `启用当前的库` select * from blog order by id desc; //通过id 倒序查询select * from users; //查询users表 所有数据 一般不用 而用下面条件查询select username,`password` from users where username='aaa' and `password`='123'; //条件查询-- selec.
2021-02-18 19:43:48
389
1
原创 递归组件2
父组件<template> <div class="list-detail"> <list :list="list" class="niubi"></list> </div></template><script>import List from './components/List'export default { name: 'Parent', components: {
2021-02-02 17:50:45
173
原创 vue 递归组件
子组件<template> <ul class="tree"> <li v-for="(item,index) in treedata" :key="index"> <div :class="'ui-draggable'+item.level" @click="expand()" > {{item.text}} </div> <div v-if="
2021-02-02 14:22:44
171
原创 强制 Vue 重新渲染组件
有时候，依赖vue响应方式来更新数据是不够的，相反，我们需要手动重新渲染组件来更新数据。或者，我们可能只想抛开当前的DOM，重新开始。那么，如何让vue以正确的方式重新呈现组件呢？强制 Vue 重新渲染组件的最佳方法是在组件上设置:key。 当我们需要重新渲染组件时，只需更key的值，Vue 就会重新渲染组件。这是一个非常简单的解决方案。当然，你可能会对其他方式会更感兴趣：简单粗暴的方式：重新加载整个页面 不妥的方式：使用v-if 较好的方法：使用Vue的内置forceUpda...
2021-01-06 10:05:18
255
原创 深圳地图echarts
<template> <div ref="projectMap" style="width:1000px;height:500px;"></div></template><script>import cqmap from './map.json'// 就是这么个意思export default { methods: { echartsInit () { // 使用ref代替document.getEleme.
2020-12-31 15:49:15
1891
1
转载 Vue keep-alive实践总结
<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。<keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和<transition>相似，<keep-alive>是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。prop:include: 字符串或正则表达式。只有匹配的组件会被缓存。 exclude: 字符串或正则表达式。任何匹配...
2020-12-07 15:44:29
138
原创 elementUI 和vue 还有axios +java的完整示例, 代码敲了很久, 累死了, 以后用就直接复制了 ,很值吧!!!
<!DOCTYPE html><html ><head> <meta charset="UTF-8"> <title>导入</title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></head><body><div id="myUp.
2020-11-12 20:24:37
134
原创 base64加密
// base64.jsvar Base64 = { _keyStr: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=', encode: function (e) { var t = '' var n, r, i, s, o, u, a var f = 0 e = Base64._utf8_encode(e) while (f < e.length) { .
2020-11-09 14:06:13
279
1
原创 JS数组reduce()方法详解及高级技巧
reduce()方法可以搞定的东西，for循环，或者forEach方法有时候也可以搞定，那为啥要用reduce()？这个问题，之前我也想过，要说原因还真找不到，唯一能找到的是：通往成功的道路有很多，但是总有一条路是最捷径的，亦或许reduce()逼格更高...1、语法arr.reduce(callback,[initialValue])reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，.
2020-11-05 17:05:52
229
原创 对象 get和set方法
1、用途用户定义的对象定义 getter 和 setter 以支持新增的属性。示例：obj创建一个伪属性latest，它会返回log数组的最后一个元素。var obj = { log: ['example','test'], get latest() { if (this.log.length == 0) return undefined; return this.log[this.log.length - 1]; }}console.log(obj.lat
2020-11-04 15:46:06
704
原创 Vue引发的getter和setter
Vue引发的getter和setter看着文档研究了一下vue的双向数据绑定,打印出Vue实例下的data对象里的属性时，发现了一个有趣的事情：它的每个属性都有两个相对应的get和set方法，我觉的这是多此一举的，于是去网上查了查Vue双向绑定的实现原理，才发现它和Angular.js双向绑定的实现原理完全不同，Angular是用的数据脏检测，当Model发生变化，会检测所有视图是否绑定了相关数据，再更改视图。而Vue使用的发布订阅模式，是点对点的绑定数据。Vue的数据绑定只有两个步骤...
2020-11-04 14:09:42
2373
原创 对象数组排序
exportconstsortNumber=(arr,name)=>{//排序数组对象排序大到小（arr数组 name：要排序的属性）returnarr.sort((a,b)=>b[name]-a[name])}
2020-11-04 09:30:50
187
原创 .sync修饰符
第一步：先用一句话解释.sync修饰符可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值。第二步：具体解释一般情况下，想要实现父子组件间值的传递，通常使用的是props和自定义事件$emit。其中，父组件通过props将值传给子组件，子组件再通过$emit将值传给父组件，父组件通过事件j监听获取子组件传过来的值。如果想要简化这里的代码，可以使用.sync修饰符，实际上就是一个语法糖。第三步：举一个例子来说明Father.vue<templ...
2020-11-03 15:16:01
18182
3
转载 Vue 开发必须知道的 36 个技巧【近1W字】
转自:https://juejin.im/post/6844903959266590728前言Vue 3.x 的Pre-Alpha 版本。后面应该还会有 Alpha、Beta 等版本,预计至少要等到 2020 年第一季度才有可能发布 3.0 正式版;所以应该趁还没出来加紧打好 Vue2.x 的基础;Vue基本用法很容易上手,但是有很多优化的写法你就不一定知道了,本文从列举了 36 个 vue 开发技巧;后续 Vue 3.x 出来后持续更新.1.require.context()1.场景
2020-11-03 14:59:00
208
原创 overflow x轴滚动 y轴不出现滚动条
<!DOCTYPE html><html><head><style> div{width:110px;height:110px;border:thin solid black;overflow-x:scroll;overflow-y:auto;}.outer-container{ overflow: hidden; width: 90px; }</style></head><body>.
2020-11-02 16:18:51
3049
原创 sort封装 排序 对象数组
对象数组排序 多个数组constlinks=this.$sortNumber(linksList,'linNum')constassign=this.$sortNumber(assignList,'companyNum')exportconstsortNumber=(arr,name)=>{//排序数组对象排序大到小returnarr.sort((a,b)=>b[name]-a[name]...
2020-11-02 15:37:23
288
原创 帝国时代2高清版秘籍
帝国时代2高清版秘籍，进入游戏后点回车键输入ninjaconnor再点回车键，就会得到10万黄金，10万木头，10万食物，10万石头。没错，是十万而不是一万，真的！绝对给力。不谢
2020-10-31 12:43:13
7748
原创 pointer-events：none 和 cursor: not-allowed；
pointer-events：none 和 cursor: not-allowed;
2020-10-27 18:46:05
1033
原创 JavaScript 判断对象中是否有某属性
JavaScript 判断对象中是否有某属性 判断对象中是否有某属性的常见方式总结，不同的场景要使用不同的方式。一、点( . )或者方括号( [ ] ) 通过点或者方括号可以获取对象的属性值，如果对象上不存在该属性，则会返回undefined。当然，这里的“不存在”指的是对象自身和原型链上都不存在，如果原型链有该属性，则会返回原型链上的属性值。// 创建对象let test = {name : 'lei'}// 获取对象的自身的属性test.name /
2020-10-26 22:48:50
242
原创 elementui 时间件选择器 zuijinwunian
pickerOptions:{disabledDate(time){//选择最近五年varstartDate=newDate()varyear=startDate.getFullYear()startDate=startDate.setFullYear(year-4)returnstartDate>time.getTime()||tim...
2020-10-23 15:38:03
123
原创 Js中函数声明和函数表达式的区别
先看以下几段烧脑的代码： 1 2 3 4 5 6 7 8 f();//=>? varf =function() { console.log("var"); } functionf() { console.log("function"); } 控制台打印结果"function"。另一段代码 1 2 ...
2020-10-22 23:27:22
232
1
原创 ES6-Proxy与数据劫持(12)
随着前端界的空前繁荣，各种框架横空出世，包括各类mvvm框架百家争鸣，比如Anglar、Vue、React等等，它们最大的优点就是可以实现数据绑定，再也不需要手动进行DOM操作了，它们实现的原理也基本上是脏检查或数据劫持。我们先以Vue框架出发，探索其中数据劫持的奥秘。Vue 2.0的版本所使用的数据劫持，说白了就是通过Object.defineProperty()来劫持对象属性的setter和getter操作，在数据变动时做你想要做的事情，举个栗子：var data = { name:'
2020-10-19 22:37:10
517
转载 Vue的slot-scope的场景的个人理解
转https://segmentfault.com/a/1190000015884505?utm_source=tag-newest这篇文章不是单纯把文档的话和api拿来翻译和演示，而是谈谈我对于slot-scope的使用场景的个人理解，如果理解错误，欢迎讨论！Vue的插槽slot，分为3种匿名插槽 具名插槽 作用域插槽前两种很好理解，无论就是子组件里定义一个slot占位符，父组件调用时，在slot对应的位置填充模板就好了。作用域插槽的慨念，文档却只有一句简单的描述有的时候你希望提
2020-10-15 13:59:18
353
1
原创 为 Vue 的惰性加载加一个进度条
为 Vue 的惰性加载加一个进度条原创前端先锋前端先锋昨天 17:57阅读数 8本文被收录于专区大前端进入专区参与更多专题讨论技术领域干货、就业指导、尽在华为云HERO高校联盟知识峰会！>>>//每日前端夜话第412篇//正文共：1800字//预计阅读时间：8 分钟简介通常用 Vue.js 编写单页应用（SPA）时，当加载页面时，所有必需的资源（如 JavaScript 和 CSS 文件）都会被一起加载。在处理大文件...
2020-10-10 15:45:24
313
原创 vue .native $listeners 和 $attrs总结
.native 用于自定义子组件上面绑定事件，简而言之，就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加’. native’事件是无法触 发的。$listeners :当组件的根元素不具备一些DOM事件，但是根元素内部元素具备相对应的DOM事件，那么可以使用$listeners获取父组件传递进来的所有事件函数，再通过v-on="xxxx"绑定到相对应的内部元素上即可。===============================================父组
2020-10-10 15:27:45
226
1
原创 vue中的$listeners属性作用
一、当组件的根元素不具备一些DOM事件，但是根元素内部元素具备相对应的DOM事件，那么可以使用$listeners获取父组件传递进来的所有事件函数，再通过v-on="xxxx"绑定到相对应的内部元素上即可。 注意：使用.native修饰符的事件，不会体现在$listeners属性上。<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="G
2020-10-10 11:43:31
5390
转载 在vue中通过使用$attrs实现组件之间的数据传递
组件之间传递数据的方式有很多种，之所以有这么多种方式，是为了满足在不同场景不同条件下的使用。一般有三种方式： 通过props的方式向子组件传递(父子组件) vuex进行状态管理 非父子组件的通信传递Vue Event Bus，使用Vue的实例，实现事件的监听和发布，实现组件之间的传递 本文介绍的是使用$attrs的方式。这是$attrs的官网apihttps://cn.vuejs.org/v2/api/#vm-attrs这个api是在2.4版本中...
2020-10-10 09:53:34
536
原创 vscode 自动按照eslint规则格式化
1，在vscode中安装eslint、Prettier 两个插件2，在vscode用户配置文件(文件->首选项->设置->用户设置)(或者1.ctrl +shift +p ，输入setting，找到这一项)中写入：{ "files.autoSave": "onFocusChange", "[javascript]": { "editor.defaultFormatter": "vscode.typescript-language-featu.
2020-09-02 18:08:00
1152
转载 大屏上的全屏页面的自适应适配方案
https://www.njleonzhang.com/2018/08/15/flexible-pc-full-screen.html
2020-08-24 09:48:55
2822
原创 对象数组相互转换
把对象转化为数组var obj={"one":"I am 1","two":"I am 2"};//方法一(1)var arr = Object.getOwnPropertyNames(obj); //arr=["one", "two"]var valArr = arr.map(function(i){return obj[i]});//["I am 1", "I am 2"]//方法一(2)var arr2 = Object.keys(obj);//arr=["one", "two
2020-08-23 18:39:04
573
转载 2020-08-23
一、创建数组 x=[ ]let a=["333","999"]; // 直接写在[ ]中let aa=new Array(4,8,9); // 通过实例传入Array中let aaa=new Array(5); // 传入的5为array的个数 aaa[0]=6; // 给aaa的第0个赋值为6console.log(aaa); // [6,,,,,]console.log(aa);
2020-08-23 17:35:50
317
原创 ES5与ES6数组方法总结
Array 对象属性constructor 返回对创建此对象的数组函数的引用。 length 设置或返回数组中元素的数目。 prototype 使您有能力向对象添加属性和方法。传统Array 对象方法toSource() 返回该对象的源代码。 toString() 把数组转换为字符串，并返回结果。 toLocaleString() 把数组转换为本地数组，并返回结果。 valueOf() 返回数组对象的原始值修改原数组 不修改原数组 push， pop concat
2020-08-23 17:34:41
915
1
原创 vue-cli3.0
https://segmentfault.com/a/1190000015133974?utm_source=tag-newest
2020-08-21 16:19:27
134
原创 旧岛笔记
1.flex 倒序 两种2.小程序两个事件 bind不阻止冒泡 catch 阻止冒泡3.文字上下间距 line-height 设置字体一样大小消除4.display：inline-flex 可以消除div块状 特性 让他宽度自适应5.文字被截取就是文字头部没了，是因为高度不够 有两种方法 加大高度 或者设置padding...
2020-07-29 15:21:53
128
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人