- 博客(42)
- 资源 (1)
- 问答 (3)
- 收藏
- 关注
RSS订阅原创 Vue keep-alive缓存路由信息
在不使用keep-alive时，通过路由跳转到另一组件上时，上一个组件会被vue销毁，在次进入，页面会保持初始状态，不会对用户的更改保留，如果需要包作在某组件上的更改，就可以使用keep-alive保存路由入口 <keep-alive> <router-view></router-view> </keep-aliv...
2020-02-26 19:57:03
624
原创 vue路由的使用，命名，参数，范式，嵌套，动态匹配
基本使用：1，让Vue使用该VueRouter创建,Vue.use(VueRouter);2, 创建router对象var router = new VueRouter({ });3, 在创建的router对象中配置路由对象，路由匹配的规则,var router = new VueRouter({ routes: [ { ...
2020-02-26 16:33:54
445
原创 Vue 组件传值方法5，利用$parent和$Children
实现思想：利用每个组件的属性来传值，即每个组件都有parents和parents和parents和Children等属性，根据这些属性找到要找的组件，对其进行操作，比如Vue实例vm的父级没有，子组件在这里有App和App下的Son，这些都是vm的属性中报错，换句话说vm下面的每一行代码都能在vm的某个属性中找到，对其进行更改，便可达到从父组件向子组件传值的效果，换言之，从子组件向父组件‘传...
2020-02-25 16:06:30
1647
原创 Vue组件传值方法4利用provide和inject
父组件中设置provide可以设置多个属性，在它的子组件中设置inject接收父组件：provide:{ for:'App Pass Value', }子组件：data() { return { name: 'Two sons', msg:'', ...
2020-02-25 14:59:39
879
原创 Vue组件传值方法3：兄弟组件间传值
类似子类想父类传值，不过这个不管中间有多少个组件，都可是实现，不用再每个组件中设置属性或绑定$attrs；实现思路是：用一个独立的Vue组件，点击某一组件注册事件，不过事件是注册在独立的做为中转的实力上，在需要接受值的组件中使用 $on调用事件名，设置回调函数，在函数中进行值的设定。定义一个组件let dus = new Vue();传输组件Vue.component('Eldest...
2020-02-25 14:10:03
2763
原创 vue 组件传值方法2-使用$attrs实现组件传值
图中 第一行是最高级组件里的两条数据’App‘和‘组件传值’，‘组件传值’是用笨办法每一个组件中都用props定义个属性接受，很费劲，数据多了不小心就出错；‘App’是用attrs来实现的，官网是这么描述的：包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 ...
2020-02-24 21:56:29
3704
原创 vuecli安装使用笔记
下载Node.js,下载完安装，一直下一步，安装完成在终端输入node -v查看版本号，若有版本号说明安装成功，然后下载vuecli，终端输入npm install -g @vue/cli安装完成输入vue -V（大写的v）查看版本号，若有V证明安装成功，然后可以下载一个cnpm淘宝镜像，终端输入：npm install -g cnpm --registry=https://reg...
2020-02-23 14:39:05
131
原创 vuecli的属性传值方法1和注册事件
属性传值：1，传值：比如String，传入的值发生改变，只会作用在发生改变的子组件中2，传引用：如Array，只发生变动，所用引用该值的地方都会发生变动。注册事件：vue不推荐子组件改变父组件中的变量，会报错，想要更改，可以使用注册事件，如：在子组件中调用一个方法，该方法使用$emit注册事件，事件在父组件中调用：子组件: <div id="header" @click="ch...
2020-02-23 14:00:53
286
原创 text-shadow使用
<style> html{ background-color: #cccccc; text-align: center; font-size: 30px; font-weight: bold; } .one{ col...
2020-02-22 20:16:23
512
原创 axios请求的get/post
axios用到的比fetch要多，更加方便，提供了很多使用的API，引用的三种方式：npmnpm install axiosbowerbower install axioscdn<script src="https://unpkg.com/axios/dist/axios.min.js"></script>get请求的格式：// 为给定 ID 的 us...
2020-02-21 18:49:59
235
原创 fetch请求get/post
fetch的基本格式fetch('http://jsonplaceholder.typicode.com/todos') .then(res =>{ }) .then(data=>{ });它只是一个 HTTP 响应，而不是真的JSON。为了获取JSON的内容，我们需要使用 json() 方法: fetch("http://jsonplaceholder.typ...
2020-02-21 18:40:20
7144
原创 计算属性 vs methods
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Hongbin</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">&...
2020-02-18 21:39:03
228
原创 纯css写唯美登录页面
css <link href="https://cdn.bootcss.com/font-awesome/5.11.2/css/all.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.css" rel="stylesheet"> ...
2020-02-18 15:11:53
1352
2
原创 js写倒计时
<span class="countDown"></span><script> function countDown(second, select) { let oSpan = document.querySelector("." + select); if (!!second) { let v...
2020-02-16 10:52:44
144
原创 js中两个!!感叹号表示的意思与使用原理
/** 逻辑非非* 在非的基础上在一个非* 将值转换成布尔值boolean返回* 可以确定变量中存贮的值是否满足某些条件，再做处理* */ var val = "";//false var val = null;//false var val = undefined;//false var val = 0;//false var val = false;...
2020-02-16 10:02:07
480
原创 闭包
/** 匿名函数 ！== 闭包* 闭包：可以访问另一作用域的变量的函数* 常见创建方式：在一个函数内部创建另一个函数。** */ function createComparisonFunction(propertyNmae) { return function (object1,object2) { let value1 = objec...
2020-02-15 18:58:30
110
原创 js小说阅读器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margi...
2020-02-14 19:25:40
2179
原创 自我改良版寄生组合式继承
两种不同的寄生组合式实现继承的inheritPrototype函数，第一种的结果对应第一张图function inheritPrototype(subType,superType) { var prototype = Object(superType.prototype);//创建对象 prototype.constructor = subType; ...
2020-02-13 14:33:14
208
原创 寄生组合继承
* 因为组合式继承会两次调用超类型的构造函数,* 一次是在创建子类型原型的时候,将超类型的属性添加到自类型的原型上,* 另一次是在子类型构造函数内部调用,将原型上的属性创建到自己身上,* 实现屏蔽超类型同名的属性寄生组合式继承* 通过借用构造函数继承属性,通过原型链的混成形式继承方法.* 基本思路:不必为了指定子类型的原型而调用草类型的构造函数,我们所需要的无非就是给超类型原型的一个...
2020-02-12 20:33:25
312
原创 组合式继承
组合继承(combination inheritance)* 有时也叫"伪经典继承",指的是将原型链实现继承和借用构造函数技术和二为一.* 思路:使用原型链实现对原型属性和方法的继承,而通过街工构造函数实现实例属性的继承.* 既通过原型上定义的方法实现了函数复用,又能保证每个实例都有自己的属性. function SuperType(name) { thi...
2020-02-12 17:12:11
1167
原创 借用构造函数继承
借用构造函数（伪造对象/经典继承）*基本思想：在子类型构造函数的内部调用超类型构造函数。*通过使用apply()和call()方法也可以在（将来）新创建的对象上执行构造函数。* 相当于在子类型的内部执行了跟超类型身上所有的操作，比如添加属性，方法，实现继承超类型的方法和属性* 不同于原型链继承的是，子类型不再是超类型的实例,就和名字一样，其余的操作跟创建了一个构造函数一样。 fun...
2020-02-12 17:10:37
359
原创 寄生式(parasitic)继承
寄生式(parasitic)继承是与原型式继承紧密相关的一种思路.* 思路与寄生构造函数个工厂模式类似,即创建一个仅用于封装继承过程的函数,* 该函数在内部以某种方式来增强对象,* 最后再像真的是它做了所有工作一样返回对象. function createAnother(original) { var clone = Object(original);//通过调用函数...
2020-02-12 17:08:23
739
原创 原型链实现继承
继承*继承是OO(Object Oriented)语言(面向对象语言)最为人津津乐道的概念。* 许多语言都有两种继承方式：接口继承和实现继承。* 接口继承之继承方法签名，实现继承则继承实际的方法。* 因为函数没有签名，在ECMAScript中无法实现接口继承。* ECMAScript5只支持实现继承，而且实现继承只要以来原型链来实现的。/*原型链* ECMAScript 中描述了原型...
2020-02-11 12:19:22
1208
原创 寄生构造函数模式
/*感觉没多大用记下得了*/ /* * 基本思维： * 创建一个函数，该函数的作用仅是封装创建对象的代码，然后返回新创建的对象。 * 表面上看很像构造函数 * */ function Person(name,age,job) { var o = new Object(); o.name = name; ...
2020-02-10 19:33:47
367
原创 稳妥构造函数模式
/*稳妥对象（durableobjects） * 所谓稳妥对象，指的是没有公共属性，而且其方法也不引用this对象。 * 稳妥模式最适合在一些安全环境中（这些环境会禁止使用this和new）， * 或者防止数据被其他应用程序（如 Mashup程序）改动是使用。 * 有两点与寄生构造函数模式不同： * 1，新创建的实例对象不引用this； * 2，不使...
2020-02-10 19:32:45
434
原创 原型模式的不足和解决办法
原型模式的缺点：* 虽然省略了为构造函数传递初始化参数这一环节，结果所有的实例都有了默认的相同的属性值。会带来一些不方便，但主要问题还是由其共享的本质所导致的。* 原型中所有的属性是被很多实例共享的，这对于函数非常舒服，但对于包含引用类型的属性来说，问题就出来了：function Person() { } Person.prototype = { name:...
2020-02-10 18:24:47
975
原创 更简单的原型语法和原型语法的动态性
更简单的原型语法 为减少不必要的输出，也从视觉上更好的封装原型的功能，用一个包含所有属性和方法的对象字面量来重写整个原型对象： function Person() { } Person.prototype = { name : "Hongbin", age : 21, sex : true, sayHello : funct...
2020-02-10 17:03:35
287
原创 工厂模式，构造函数模式和原型模式
红宝书P144，152<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script> //-----------...
2020-02-10 15:15:52
343
原创 for-in循环和替代的两种方法
<script> function Person() { } Person.prototype.name = "宏斌"; Person.prototype.age = 21; Person.prototype.job = "students"; Person.prototype.sayHello = function () { ...
2020-02-10 15:12:01
1650
原创 读取属性的特性
Object.getOwnPropertyDescriptor()方法，* 两个参数：属性所在的对象和要读取器描述符的属性名，* 返回值是一个对象，* 如果是数据属性有：configurable，enumerable，writable，value.* 如果是访问器属性有：configurable，enumerable，get，set.<script> var pers...
2020-02-09 18:04:38
577
原创 对象的访问器属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>红宝书p141，142<script> /* * 访问器属性...
2020-02-09 16:52:31
344
原创 JavaScript对象属性的特性高级功能
“use strict”/创建一个对象最简单的方式：创建一个Object的实例，然后再为它添加属性和方法/var person = new Object();person.name = “Hongbin”;person.age = 21;person.job = “students”;person.say = function () {console.log("Hi! I am "+...
2020-02-09 14:20:25
414
原创 constructor构造函数的小细节
定义的f是Fn的一个实例，打印Fn发现里面只有m：10，因为构造函数中定义的n跟f没关系，只有this.xxx跟new的新对象有关系，所以打印f.n会返回undefined，因为n没有定义，打印f.m会打印10，也就是Fn中的n在构造函数中return一个基本类型值，打印f，结果不会有影响；在构造函数中return一个对象（引用值），打印f，f变成了return的对象，因为，构造函数执行结束...
2020-02-08 13:06:21
601
原创 基本类型值基于两种不同模式创建的值是不同的
num2 是数字类(Number)的实例，mun1也是，只是表达方式不同，也都可以使用数字类的属性和方法视频地址：https://www.bilibili.com/video/av24239549?p=6.
2020-02-08 11:23:06
212
原创 一道考察this指向和js运行原理细节的单例模式测试题
原题：var n = 2;var obj = { n: 30, fn: (function (n) { n *= 2; this.n += 2; var n = 5; return function (m) { this.n *= 2; console.l...
2020-02-07 19:41:45
334
原创 Singleton Pattern(单例模式)
/*单例设计模式（Singleton Pattern）* 1，表现形式：* var obj = { XXX:XXX, ... };* 就是一个破对象* 在单例模式中obj不仅是对象名，被称作“命名空间”【NameSpace】。* 把描述的事务放到命名空间中，多个命名空间是独立分开的，互不冲突** 作用：把描述同一件事务的属性和特征进行“分组，归类”（存储在同一个堆...
2020-02-07 15:24:01
254
原创 利用jQuery基本结构定义一个自己的jQuery框架
我们可以参照下载的没有压缩的jQueryj文件，查看Query的基本结构： (function (window,undefined) { let jQuery = function () { return new jQuery.prototype.init(); }; jQuery.prototype = { ...
2020-02-07 10:41:50
336
原创 js,jQuery获取当前时间，并显示打印
简易的效果代码：<style> div{ width: 200px; height: 80px; background-color: #90EE90; margin: 10px 0 10px 0; } </style></he...
2020-02-06 19:13:30
679
原创 js消除耦合现象
每个函数中都有一个属性叫 arguments 用来包含所有传入的参数 这个对象还有一个属性叫 callee ，该属性是一个指针，指向拥有这个arguments对象的函数。案例中 函数的执行与函数名factorial紧密的耦合在一起，要消除这种耦合现象，就要用到arguments.callee.actorial [fækˈtɔːriəl] fai ke tuo rui ou 阶乘函数<...
2020-02-06 18:29:00
826
javascript创建一个数组和创建一个对象哪个开销大
2022-09-17
mongodb如何在获取值的同时获取对应的类型
2021-11-16
博客文章的评论功能 数据库里应该怎么存
2021-09-02
html css怎么实现这种弧度效果
2021-08-19
TA创建的收藏夹 TA关注的收藏夹
TA关注的人