Sarahapy的博客

Vue 中的父子组件沟通

Sarahapy — Tue, 04 Aug 2020 13:49:05 +0800

1. 父子组件传值 Vue 中，父组件传值给子组件，是通过子组件上绑定的 props值。子组件给父组件传值，并不是直接修改父组件的值，而是通过$emit 触发父组件上的事件，并将值传给父组件，由父组件自己更新对应的值。下面的例子，父组件通过 :post 将 data 中的post 值传给子组件的porp: ‘post’ , 子组件中 button 按钮，点击后通过 $emit 触发父组件的 enlarge-text 事件，同时 $emit 的第二个参数会传给父组件的 enlarge-text 事件。

Vue 自定义指令

Sarahapy — Mon, 27 Jul 2020 19:54:51 +0800

全局注册Vue的自定义指令： 1. 全局注册钩子函数 html 部分使用：

js 部分： Vue.directive('demo',{ bind: function(el, binding, vnode){ // el,binding,vnode

Vue Router 使用步骤

Sarahapy — Sat, 25 Jul 2020 17:30:35 +0800

Vue Router 简单配置和使用步骤： step1: 下载 router npm install vue-router 或 cnpm i g-router --save step2: 引入和安装 // 在 main.js 中全局引入 router import VueRouter from 'vue-router' //安装路由功能 Vue.user(VueRouter) step3: 引入路由组件 import Home from './page/Home' import Classify

axios.get() 封装

Sarahapy — Thu, 16 Jul 2020 16:27:08 +0800

axios.get() 封装 axios 对象，是一个基于 Promise 的 HTTP 库。通过 jquery 可以将 axios.get() 实现过程封装如下： // 封装 axios let axios = { get(url){ return new Promise((resolve,reject) =>{ $.get(url, data =>{ resolv

将毫秒时间数转换成分秒格式的封装

Sarahapy — Tue, 07 Jul 2020 12:18:04 +0800

将毫秒时间数转换成分秒格式的封装在音乐和适配播放器中，进度条下的时间如何显示出来？我们可以获取 audio 时长的属性有：currentTime 和 duration，他们是以毫秒数的形式返回出来的，例如303.098776。通过下面3个函数的封装，可以实现将毫秒时间数，转换成分秒格式。 // 毫秒数字转化成 00：00 格式的时间 function convertSec2Str(total){ let min = repairZero(Math.floor(total/60));

jQuery 写轮播图

Sarahapy — Tue, 07 Jul 2020 12:16:56 +0800

jQuery 写轮播图效果： HTML 部分：

jQuery 手写日历

Sarahapy — Fri, 03 Jul 2020 11:53:08 +0800

默认显示当月日历，点击左右切换可以选择月份： HTML 部分：

年月

JS 定时器 setInterval() 和 setTimeout() 面试题：定时器传参和返回值，异步任务

Sarahapy — Fri, 03 Jul 2020 11:42:54 +0800

题目如下， fn1() 和 fn2() 结果？ function fn1() { for (var i = 0; i < 4; i++) { var tc = setTimeout(function (i) { console.log(i); clearTimeout(tc); },10, i) } } fu

7种Height的比较：screen.height, screen.availHeight, window.innerHeight, window.outerHeight....

Sarahapy — Tue, 30 Jun 2020 10:56:05 +0800

这7种高度的基本含义： screen.height：用户屏幕高度 screen.availHeight：用户屏幕可用高度，减去了窗口工具值类的界面特征 window.innerHeight：浏览器窗口的视口高度，包括水平滚动条 window.outerHeight：浏览器窗口外部高度 document.body.offsetHeight：文档中 body 部分的高度 document.documentElement.clientHeight：文档可显示区域的高度 document.documentElem

jQuery 知识点脑图 2020-6-30 update

Sarahapy — Tue, 30 Jun 2020 10:46:41 +0800

typeof 和 instanceof 比较

Sarahapy — Thu, 25 Jun 2020 11:06:56 +0800

typeof 和 instanceof 比较数据类型： Number, String, Boolean, Undefined, Object, Function, Array, Null 值类型：Number, String, Boolean, Undefined 引用类型：Array, Object, Function, Null typeof 通过返回一个字符串，说明遍历的数据类型。无法判断引用类型的具体数据类型（除引用类型的 function 外） console.log(typeo

利用 JS 构造函数思想，同时设置多个页面元素的动态效果

Sarahapy — Thu, 25 Jun 2020 11:02:29 +0800

JS 构造函数思想在DOM上的应用对于页面中某些重复元素要设置相同或类似的动态属性，为了尽量减少代码重复，我们可以利用JS面向对象的构造函数思想来封装组件。举例：页面中两个盒子，一个盒子通过鼠标点击，可以切换显示的内容。另一个盒子自动切换显示的内容。分析：两个盒子的共同点：盒子的布局完全相同，子节点相同切换显示内容的动态事件相同两个盒子的不同点：触发事件的方式不同，一个是点击事件，一个是自动触发(页面加载) 思路：我们通过一个构造函数，以盒子的id为参数，构造出一个实例对象，

JS面试题解析考察：js执行顺序，变量提升，作用域，this 指向，继承等

Sarahapy — Thu, 25 Jun 2020 10:52:09 +0800

JS面试题解析考察：js执行顺序，变量提升，作用域，this 指向，继承等考题：以下表达式的结果是什么？ function Foo(){ getName = function () { console.log(1) }; return this } Foo.getName = () => console.log(2); Foo.prototype.getName = () => console.log(3);

&& 和语法糖

Sarahapy — Mon, 22 Jun 2020 15:50:45 +0800

&& 和 || 语法糖理解： a && b : 满足前面的条件 a 时，才执行后面的语句 b; 不满足前面的条件 a 时，不会执行后面的语句 b a || b : 满足前面的条件 a 时，不执行后面的语句 b; 不满足前面的条件 a 时，才执行后面语句 b 举例： a > 0 && console.log(a); // 如果 a > 0, 就打印 a 的值，a <= 0 时，不打印 a = a || b 一般用于设置默认值 le

replace() 替换的整理

Sarahapy — Mon, 22 Jun 2020 15:46:51 +0800

JS 字符串方法replace() 替换的整理字符串方法 replace() 不仅可以用字符串替换原字符串的子串，还可以用回调函数来生成替换子串。 replace() 方法返回一个由替换值（replacement）替换一些或所有匹配的模式（pattern）后的新字符串。 // 语法： str.replace(regexp|substr, newSubStr|function) 匹配模式 pattern： regexp|substr : 一个正则表达式或一个字符串 regexp：匹配的内容会被

设置 cookie, 获取 cookie, 删除 cookie 的封装

Sarahapy — Mon, 22 Jun 2020 15:44:29 +0800

设置 cookie, 获取 cookie, 删除 cookie 的封装 1. 设置 cookie 封装 function setCookie(key, value, expires){ let now = new Date(); now.setDate(now.getDate()+expires); document.cookie = `${key} = ${value}; expires= ${now.toUTCString()}`; } 2. 提取 cookie 封装 functio