Sarahapy的博客

原创 Vue 中的父子组件沟通

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

原创 Vue 自定义指令

全局注册Vue的自定义指令：1. 全局注册钩子函数html 部分使用：<div v-demo:foo.a.b="message"></div> <!-- demo 是函数名冒号后的 foo 是指定的参数，可以是动态的a 和 b 是 修饰符message 是指令表达式-->js 部分：Vue.directive('demo',{ bind: function(el, binding, vnode){ // el,binding,vnode

原创 Vue Router 使用步骤

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

原创 axios.get() 封装

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

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

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

原创 jQuery 写轮播图

jQuery 写轮播图效果：HTML 部分：<div class="container"> <div class="box"> <img src="img/1.jpg" alt=""> <img src="img/2.jpg" alt=""> <img src="img/3.jpg" alt=""> <img src="img/4.jpg" alt="">

原创 jQuery 手写日历

默认显示当月日历，点击左右切换可以选择月份：HTML 部分：<div class="box"> <div class="bar"> <div><span class="year"></span>年<span class="month"></span>月</div> <div> <span class="prev">&l

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

题目如下， 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....

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

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

原创 typeof 和 instanceof 比较

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

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

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

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

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

原创 && 和 语法糖

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

原创 replace() 替换的整理

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

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

设置 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