- 博客(46)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 v-if 与 v-show的区别
前言：虽然网上有很多资料说了v-if和v-show的区别，但是总是会忘记，不如自己做一次笔记，忘记的时候就可以直接来看看，希望对大家也能有所帮助。一.用法上的区别1.v-show不支持template2.v-show不可以和v-else一起使用二、本质上的区别1.v-show元素无论是否需要显示到浏览器上，它的DOM实际都是有渲染的，只是通过CSS的display属性来进行切换。2.v-if当条件为false时，其对应的...
2022-05-27 14:01:39
270
原创 Vue脚手架的安装
1.全局安装在桌面按window+r打开运行窗口，输入cmd进入命令行，输入npm install -g @vue/cli进行全局安装vue脚手架，前提是你要安装node。2.创建项目脚手架安装好后，在你需要创建项目的地方使用命令行打开或者在编程软件中打开终端，输入代码vue create 项目名这时命令行会让你选择创建那个版本的vue，以及自己配置，配置好后输入回车就可以创建一个项目了，创建好后输入cd 项目名进入该项目，输入npm i 下载相关依赖，最后使用npm run
2022-03-27 11:02:02
10081
原创 ES6新特性(超详细)
ES6是每个前端工作人员绕不开的知识点，因此需要好好学习，本文内容是我购买莫振杰的《从0到1ES6快速上手》所做的笔记，内容已经获得作者的同意，另外推荐新手一个学习网站，绿叶学习网 - 给你初恋般的感觉，站长写的很好，适合新手从0到1，加油，一起成为优秀的前端开发者！！（由于还没看完整本书，该内容会持续更新）
2022-03-18 18:07:29
9216
2
原创 react实现兄弟组件传值，新增和删除记录
一、项目的创建 创建一个空白文件夹，打开控制台，输入命令: npx create-react-app my-react(项目名称) 搭建一个react的脚手架，搭建完成之后输入npm my-react 进入项目 这个时候我们就可以输入npm start 启动项目了二、修改App.js文件配置 找到项目中src文件夹中的的App.js文件，打开，然后将内容全部删除，再输入如下代码:import React,...
2021-12-19 17:16:32
597
原创 react 类组件的事件绑定方法
一、创建类组件 在js或者jsx文件夹中输入命令如下：import React, { Component } from 'react'export default class a extends Component { render() { return ( <div> </div> ) }} 就创建了一个最...
2021-12-17 10:19:31
815
原创 react 脚手架的搭建
一、输入npx指令创建 创建一个空白文件夹，然后用vs code打开，并在该文件夹下打开集成终端(控制台)，然后输入命令如下：npx create-react-app my-app就创建了一个名为my-app的react项目，然后输入cd my-app进入该项目，再输入npm start启动该项目，则一个最简单的react脚手架就搭建好了...
2021-12-17 10:13:02
110
原创 react函数组件
一、创建一个函数式组件function MyComponent(){ return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>}二、渲染组件到页面ReactDom.render(<MyComponent/>,document.getElementById("test")) 上面代码是将函数组件以标签化的形式渲染到id为test的元素当中三、函数式组件的渲染流程 1.React解析组件...
2021-12-16 20:58:42
429
原创 jsx语法规则
1.定义虚拟DOM时，不要写引号""2.标签中混入JS表达式时，要用花括号{}3.样式的类名指定不要用class，要用className4.内联样式，要用style={{key:value}}的形式去写5.虚拟DOM必须只有一个根标签6.单标签必须有结束<input /> 或者变成双标签<input></input>7.标签首字母规则： （1）若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则...
2021-12-16 18:46:47
129
原创 JS高级的常用知识点（二）
一、方法过载 在构造函数中直接定义方法，在实例化的时候，每一个对象都会有一个独立的方法，不同对象的同一个方法放在了不同的内存地址上，浪费了内存资源。function MyPlane(src) { this.src = src this.move = function(){ console.log('移动') } this.init = function() { console.log('初始化,插入节点') }}//实例化两个对象，两个对...
2021-11-02 21:26:29
376
原创 构造函数的写法
<script> function MyPlane(src){ this.src = src; this.move = function(){ console.log('移动') } this.init = function() { console.log('初始化,插入节点') } } let myPlane = new MyPlane('小飞机') .
2021-11-02 19:57:41
868
原创 JS高级的常用知识点（一）
一、ES6新增数据类型在ES5及以前数据类型分为基本数据类型和引用数据类型，基本数据类型有五种，分别是String、Number、Boolean、Undefined、Null这五种，而引用数据类型实际上只有一种，那就是object对象，像数组这类的其实都属于object数据类型。 ES6新增了一种数据类型Symbol,它也属于基本数据类型，表示独一无二的值 Symbol的特点如下: 1.它属于基本数据类型 ...
2021-11-01 20:06:45
223
原创 原生js中的ajax请求
作为一名程序员，虽然在实际使用时没有用原生js的ajax请求，但是我们要清楚js中的ajax的底层原理，才能走的更深。好了废话少说，下面我们用node服务器来作为后台，使用ajax来进行访问。 现在我们使用express脚手架搭建好了一个node服务器，express脚手架的安装命令为:npx express-generator --views=ejs 项目名,这句命令要在终端中输入，即vscode的集成终端或者dos窗口中进行输入。 一切配置好后我们...
2021-10-18 21:24:11
459
原创 使用nodejs搭建一个非常简单的服务器
作为前端工作者，我们可以使用nodejs搭建一个简单的服务器，用于测试，下面我们将使用node内置的http模块搭建一个服务器，非常简单。 实际上只有三个步骤： 1.引入http内置模块 2.创建一个服务 3.监听端口一个简单的服务器就搭建好了，fuwu.js实例代码如下://*******搭建简单服务器******//引入http内置模块const http = require('http')//创建服...
2021-10-14 20:32:30
1173
原创 nodejs 内置模块 fs文件操作系统
一、引入 在js文件中输入命令:const fs = require("fs")及可引入内置的fs模块const fs = require('fs');二、使用方法 1.fs.readFile(文件路径,编码,callback回调函数) 该方法用于读取文件，实例代码如下:fs.readFile('./f2.txt','utf-8',function(err,data){ if(err){...
2021-10-14 20:20:44
257
原创 nodejs模块
一、概念 一个文件就是一个模块，该文件能提供一个特定的功能，模块与模块之间可以存在一定的依赖关系，它的意义是可以使js文件引入js文件，这个概念听起来不太好懂，但是看到代码就明白了。二、module.exports的使用 1.暴露要想实现js文件被其他js文件调用，那么就需要使用module.exports将js文件中的函数或者方法暴露出去，在别的js文件中使用require进行引入。 格式：module.exports = 暴露的...
2021-10-14 20:05:17
168
原创 判断js文件在那个环境下解析的
1.如何判断js文件是在浏览器中解析还是在nodejs中解析呢？我们可以用一个if条件来进行判断：if(typeof window == 'undefined'){ console.log('Nodejs');}else{ console.log('browser');}如果是在nodejs中解析的js，那么就不存在window对象。...
2021-10-14 19:11:51
116
原创 nodeJs基础
作为一名程序员，我们在学习新的知识之前，一定要明白它是什么，为什么要学习它，带着目的去学习，才能有方向，好了闲话少说，让我们正式进入nodejs的学习。首先我们要明白：一、什么是nodejs？它为什么后面带了js呢？，在这之前我们要了解js是什么。js就是脚本语言，而脚本语言就是需要一个依赖环境才可以运行，js我们经常在html进行引入，而我们电脑中的浏览器就充当了js的依赖环境，负责js的解析。明白了js之后，我们就可以了解nodejs了，以前我们的js在浏览器上进行解析，而现在我们可以通
2021-10-14 19:04:39
356
原创 VUE-router的使用流程
1.安装项目vue create 项目名称选中 router2.项目中 router文件夹中的index.js用于配置路由components文件夹用于存放可重用的组件，而做组件的目的就是为了实现重复使用，节省代码views文件夹存放与路由器绑定的内容3.建立导航文件，存放在components文件夹中，如果需要导航文件在访问服务器时就显示，则需要到App.vue入口文件中，引入导航文件，配置，使用4.*在views中新建需要使用的组件*在router文件夹中的index.js中按需
2021-09-06 23:24:04
220
原创 引用数据类型和原始数据类型的区别（内存存储的机制不同）
原始类型的复制和引用类型的复制是不一样的原始类型：数据存储在栈中引用类型：数据存储在堆中引用数据类型的复制，默认只复制地址，又称为浅拷贝，如果只复制值的话，称为深拷贝。数组如果想要深拷贝，拷贝原数组的值就可以了ES6中语法为 arr2=[...arr];...
2021-07-25 23:38:43
220
原创 JS函数基本概念
在任何语言的学习中，函数是永远避不开的一个知识点，因为函数可以将许多重复的代码封装成一块，使用的时候直接调用就好了。所以函数是非常重要的。一、函数的定义 1.在js中可以理解为重复使用的代码块 2.函数是由事件来进行驱动的，（关于事件的学习可以在我后面的JS事件中去学习），或者直接被调用时执行的可重复使用的代码块二、函数的作用 1.可以重复使用 2.能够将代码功能以模块的形式进行分离，提高代码的可读性，建立模块化编程的思想三...
2021-07-25 23:37:52
638
原创 Javascript数组
一、数组的定义 数组也是一个变量，可以存储一组数据 数组名：数组的整体 数组的元素：存放在数据中具体的数据 数组的下标：序号从0开始 如果输出的时候下标超出数组长度，则会显示undefined二、定义数组 1.使用new关键字 var arr = new Array(数字表示数组大小，也可以直接放值); 2.数组赋值 ...
2021-07-15 16:52:55
154
原创 switch选择结构的正确使用
switch选择通常用于等值判断，如果要判断一个区间，一般是用if来进行，下面我们根据一个实例来进行理解：*输入一个学生的成绩，如果分数90<=并且<=100则评级为A，如果80<=并且<90则为B，依次向下评分为70<=分数<80为C，60<=分数<70为D，0<=分数<60为E，输入其他情况则报错。如果我们使用if来进行选择，则代码块如下：<script type="text/javascript">
2021-07-13 16:09:25
1037
原创 Javascript中的选择结构
一、if选择结构 1.if 单分支：只有一个分支的情况 结构： if(条件表达式){如果条件成立，执行本语句} 2.if else 双分支：有两种情况的时候使用 结构：if(条件表达式){...
2021-07-13 15:47:09
3481
原创 JS的编程结构
1.顺序结构（默认结构）：从上到下依次执行2.选择结构：根据条件判断执行不同的代码，可分为单分支、多分支3.循环结构：根据条件进行重复执行，不满足条件就结束循环
2021-07-13 15:31:15
92
原创 Javascript基础：ECMAScript5基本概念
一、变量 含义：存储数据的容器，存放在计算机内存中的一个地址块 变量的申明： 1.var 变量名; 变量没有赋值时，它默认为undefined类型 一个var也可以同时声明多个变量名，其中变量名之间必须用英文逗号（,）隔开 2. var 变量名=值; 变量的命名规则： ...
2021-07-12 17:46:26
359
原创 Javascript基础:基本概念
一、javascript是什么 简称js，是一种解释性语言，被浏览器解释执行，不需要编译 js作用：增强客户端的交互效果（比如js事件、对html元素进行修改、验证数据等）二、JS的体系 分为三类： 1.ECMAScript:定义js语言你的基本语法规则和原生对象 2.BOM(浏览器对象模型),包含DOM:与浏览器进行交互的方法 3.DOM(文档对象模型),被BOM包含:处理网页内容的方法三、...
2021-07-12 16:26:40
135
原创 cursor属性
该属性用来定义将鼠标移动到标签上显示的形状常用属性： cursor: auto(默认)pointer（手指） wait(等待) help(帮助)...
2021-07-04 13:39:21
508
原创 CSS3基础知识
一、css3与之前的css版本的区别css3向下兼容css3部分属性在部分浏览器存在兼容性问题二、css3新增选择器 1.字符串匹配属性选择器 元素名[属性="值"] 全匹配元素名[属性^="值"] 表示以"值"开头的元素元素名[属性$="值"]表示以“值”结尾的元素元素名[属性*="值"]...
2021-07-02 19:25:20
192
原创 CSS基础：定位positon
一、属性值： 1.static （默认值）没有定位 2.relative 相对定位 无论是标准元素还是浮动元素，相对于它没有定位前的位置进行偏移top和bottom left和right各自都只能设置一个 3.absoule 绝对定位会脱离标准文档流变成行内块级元素，宽高由内容的宽高决定...
2021-07-02 18:21:15
179
原创 CSS基础概念
一、文档流 1.标准文档流（默认）：从上到下，从左到右 2.浮动流 ： 左浮动：从左到右 右浮动：从右到左 如果一行内容满了则换行显示二、伪类选择器 概念：相当于一个类 a标签的伪类： a:link 默认样式 a:visited ...
2021-07-02 18:01:23
74
原创 盒子的计算模式：box-sizing
属性取值有两个：1.content-box 标准模式（默认） 盒子总尺寸=内容+padding+border+margin2.border-box模式 内减（怪异）模式 盒子总尺寸=内容（设置的宽高=内容+padding+border）+margin如果DOCTYPE缺失将会在IE6\7\8下自动触发该模式...
2021-07-02 16:50:58
240
原创 CSS基础：浮动
一.float取值 none left right二.浮动特点 1.浮动元素将脱离文档流，不占用位置 2.浮动元素不会覆盖行内元素， 比如文字内容 3.浮动元素变为行内块元素，浮动元素后面的内容依次向上填充，它的宽高由内容的宽高决定 4.浮动只有一个层级，如果同级元素设置了左浮动，那么从左到右依次连续浮动三.浮动带来的问题 会导致父盒子塌陷四.如何解决...
2021-07-02 16:43:41
140
原创 CSS基础-第二天
常用单位 1.px 像素 2.em 倍速 相对于字体大小的倍速 3.% 百分比常用属性 1.width 宽度 2.height 高度 一般不设置高度，用内容把高度撑开CSS常用属性 一、文本属性 1.color 展示方式： *单词 *十六进制...
2021-06-28 18:22:46
83
原创 CSS预习内容
一、字体样式 1.font-family 2.font-size 3.font-weight 4.color二、文本样式 1.首行缩进：text-indent 2.水平对齐:text-align 3.文本修饰:text-decoration 4.行高:line-height字体样式和文本样式的区别：字体样式针对的是...
2021-06-28 00:07:17
110
原创 使用CSS使div块内容垂直居中的方法
一·line-height如果内容只有文本，则可以使用line-height属性，值与父级的高度一样就可以实现垂直居中效果二·div块使用margin 可以在该块使用margin或者margin-top属性将内容顶下来，实现垂直居中三·使用padding 使用方式跟margin的一样 注意都需要在该div使用，在它的父级使用也可以，但是会有缺陷，如果该div块的高度与父级的高度一样或者高度+margin/padding的高度超......
2021-06-27 11:21:38
3044
原创 CSS层叠样式表
一、版本 css1.0 css2.0(主要) css3.0(存在兼容问题)二、如何引用css 内联样式 内部样式 外部样式： link标签（主要使用） @import导入 重点：link标签与@import导入的区别：1.link属于标签，@import是CSS提供的一种方式...
2021-06-25 20:49:48
81
原创 HTML表单
一、属性 1.method 提交方式 get: 用户的信息显示在url上，导致信息不安全并且数据传输有限制 post: 数据存储在发送请求的头部中 数据没有大小限制，相对安全 2.action 提交的地址：数据提交到那里去 3.enctype编码类型text/plain:文本类型...
2021-06-25 20:33:28
75
原创 HTML的元素划分规则
1.块级元素：p div table h1-6等 可以独占一行 能设置width height 能设置margin的上下2.行内（内联）元素： span a input等 不独占一行 不能设置width height 不能设置margin的上下3.行内块元素：img video 等 不独占一行 能设置width height 能设置ma...
2021-06-25 19:13:30
179
原创 HTML其它标签
其他标签 div:容器，划块 span 范围 video(h5) audio(h5) embed 多媒体 iframe 内连框架 src地址 width宽度 height高度H5其他标签header 头部sectionmain 主体asidefooternav 导航hgroup 标题组...
2021-06-25 19:08:13
82
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人