- 博客(35)
- 收藏
- 关注
RSS订阅原创 JavaScript类的定义及ES6的继承
ES5类的定义function Person(name, age) { this.name = name; this.age = age;}Person.prototype.run = function () { console.log(this.name, this.age, "run");};const p = new Person("zhangsan", 24);p.run();ES6类的定义class Person { constructor(name, age) {
2020-07-24 19:47:51
185
原创 React组件的样式
行内样式App.jsimport React, { Component } from "react";export default class ClassCom extends Component { render() { return ( <div> <p style={{ color: "red", fontSize: "30px" }}> 我是类组件-行内样式 </p> </div> ); }}
2020-07-24 19:35:52
270
原创 React的hooks
Hook是React 16.8 的新增特性。它可以让你在不编写class的情况下使用state以及其他的React特性。hooks-useState返回一个 state，以及更新state的函数。App.jsimport React, { useState } from "react";export default function App() { // 定义count和count的默认值和修改count的方法 const [count, setCount] = useState(15);
2020-07-24 19:19:25
149
原创 React跨组件通信
在React中，可以通过父子通信或者context来实现跨组件通信。父子通信实现跨组件通信实现原理：App组件先将数据传递给Father，然后Father组件将接收到的数据传递给Son组件。App.jsimport React, { Component } from "react";// 定义组件Appexport default class App extends Component { constructor(props) { super(); this.state = {
2020-07-24 18:56:21
355
原创 React组件的子父通信
在React中的子父通信实现方式是，父组件将自己的某个方法传递给子组件，在方法里可以做任意操作，比如可以更改状态，子组件通过this.props接收到父组件的方法后调用。App.jsimport React, { Component } from "react";export default class App extends Component { constructor(props) { super(props); this.state = { count: 0, }; }
2020-07-24 18:34:39
139
原创 React中组件的父子通信
父子通信，顾名思义就是父组件将自己的状态传递给子组件，子组件当做属性来接收，当父组件更改自己状态的时候，子组件接收到的属性就会发生改变。在这里，将举例类组件和函数式组件的父子通信。类组件的父子通信App.jsimport React, { Component } from "react";// 父组件Appexport default class App extends Component { render() { return ( <div> <Child
2020-07-24 17:21:47
219
原创 React组件的组合
React组件的组合是指：将一个组件写在另一个组件的内容中，然后在外层组件中通过 this.props.children来接收内容中的组件， 效果上类似vue中的插槽。App.jsimport React, { Component } from "react";import NavBar from "./NavBar";export default class App extends Component { render() { return ( <div> <
2020-07-24 17:12:03
461
原创 React组件的嵌套
在React中，组件中还可以嵌套组件，此时组件的关系可称为父子组件。接下来，我将在App组件中嵌套Header、Main和Footer三个组件。Header.jsimport React from "react";// Header组件的定义export default function Header() { return <div>我是Header组件</div>;}Main.jsimport React from "react";// Main组件的定义
2020-07-24 16:56:20
832
原创 React组件的定义方式
在React中，有两种定义组件的方式，我们称为函数组件和类组件。类组件类组件的定义如下：App.jsimport React, { Component } from "react";// 类组件的定义export default class App extends Component { constructor(props) { super(props); } render() { return <div>我是类组件</div>; }}函数组件
2020-07-24 16:42:59
279
原创 在windows下搭建vue-cli3项目环境
说明今天将介绍vue-cli脚手架在windows环境下搭建项目的过程。其中，vue-cli的版本是3.0，电脑系统是windows10。搭建过程第一步安装vue-cli，在这里我首先在桌面建立了一个文件夹test，然后将它使用vscode打开。我在命令行输入如下命令即可安装全局安装vue-cli。当前，你也可以在cmd或者其他命令行工具中输入命令。第二步安装vue-cli项目，使用vue create 项目名称即可开始安装项目。在安装的过程中，我们都默认回车选择默认配置。如下图所示。这里
2020-07-03 15:32:50
606
原创 vue过滤器实现日期格式化
说明今天将要介绍的是vue中的过滤器，并且将实现一个日期格式化的小案例。大家都知道，我们获取当前日期可以通过Date对象获取。下面我将获取当前时间并打印出来。console.log(new Date());我们获取的是一个标准时间，控制台的输出如下所示。在实际项目开发中，我们通常获取标准时间后不是直接拿来使用，而是要进行一些操作然后将它显示在页面中，我们将这些操作称作时间格式化。过滤器在vue中，我们可以使用过滤器来进行时间格式化。它的写法如下：// Vue.filter(过滤器名称,处
2020-07-01 20:02:06
3136
2
原创 vue组件的全局注册和局部注册
说明vue中的组件是vue.js最强大的功能之一，它可以扩展 HTML 元素，封装可重用的代码，实现代码的复用。今天将介绍一下组件的全局注册和局部注册。全局注册全局注册的组件，每一个HTML区域都可以引用。我们使用Vue.extend()来定义组件，使用Vue.component()来注册组件。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta n
2020-06-30 14:53:31
1111
原创 前端面经-JavaScript部分（持续更新中）
文章目录1、JS数据类型和判断数据类型的方法。2、== 和===的区别。3、什么是原型链？4、什么是闭包？闭包有什么优缺点？5、es6的新特性。6、let、const、var的区别。7、数组的方法你知道哪些？8、get和post的区别。9、HTTP缓存。10、箭头函数和普通函数区别。11、hash值如何获取？12、产生跨域的方式。13、解决跨域方法。14、常见的数组去重方法。15、null和undefined的区别。16、new操作符具体干了什么？17、哪些操作会造成内存泄漏？18、性能优化的方法。19、c
2020-06-30 08:26:18
278
原创 前端面经-CSS部分（持续更新中）
目录1、简述一下CSS盒模型。2、IE盒模型和w3c盒模型的区别，如何使用IE盒模型？3、请描述一下渐进增强和优雅降级。4、CSS 中可以通过哪些属性定义，使得一个 DOM 元素不显示在浏览器可视范围内？5、什么是CSS Hack？6、什么是外边距重叠？重叠的结果是什么？7、如何垂直居中一个div？8、简述一下px、em和rem的区别。9、简述一下CSS 中 link 和@import 的区别。10、为什么要初始化样式？11、简述一下display:none、visibility:hidden和opacit
2020-06-29 19:10:00
275
原创 前端面经-HTML部分（持续更新中）
目录1、主流浏览器有哪些以及它的内核？2、Doctype的作用。3、div+css 的布局较 table 布局有什么优点？4、img 的 alt 与 title的作用。5、请谈一下你对网页标准和标准制定机构重要性的理解。6、请谈一下你对微格式的理解。7、超链接访问过后 hover 样式就不出现的问题是什么？如何解决？8、简述一下块级元素和行内元素特点以及它们的区别。9、HTML语义化的好处。10、iframe的优缺点。11、meta标签的作用是什么？有哪些常见的meta标签？12、HTML5新特性。13、l
2020-06-29 18:47:09
216
原创 vue小案例-todolist
说明今天将介绍的是用vue写的一个小案例todolist。效果展示它可以实现信息的增加和删除、按条件选择展示在页面中等功能。代码展示index.html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
2020-06-29 12:50:38
2198
原创 v-if、v-else和v-else-if的用法
说明今天将给大家介绍vue.js中常见指令v-if、v-else和v-else-if。v-if的用法v-if根据判断条件的值来有条件的渲染元素。如果条件的值为真，则元素出现在页面中。反之则不会出现。判断条件可以是一个变量：<div id="app"> <p v-if="flag">Hello</p></div><script> new Vue({ el: "#app", data: { flag: true, }
2020-06-28 10:02:37
5564
原创 v-on的用法
说明今天将介绍一下vue.js中的指令v-on的用法。用法v-on是用来给目标元素绑定事件的，事件的类型由参数决定。接下来，将举一个v-on用法的小例子。代码如下。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&g
2020-06-28 09:21:23
13501
1
原创 v-for的用法
说明今天将介绍一下vue.js中的v-for的用法。用法直接上代码了。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <
2020-06-28 08:43:26
1384
2
原创 v-text和v-html的用法
前提今天开始了前端流行的框架之一Vue.js的学习，我的内心是激动的。接下来，我讲介绍一下v-text和v-html的使用方式以及它们之间的区别。v-text的使用方法直接上代码了。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-sca
2020-06-24 16:45:55
10545
4
原创 CSS3实现背景色一半红一半白
需求给定一个div的宽度和高度，设置它的背景，使它的背景色一半是红色，一半是白色。分析可以使用CSS3中的渐变来实现这个需求。代码废话不多说，直接上代码了。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
2020-06-23 18:01:00
16919
2
原创 三栏布局的实现方式
三栏布局一般指左右两栏宽度固定，中间栏宽度自适应的布局。如下图所示。当浏览器窗口的宽度发生变化时，中间部分也会跟着自适应改变。接下来，将介绍几种实现它的方式。1、使用绝对定位布局<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1
2020-06-20 16:22:23
183
原创 CSS外边距重叠
1、什么是外边距重叠margin-college称作外边距重叠。在CSS中，相邻的两个盒子（可能是兄弟关系或者祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，因而所结成的外边距称为折叠外边距。2、外边距重叠的例子首先我们准备两个div盒子（兄弟关系），代码如下所示。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta n
2020-06-19 12:34:38
414
原创 jQuery实现弹幕效果
案例简介jQuery实现弹幕效果，代码如下。案例目录HTML部分<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>jQuery弹幕案例</title> <link rel="stylesheet" type="text/css"...
2020-06-18 11:47:30
714
5
原创 javascript笔试题（二）
1、请阅读以下代码，写出以下程序的执行结果var foo = "123";function print() { var foo = "456"; this.foo = "789"; console.log(foo);}print(); 分析在函数print中，this指向的是window，所以this.foo = "789"改变的是全局变量foo的值，局部变量foo的值并没有改...
2020-06-18 11:46:31
570
原创 JS实现加法计数器
功能说明输入n（n>=0），将输出从0到n的和。代码废话不多说了，直接上代码。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init...
2020-06-18 11:46:00
1755
原创 javascript笔试题（一）
说明下面的一些笔试题是我在学习的过程中（看视频，看书）遇到的一些有关js笔试的题目，我把它们都一一记录并进行了分析，用来分享给大家！1、下题中console.log打印的结果是多少？var str = "abc";str += 1;var test = typeof(str);if (test.length == 6) { var sign = "typeof返回结果可能为S...
2020-06-18 11:44:37
1415
1
原创 JavaScript常见的数组去重的方法
1、使用ES6 Setvar arr = [1, 1, 4, 2, 2, 3, 3, 3, 6, 6, 6];arr = Array.from(new Set(arr));console.log(arr);//[1, 4, 2, 3, 6]2、使用forEach和indexOf方法使用forEach遍历原数组arr，使用indexOf查找元素，如果元素在新数组中不存在，就将当前元素放入新数组newArr。var arr = [1, 1, 4, 2, 2, 3, 3, 3, 6, 6, 6];
2020-06-18 11:43:46
96
原创 div水平垂直居中的实现方式
前提在面试的时候，面试官可能会问到如何让一个div水平垂直居中呢？接下来我将为大家列举常见的几种方法来实现它。准备首先准备一个父盒子和一个子盒子，并给它们添加一下样式，方便我们观察。HTML代码<div class="parent"> <div class="son"></div></div>CSS代码.parent { wid...
2020-06-18 08:49:15
398
原创 清除浮动的几种方法
为什么要清除浮动？清除浮动主要是为了解决父元素因为子元素浮动而引起高度为0的问题。一个需要清除浮动的例子<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>清除浮动的常见用法</title> <style> .box {...
2020-06-17 15:57:55
166
原创 div水平居中的几种方法
前提在面试的时候，面试官可能会问到如何让一个div水平垂直居中呢？接下来我将为大家列举常见的几种方法来实现它。准备首先准备一个父盒子和一个子盒子，并给它们添加一下样式，方便我们观察。HTML代码<div class="parent"> <div class="son"></div></div>CSS代码.parent { wid...
2020-06-17 15:57:02
38067
2
原创 JavaScript变量提升
1、概念在JS中使用var来声明变量时，在预编译的过程中，会提升到当前作用域的顶端，赋值undefined，而赋值操作在原处不变。2、变量提升变量声明console.log(a);//输出undefinedvar a = 10;console.log(a);//上面给a赋值的语句执行完毕，所以输出103、函数提升常见的函数定义的方式由两种：函数声明和函数表达式//函数表达式var fn1 = function(){}//函数声明function fn2(){}函数表达式声明和变
2020-06-17 12:53:56
167
原创 JS打印100以内的质数
需求打印100以内的质数代码//打印100以内的质数//质数是指在大于1的自然数中，除了1和它本身以外不再有其他因数的自然数。var count = 0;//从2开始for (var i = 2; i < 100; i++) { //判断i是否是质数，从1开始进行取模计算到它自己 for (var j = 1; j <= i; j++) { if (...
2019-12-04 10:45:22
3574
原创 JS计算2的n次幂
提出需求最近我正学习到JS的for循环这个知识点，老师给我们布置了一个作业：计算2的n次幂，n可输入，n为自然数。思考过程这里我们将value当做计算后的值。当n=0时，value=1；当n=1时，value=2；当n=2时，value=22；当n=3时，value=2*2*2；当n=4时，value=2*2*2*2；。。。。。。我们发现，当n>1时，value的值只是...
2019-12-04 08:32:24
9757
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人