- 博客(99)
- 收藏
- 关注
RSS订阅原创 Git的使用
1、本地仓库的工作流程Git本地操作的三个区域：工作区：执行添加、编辑、修改文件等操作暂存区：暂存已经修改的文件最后统一提交到git仓库Git仓库：最终确定的文件保存到仓库，成为一个新的版本，并且对他人可见2、git的常用指令查看当前状态：git status添加到缓存区：git add 文件名 (可以添加一个文件，也可以同时添加多个文件)提交至版本库：git commit -m “注释内容”3、版本回退步骤一：查看版本，确定需要回到的时间点指令：git log
2021-11-08 18:21:16
129
原创 Git的使用
1、本地仓库的工作流程Git本地操作的三个区域：工作区：执行添加、编辑、修改文件等操作暂存区：暂存已经修改的文件最后统一提交到git仓库Git仓库：最终确定的文件保存到仓库，成为一个新的版本，并且对他人可见2、git的常用指令查看当前状态：git status添加到缓存区：git add 文件名 (可以添加一个文件，也可以同时添加多个文件)提交至版本库：git commit -m “注释内容”3、版本回退步骤一：查看版本，确定需要回到的时间点指令：git log
2021-11-08 18:13:12
167
原创 AJAX.
1、AJAX简介AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XM通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据2、XML简介XML 可扩展标记语言XML 被设计用来传输和存储数据XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签， 全都是自定义标签，用来表示一些数据XML已经被JSON取代比如有一个学生数据： name = "孙悟空" ; age
2021-11-04 16:39:03
177
原创 1、初始react
1、什么是react是一个用于构建用户界面的 JavaScript 库如果从 MVC 的角度来看，React 仅仅是视图层（V），也就是只负责视图的渲染，而并非提供了 完整的 M 和 C 的功能2、react的特点声明式基于组件学习一次，随处使用3、react的安装安装命令：npm i react react-domreact 包是核心，提供创建元素、组件等功能react-dom 包提供 DOM 相关功能等4、react的使用引入 react 和 react-dom 两
2021-11-02 16:32:45
108
原创 23、路由
1、什么是路由路由（英文：router）就是对应关系2、SPA 与前端路由SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。 此时，不同组件之间的切换需要通过前端路由来实现在 SPA 项目中，不同功能之间的切换，要依赖于前端路由来完成3、什么是前端路由通俗易懂的概念：Hash 地址与组件之间的对应关系工作方式：：用户点击了页面上的路由链接， 导致了 URL 地址栏中的 Hash 值发生了变化前端路由监听了到 Hash
2021-10-31 10:31:37
89
原创 22、自定义指令
1、什么是自定义指令vue 官方提供了 v-text、v-for、v-model、v-if 等常用的指令。除此之外 vue 还允许开发者自定义指令2、自定义指令的分类vue 中的自定义指令分为两类，分别是：私有自定义指令全局自定义指令3、 私有自定义指令在每个 vue 组件中，可以在 directives 节点下声明私有自定义指令使用私有指令时，要加上v-前缀动态绑定参数值通过binding获取指令的参数update函数：bind 函数只调用 1
2021-10-30 16:10:09
594
原创 21、插槽
1、什么是插槽插槽（Slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把 不确定的、希望由用户指定的 部分定义为插槽可以把插槽认为是组件封装期间，为用户预留的内容的占位符每一个插槽都有一个name的属性，如果省略了name属性，则有一个默认名称：default如果在封装组件时没有预留任何 插槽，则用户提供的任何自定义内容都会被丢弃//使用left组件的位置<Left> <p>这是Left组件中的p标签</p></Left&
2021-10-30 16:08:55
213
原创 20、动态组件
1、什么是动态组件动态组件指的是动态切换组件的显示与隐藏2、如何实现动态组件渲染vue 提供了一个内置的组件，专门用来实现动态组件的渲染组件的占位符is的属性值：表示要渲染的组件的名字动态组件每一次切换，组件实例都会经历创建和销毁的生命周期<template> <div class="app-container"> <h1>App 根组件</h1> <hr /> <button @click=
2021-10-29 23:22:26
812
原创 19、购物车案例
1、Count.vue<template> <div class="number-container d-flex justify-content-center align-items-center" > <!-- 减 1 的按钮 --> <button @click="sub" type="button" class="btn btn-light btn-sm">-</button> <!-- 购买
2021-10-29 19:44:44
173
原创 18、ref引用
1、什么是 ref 引用ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用。 每个 vue 的组件实例上，都包含一个 refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下， 组件的 $refs 指向一个空对象2、使用 ref 引用 DOM 元素<template> <div class="fatherContainer"> <!-- 使用ref属性，为对应的DOM 添加引用名称 -->
2021-10-29 19:27:02
250
1
原创 17、生命周期&数据共享
1、生命周期 & 生命周期函数生命周期（Life Cycle）是指一个组件从创建 -> 运行 -> 销毁的整个阶段，强调的是一个时间段生命周期函数：是由 vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行注意：生命周期强调的是时间段，生命周期函数强调的是时间点2、父子组件之间的数据共享2.1 父组件向子组件共享数据（需要使用自定义属性）父组件：<template> <div> <son :msg="message
2021-10-28 16:31:15
142
原创 16、组件
1、什么是组件化开发 根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护2、vue组件的三个组成部分template -> 组件的模板结构script -> 组件的 JavaScript 行为style -> 组件的样式每个组件中必须包含 template 模板结构，而 script 行为和 style 样式是可选的组成部分3、templatetemplate 是 vue 提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的 DO
2021-10-27 17:58:13
73
原创 15、vue-cli
1、vue-cli的使用安装：终端输入 npm install -g @vue/cli创建项目：vue create 项目名称运行项目：从终端进入到项目的根目录npm run serve2、vue项目中src目录的构成assets 文件夹：存放项目中用到的静态文件 例如：css样式表、图片资源components文件夹：封装的可复用的组件，都要放到components目录下都要放到components目录下main.js：整个项目的入口文件，整个项目的运行，要先执行
2021-10-26 17:19:11
80
原创 14、axios
1、axios前端专注于网络请求的库2、axios的基本使用发起GET请求<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-widt
2021-10-26 12:42:05
65
原创 13、侦听器
1、watch侦听器watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作要监视哪个数据的变化，就把数据名作为方法名即可接收两个参数：新值在前、旧值在后 <!-- 2. 声明一个将要被vue控制的dom区域 --> <div id="app"> <input type="text" v-model="username"> </div> <!-- 1. 导入vue的库文件，在windo
2021-10-25 20:28:10
411
原创 12、过滤器
1、过滤器概述过滤器常用于文本的格式化， 常用在俩个地方：插值表达式 v-bind属性绑定过滤器应被添加在JavaScript表达式的尾部，由“管道符”进行调用过滤器中的形参是管道符前面的值过滤器的本质是一个函数，并且有一个返回值2、定义过滤器可以在 filters 节点中定义过滤器<!-- 2. 声明一个将要被vue控制的dom区域 --><div id="app"> <!-- 由管道符调用capitalize过滤器，对message的值进行
2021-10-25 16:52:05
173
原创 11、品牌列表案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>品牌列表案例<
2021-10-25 15:56:55
624
原创 10、vue指令
1、指令的概念指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构vue 中的指令按照不同的用途可以分为如下 6 大类：① 内容渲染指令 ② 属性绑定指令 ③ 事件绑定指令④ 双向绑定指令 ⑤ 条件渲染指令 ⑥ 列表渲染指令2、内容渲染指令内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容v-text{{ }}v-htmlv-text (会覆盖元素内默认的值)<!DOCTYPE html><html la
2021-10-25 10:34:22
201
原创 9、vue基础入门
1、概念一套用于构建用户界面的前端框架2、vue的特性数据驱动视图双向数据绑定2.1 数据驱动视图1. 在使用了 vue 的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构2. 好处：当页面数据发生改变时，页面会自动重新渲染2.2 双向数据绑定1. 在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源中2. 好处：开发者不再需要手动操作DOM，来获取表单最新的值3、MVVMMVVM是vue实现数据驱动试图和数据
2021-10-24 16:39:47
77
原创 8、Source Map
1、什么是 Source MapSource Map 就是一个信息文件，里面储存着位置信息。也就是说，Source Map 文件中存储着压缩混淆后的代码，所对应的转换前的位置。有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试2、解决默认 Source Map 的问题开发环境下，推荐在 webpack.config.js 中添加如下的配置，即可保证运行时报错的行数与源代码的行数保持一致module.exports = { // 代表webpack
2021-10-24 13:04:26
224
原创 7、打包发布
1、为什么要打包发布项目开发完成之后，需要使用 webpack 对项目进行打包发布，主要原因有以下两点： ① 开发环境下，打包生成的文件存放于内存中，无法获取到最终打包生成的文件 ② 开发环境下，打包生成的文件不会进行代码压缩和性能优化为了让项目能够在生产环境中高性能的运行，因此需要对项目进行打包发布2、配置 webpack 的打包发布在 package.json 文件的 scripts 节点下，新增 build 命令如下："scripts": { "dev": "webpack ser
2021-10-24 12:06:50
261
原创 6、loader
1、loader概述 1. 在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块，webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！ 2. loader 加载器的作用：协助 webpack 打包处理特定的文件模块。比如： css-loader 可以打包处理 .css 相关的文件 less-loader 可以打包处理 .less 相关的文件 babel-loader 可以打包处理 webpack
2021-10-24 10:31:16
96
原创 5、webpack
1、前端工程化前端工程化指的是：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化2、什么是webpack1. 概念：webpack 是前端项目工程化的具体解决方案2. 功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性能优化等强大的功能3. 好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性...
2021-10-24 08:50:38
95
原创 4、宏任务和微任务
1、什么是宏任务和微任务JavaScript 把异步任务又做了进一步的划分，异步任务又分为两类，分别是：1.宏任务（macrotask） 异步 Ajax 请求、 setTimeout、setInterval、 文件操作 其它宏任务2.微任务（microtask） Promise.then、.catch 和 .finally process.nextTick 其它微任务2、执行顺序每一个宏任务执行完之后，都会检查是否存在待执行的微任务，如果有，则执行完所有微任务之后，再继续执行下一个
2021-10-23 12:46:31
360
原创 3、async/await--EventLoop
1、什么是 async/await async/await 是 ES8（ECMAScript 2017）引入的新语法，用来简化 Promise 异步操作。在 async/await 出现之前，开发者只能通过链式 .then() 的方式处理 Promise 异步操作 .then 链式调用的优点： 解决了回调地狱的问题 .then 链式调用的缺点： 代码冗余、阅读性差、不易理解2、async/await的基本使用import thenFs from 'then-fs'async fun
2021-10-23 12:27:58
142
原创 2、Promise
1、回调地狱缺点： 1. 代码的耦合度太高 2. 大量冗余的代码相互嵌套，代码的可读性变差2、Promise的基本概念promise是一个构造函数： 1. 我们可以创建Promise的实例 p，const p = new Promise(); 2. new 出来的实例对象代表一个异步操作promise.prototype上包含一个.then()方法： 1. 每一次new Promise()构造函数得到实例对象 2. 都可以通过原型链的方式访问到.then()方法, p.then().
2021-10-23 11:03:23
63
原创 1. ES6模块化-导入-导出
1. 默认导出export default 默认导出的成员let n1 = 10;let n2 = 20;function show() {}export default { n1, show}注意: 1. 每一个js文件就是一个模块 2. 每一个模块只允许使用唯一的一次export default导出2. 默认导入import 接收名称 from '模块标识符'import m1 from './test1.js'console.log(m1);
2021-10-23 09:21:27
75
原创 6. toDoList案例
toDoList.js$(function () { load(); // 1. 按下回车键，把完整数据存储到本地存储里面 // 存储数据的格式：var todolist = [{title:"xxx",done:false}] $("#title").on("keydown", function (event) { // 判断用户是否按下的是回车键 if (event.keyCode === 13) { ...
2021-10-22 20:05:11
955
原创 5.jQuery其他方法
1. 对象拷贝浅拷贝<script> $(function () { var targetObj = { id: 2 }; console.log(targetObj); var obj = { id: 1, name: '张无忌', msg: { age: 35 } }; $.exten
2021-10-22 17:46:17
53
原创 4. jQuery事件
1、jQuery事件注册单个事件2、事件处理2.1 事件处理on()绑定事件on()方法的优势1：on()方法的优势2：click绑定在ul身上，但是触发的对象是ul下的小lion()方法的优势3：2.2 事件处理off()解绑2.3 自动触发事件trigger()3、jQuery事件对象4、发布微博案例<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"
2021-10-22 15:58:36
71
原创 3. 购物车模块案例
代码实现:<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>我的购物车-品优购</title> <meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便
2021-10-20 18:29:42
203
原创 2. jQuery的常用API
1. jQuery的选择器1.1 基础选择器 1.2 层级选择器1.3 jQuery筛选选择器1.4 jQuery筛选方法(重点)2. jQuery样式操作2.1 操作css样式2.2 设置类样式方法tab栏切换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic
2021-10-20 17:25:45
86
原创 1、初始jQuery
1、JavaScript库jQuery就是封装了原生js代码的js库，存放的都是一些函数2、jQuery的概念3、jQuery的优点4、jQuery的基本使用4.1 jQuery的入口函数4.2 jQuery的顶级对象$
2021-10-18 10:17:08
58
原创 8、本地存储
1、本地存储特性2、sessionStorage3、localStorage4、记住用户名案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-C
2021-10-17 17:08:17
57
原创 6、动画封装函数
1、动画实现原理核心原理：通过定时器setInterval（）不断移动盒子位置<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible
2021-10-17 15:59:37
66
原创 5、client、scroll系列
1. client概述2、立即执行函数3、scroll系列4、仿淘宝固定右边侧边栏<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compati
2021-10-17 12:17:28
67
原创 4、offset系列
1、offset概述2、offset和style的区别3、获取鼠标在盒子内的坐标<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible
2021-10-17 10:27:43
123
原创 3. location
1. location对象2. URL3. 5秒之后跳转页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="
2021-10-16 23:20:24
91
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人