前端小菜羊-CSDN博客

原创 react-脚手架初始化项目

全局安装# 全局安装npm install -g create-react-app# 构建一个my-app的项目npx create-react-app reactprojectcd reactproject# 启动编译当前的React项目，并自动打开 http://localhost:3000/npm start以上命令执行完成后，则自动打开： http://localhost:3000/项目目录删除目录中我们不需要用到的文件（public中只需保留html文件）├── pack

2021-08-25 11:22:40 141

原创 React介绍

React 介绍React 是什么React 是 facebook 推出的用于构建用户界面的前端 javascript 框架https://reactjs.org/React 使用组件构建用户界面组件是什么？一块区域，包含了 html css 及 javascript组件开发的优势将一个庞大复杂的应用程序拆分成多个独立单元组件之间互相独立，有利于应用程序的维护组件可以重用，一次编写多地复用自定义Webpack搭建webpack环境创建Package.json{ "n

2021-08-25 10:55:09 119

原创 Virtual DOM

Virtual DOM什么是 Virtual DOMVirtual DOM(虚拟 DOM)，是由普通的 JS 对象来描述 DOM 对象真实 DOM 成员let element = document.querySelector('#app')let s = ''for (var key in element) { s += key + ','}console.log(s)使用 Virtual DOM 来描述真实 DOM{ sel: "div", data: {},

2021-08-25 10:17:26 110

原创 Vue.js 响应式原理

Vue.js 响应式原理准备工作数据驱动在学习 Vue.js 的过程中，我们经常看到三个概念：数据驱动数据响应式双向数据绑定响应式的核心原理核心原理分析Vue 2.x 版本与 Vue 3.x 版本的响应式实现有所不同，我们将分别讲解。Vue 2.x 响应式基于 ES5 的 Object.defineProperty 实现。<script> var obj = { name: 'rae', age: '18' }

2021-08-21 21:02:39 447

原创 Vue CLI

Vue CLIVue CLI 是一个基于 Vue.js 进行快速开发的完整系统，称为脚手架工具。统一项目的架构风格。初始化配置项目依赖。提供单文件组件。操作方式：命令行工具安装安装• npm install –g @vue/cli升级• npm update –g @vue/cli项目搭建-创建项目：• vue create project-demo选择 Preset选择包管理器创建完成运行项目：• npm run serve运行项目目录与文件文件目录介

2021-07-04 19:30:55 61

原创 Vue Router

Vue RouterVue Router 是 Vue.js 的官方插件，用来快速实现单页应用。单页应用SPA（Single Page Application）单页面应用程序，简称单页应用。指的是网站的 “所有” 功能都在单个页面中进行呈现。具有代表性的有后台管理系统、移动端、小程序等。优点：前后端分离开发，提高了开发效率。业务场景切换时，局部更新结构。用户体验好，更加接近本地应用。缺点：不利于 SEO。初次首屏加载速度较慢。页面复杂度比较高。前端路由前端路由，指

2021-07-04 16:47:50 159

原创 Vue.js组件

Vue.js 组件组件用于封装页面的部分功能，将功能的结构、样式、逻辑代码封装为整体。提高功能的复用性与可维护性，更好的专注于业务逻辑。组件使用时为自定义 HTML 标签形式，通过组件名作为自定义标签名。组件注册全局注册全局注册的组件在注册后可以用于任意实例或组件中。注意：全局注册必须设置在根 Vue 实例创建之前。Vue.component('my-component',{ template:'<div>这是我们全局注册的组件</div>' })组件

2021-06-27 19:48:41 182

原创 vue.js基础

Vue.js 简介Vue.js 是什么？前端流行框架Vue.js 核心特性数据驱动视图• 数据变化会自动更新到对应元素中，无需手动操作 DOM，这种行为称作单向数据绑定。• 对于输入框等可输入元素，可设置双向数据绑定。• 双向数据绑定是在数据绑定基础上，可自动将元素输入内容更新给数据，实现数据与元素内容的双向绑定。• Vue.js 的数据驱动视图是基于 MVVM 模型实现的。• MVVM (Model – View – ViewModel )是一种软件开发思想• Model 层，代表数据

2021-06-19 17:03:56 164

原创层叠上下文（stacking context）

一、什么是层叠式上下文层叠上下文，是HTML中的一个三维概念如果元素具备以下任何一个条件，则该元素会创建一个新的层叠上下文。根元素 z-index不为auto的定位元素二、什么是层叠级别同一个层叠上下文的背景色以及内部元素，谁在上谁在下，这些都是由层叠级别来决定的。层叠级别是针对同一个层叠上下文而言的。在同一个曾得上下文中，层叠级别从低到高排列如下：边框和背景：也就是当前层叠上下文的边框和背景负z-index：z-index为负值的“内部元素” 块元素：普通文档流下的块盒子

2020-12-17 16:19:10 1352

原创 css属性简写

一、盒模型简写属性说明 border 边框 padding 内边距 margin 外边距 1、边框完整形式：border-width:1px;border-style:solid;border-color:red;简写形式：border: 1px solid red;当我们只想定义三条边的样式时：border:1px solid red;border-bottom:0;或者 border-bottom:none;2、内边距

2020-12-15 14:46:59 424

原创深入定位布局

定位布局的注意点：默认情况下，固定定位元素和绝对定位元素的位置是相对于浏览器而言的的，相对定位元素是相对于原始位置而言的， position一般配合tip、bottom、left和right元素来使用。元素只有在定义position属性之后，top、bottom、left、right才生效这四个属性不会全都用到，一般只会用到其中的两个 position：absolute会将元素转换成block元素一、子元素相对于父元素定位语法：2父元素{position：relative}子元素

2020-12-11 15:13:36 211

原创清除浮动的方法

一、clear：bothclear属性运用于浮动元素后面的元素clear元素取值：left、right、both通常会使用clear：both<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=, initial-scale=1.0"> <title&gt

2020-12-10 16:46:24 82

原创浮动带来的影响

一、浮动对自身的影响一旦元素设置了浮动，不管这个元素是什么类型，都会转化为块元素，也就是此时display属性的取值为block。举例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti

2020-12-10 15:31:49 1701

原创盒子模型之负margin技术

负margin对普通文档流元素的影响，可以分为两种情况：当元素的margin-top或者margin-left为负数时，“当前元素”会被拉向指定方向。当元素的margin-bottom或者margin-right为负数时，“后续元素”或被拉向指定发向。举例：margin-top或margin-bottom为负数<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpo

2020-12-03 16:22:07 425

原创盒子模型之外边距叠加

在开发过程中，可能会遇到这样的一种情况，有相邻的两个块元素A和B，其中A定义了一个margin-bottom,B定义了一个margin-top。当我们在浏览器中查看时，明显发向A和B的垂直距离明显小于相加之和。这个现象是由外边距叠加所引起的。外边距叠加有三种情况：1、同级元素叠加当一个元素出现在另一个元素上面的时候，第一个元素的下边距就会和第二个元素的上边距发生合并。2、父子元素叠加当一个元素包含在另外一个元素中时，加入没有padding和border把外边距分隔开，父元素和子元素的相邻上下外边距

2020-12-01 14:07:08 277

weixin_47124862的博客