- 博客(41)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 Vue2.0掌握这点就够了！！！
Vue方法Vue.component(name,obj|function) 全局注册Vue.minin(obj) 全局混入Vue.extend(options) 扩展，可以合并参数，类似混入Vue.directive(name,obj) 注册全局自定义指令Vue.filter(name,function) 全局注册过滤器Vue.use(plugin) 全局使用插件Vue.set(obj,key,value) 添加响应式数据Vue.nextTick(callback) 在下一次DOM更新循环结
2021-10-02 17:55:23
243
原创 Vue生命周期
Vue生命周期new Vue()实例化vue对象Init初始化事件和生命周期beforeCreate（可以加载动画）组件实例刚被创建，还没有实例化之前，执行一些初始化的操作未初始化this.$el undefinedthis.$data undefinedcreated（可以结束加载动画，发起异步网络请求）组件实例创建完成，属性已经绑定，但是DOM还没有生成，$el属性不存在，页面未被展示完成了data的初始化this.$el undefined
2021-08-04 17:15:51
363
原创 nodejs串口通信
nodejs串口通信（基础）let bodyParser = require('body-parser');let express = require("express"), app = express();let port = 8686;app.listen(port, () => { console.log(`server is success,listen on ${port}`);});app.use(bodyParser.json());app.use(bo
2021-06-09 20:54:32
3570
原创 nodejs操作mongoDB数据库(基础)
nodejs操作mongDB数据库/*** 数据库操作*///引入mongodb模块const { MongoClient } = require("mongodb");//连接数据库 (要输入对应用户名、密码、以及连接的哪个数据库)const uri = "mongodb+srv://gaominghui:<password>@cluster0.fp8ji.mongodb.net/sample_airbnb?retryWrites=true&w=majority";co
2021-06-09 20:42:16
223
原创 TS基础知识
TS基础基础配置(1)全局安装typescript npm install typescript -g(2)初始化tsc配置文件 tsc --init(3)编译 tsc tsc --watch命令： tsc --version tsc --init //初始化 tsc //编译 tsc --watch //自动编译数据类型//如果添加export import之类的代码，则可以将当前文件变为一个私有的模块，避免与全局变量的冲突export
2021-06-05 20:07:45
286
原创 vue domdiff实现原理
domdiffindex.js整合所有方法，并导出h：将一个节点渲染为一个虚拟dom节点render：更具虚拟dom节点创建真实动漫节点，并添加到盒子中去patch：新老元素比对import h from './h';import {render,patch} from './patch';export { h, render, patch}vnode.jsexport default function vnode(type,key,props,children,te
2021-05-23 17:46:29
54
原创 Vue MVVM原理
MVVM实现效果源码/**U/** * 3. 当数据更新时，视图更新 * 原理：给数据绑定观察者，订阅观察者，发布观察者数据更新 * 实现步骤： * 1. 通过给视图中的数据绑定watcher观察者；（观察者实现功能：提供数据获取和数据更新的方法，在获取数据时订阅watcher，在设置数据时发布watcher的updater） * 2. 写一个用于发布订阅watcher的方法 * 3. 在观察者中获取值时，触发数据劫持获取，给数据订阅watcher * 4
2021-05-21 19:03:44
542
原创 vue响应式原理（源码分析）
vue响应式原理(源码)vue2//vue2.0响应式原理//4. 实现对数组数据的更新let oldProto = Array.prototype;let proto = Object.create(oldProto);["push","shift","unshift"].forEach(item =>{//函数劫持：把Array原型上的函数劫持过来，//（push、shift、unshift方法虽然执行的是Array.prototype上的方法，但是他们指向proto了而不会指向
2021-05-19 19:39:38
135
原创 vue 3.0新特性
参考：https://www.jianshu.com/p/e073909239edvue3.0新特性在main.js中通过引入createApp方法来创建vue实例【vue2】import Vue from 'vue'import App from './App.vue'new Vue({ render: h => h(App),}).$mount('#app')【vue3】import { createApp } from 'vue'import App from
2021-05-17 22:38:13
346
原创 webpack总结
初始化npm init -y安装webpack和webpack-cli包npm install webpack --save-devnpm install webpack-cli --save-dev打包npx webpack [,配置文件名] //默认配置文件 webpack.config.my.js或yarn webpack或npm run webpack默认打包打包的文件所在目录固定为dist打包文件名默认为main.js打包js文件配置（webp.
2021-05-05 21:07:59
104
原创 练手项目——小总结
通过vue-cli创建一个项目npm install vue-cli -g 安装vue-clivue create cube-ui-project 创建项目vue init webpack cube-ui-project 初始化yarn serve 或 npm run serve 启服务配置一些选项这样就在文件中创建了一个cube-ui-project项目，在这个项目中：- build # webpack配置文件- config # vue项目配置文件- node_modul.
2021-04-25 19:36:59
141
原创 Vue初识
Vuevue是声明式编程，不是命令式编程vue实例创建一个Vue实例创建一个Vue实例 var vm = new Vue({});一个vue应用由2部分组成： 1. new Vue创建根Vue实例 2. 可选的、嵌套的、可复用的组件树 例：todo应用组件树： 根实例 └─ TodoList ├─ TodoItem │ ├─ TodoButtonDelete │ └─ TodoButtonEdit └─ T
2021-04-04 20:52:31
71
原创 本地存储和服务器存储
本地存储**本地存储：**把一些信息存储到客户端本地（主要目的有很多，实现有一个就是实现多页面之间的信息共享）离线缓存（xxx.manifest） H5处理离线缓存还是存在一些硬伤的，所以真实项目中一般都基于传统的native app来完成这件事localStorage / sessionStorage：H5中新增加的API，基于这个API可以把一些数据缓存到客户端本地（常用）indexDB / webSQL：本地数据库存储cookie：本地信息存储（存储）CacheStorage / App
2021-04-03 11:21:16
806
原创 express
express导入模块npm install express express-session body-parser基础使用// 导入模块let express = require('express'), app = express();// 创建服务，监听端口let port = 8686;app.listen(port, () => { console.log(`server is success,listen on ${port}`);});// 静态资
2021-03-14 21:04:10
52
原创 axios及ajaxPromise库的封装
axios它是一个类库，基于Promise管理的AJAX库APIaxios.get(url[,config]);axios.post(url[,data[,config]]);axios.request(config);axios.delete(url[,config]);axios.head(url[,config]);axios.put(url[,data[,config]])axios.patch(url[,data[,config]])基础操作发送一个get
2021-03-11 22:29:14
118
原创 封装promise库
Promise设计模式Promise是ES6中新增加的内置类：目的是为了管理异步操作的1. new Promise() 创建一个类的实例，每一个是来都可以管理一个异步操作 -> 必须传递一个回调函数进去（回调函数中管理你的异步操作），不传递会报错 -> 回调函数中有两个参数 resolve：异步操作成功要做的事情（代指成功后 的事件队列=>成功后要做的所有事情都存放到这个事件队列中） reject：异步操作失败哟啊做的事情（代指失败后的事件队列） -> new
2021-03-11 22:23:08
144
原创 node基础 && npm模块管理
NODE基础概念node并不是一门语言，它是一个开发工具或者环境之所以称node为服务器端语言，是因为node给予了JS操作服务器的能力：我们在服务器端安装node，只用js完成服务器需要处理的事情，最后把写好的js代码交给了node环境运行即可。node安装完成后当前电脑上自动安装了npm(node Package Manager)：一个JS模块（所有封装好可以供其他人调取使用的都可以称之为模块或者包）管理的工具，基于npm可以下载JS模块它会生成一个node执行的命令（可以在DOS窗口或
2021-03-08 15:53:30
142
原创 node常用的几个内置模块
node内置模块fs内置模块导入let fs = require('fs');使用：实现I/O操作1. fs.mkdir / fs.mkdirSync： 创建文件夹（异步、同步）（一般都是异步） fs.mkdir('./less',err=>{ if(err){ console.log(err); return; } }); 2. fs.readdir / fs.readdirS
2021-03-08 08:48:08
190
原创 AJAX基础知识点
AJAXAJAX是异步的JS和XML 在AJAX中的异步不是我们理解的同步异步编程，而是泛指“局部刷新”，但是我们在以后的AJAX请求中尽可能使用异步获取数据（因为异步获取数据不会阻塞下面的代码的执行） XML是一种文件格式（我们可以把HTML理解为XML的一种）：可扩展标记语言，它的作用是用自己扩展的一些语义标签来存储一些数据和内容，这样存储的好处是清晰的展示出数据的结构 在以前，AJAX刚刚兴起的时候，客户端从服务器端获取数据，服务器为了清晰表达数据结构，都是返回XML格式的内容，当
2021-02-25 18:32:51
122
原创 案例——放大镜（JQ实现）
效果图只要做到下面这几步，这个小效果轻松实现准备2张图片（一大一小）控制 移动盒子 / 小图片盒子 === 大图片盒子 / 大图片实现鼠标进入和离开小图片盒子时，大图片盒子和移动盒子的显隐实现移动盒子跟随鼠标在小图片盒子中移动实现大图片跟随小图片盒子移动上源码~ function() { let $magnigierBox = $('.magnigierBox'), $smallBox = $magnigierBox.find('.smallBox'),
2021-02-20 18:24:46
128
原创 案例——选项卡插件（原生JS实现）
效果图废话不多说，咋直接上源码！！~ function() { class TabPlugin { constructor(container, options = {}) { //第一个参数必须，并且传递的参数是元素对象 //参数合法性验证 if (typeof container === 'undefined' && container.nodeType === 1) {
2021-02-19 22:52:10
108
原创 案例——封装一个轮播图插件
说起插件，可能很多人搞不清楚插件和类库、组件、框架的区别，在这里，我先来简单的聊一聊它们之间的区别和联系类库提供一些真实项目中常用的方法，任何项目都可以把类库导入进来，调取里面的方法实现自己需要的业务逻辑，常见的有jQuery、ZEPTO插件具备一定的业务功能，例如：我们可以封装轮播图插件、选项卡插件、模态框插件等（插件规定了当前这个功能的样式结构，把实现功能的JS进行封装，以后想实现这个功能直接导入插件即可）常见的有swiper / iscroll / jquery-dialog / jqu
2021-02-17 12:32:59
323
1
原创 案例——轮播图（原生JS实现）
效果图首先我们来理一下思路搭建结构注意点：我们需要一个container轮播图容器，溢出隐藏我们需要一个wrapper容器用于存放所有的图片，wrapper相对于container定位，后期改变wrapper的left值实现轮播图的切换写样式…写js获取所有需要操作的元素获取数据（基于AJAX异步获取数据，当然没有服务器提供数据，只能自己写一点）实现数据绑定HTML页面（基于Promise管理异步操作）注意绑定的时候图片要多绑定一个，便于后面实现无缝轮播（每
2021-02-16 20:24:55
352
1
原创 案例——基本的动画效果
基于JS实现基本的动画效果代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>动画移动</title> <style> #div1 { width: 200px; height: 200px; background:
2021-02-14 20:23:26
91
原创 案例——图片的延迟加载（又称懒加载）
图片的延迟加载（图片的懒加载）图片的延迟加载是前端优化的重要手段之一，开始加载页面的时候，并没有真实的图片，当页面结构和数据都呈现完成后，在加载真实的图片步骤：在结构上，我们把img图片放到div盒子中，开始的时候图片的src为空，我们就把图片的地址存放到自定义属性 data-src中，我们给图片所在的盒子设置一个默认的背景图片占位（要求这张图越小越好 1KB）在JS中，当监听到页面中的结构和数据都加载完成后（或者设置一个间隔时间），开始把data-src自定义属性中存储的真实图片地址.
2021-02-13 18:51:58
378
原创 案例——瀑布流（JS实现 / JQ）
效果图代码html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Document</title> <link rel="stylesheet" href="css/baseCss
2021-02-11 16:17:20
122
原创 案例——jQuery实现选项卡
jQuery实现选项卡代码html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <!-- import css --> <link rel="stylesheet" href="css/tab.css"></head><bo
2021-02-10 22:15:44
96
原创 案例——跑马灯
跑马灯效果图代码html+css<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>跑马灯</title> <link rel="stylesheet" href="css/base
2021-02-09 17:18:55
135
原创 DOM的重绘与回流
DOM的重绘与回流计算DOM结构加载CSS生成渲染树浏览器基于显卡按照渲染树画页面重绘当某一个DOM元素样式更改（位置没有变，只是样式更改），浏览器就会重新渲染这个元素box.style.color = 'red';//触发了一次重绘box.style.fontSize = '16px';//又触发了一次重绘...//优化方案：//=>一次性将需要修改的样式搞定，例：//先写个样式类.xxx{ color = 'red', fontSize =
2021-02-08 17:04:23
194
原创 less基础
less它是css预编译语言，和它类似的还有sass、stuluscss是标记语言，不是编程语言，没有类、实例、函数、变量等东西；而less等预编译语言就是让css具备面向对象编程的思想；但是浏览器不能直接识别和渲染less代码，需要我们把less代码预先编译为正常的css后，交给浏览器渲染解析；less的编译在开发环境下编译（产品还没有开发完，正在开发中，这个是开发环境）导入less.js即可<!-- 1. less引入 --><link rel="styles
2021-02-08 11:53:14
174
原创 基于AJAX获取数据和实现数据绑定
基于AJAX获取数据和实现数据绑定在实际开发中，我们制作的页面中的数据都不是写死的，而是要通过服务器端提供的API接口地址，把数据请求过来，解析之后（获取到的数据一般都是JSON格式字符串，我们需要通过JSON提供的parse这个API接口进行解析，解析成对象，当然这里得考虑兼容），把数据绑定在HTMl页面中简单来说，分为三步骤获取数据数据解析数据绑定//例://A. 获取数据let productData = null;let xhr = new XMLHttpRequest()
2021-02-07 15:33:05
527
原创 npm模块管理（基础）
NPM模块管理安装node后，自带npm模块管理器我们需要一个第三方模块、插件、类库或者框架等，需要提前下载安装才可以使用百度搜索，找到下载地址，基于浏览器下载（资源混乱，不方便搜索）基于npm等第三方包管理器下载（yarn / bower …都是第三方模块）（npm是基于https://www.npmjs.com/下载资源的）常用命令：npm install xxx：把资源下载到当前目录下npm install xxx -g(--global):把资源或者第三方模块安装到的
2021-02-06 16:41:26
157
原创 案例——拖拽+左右弹跳+自由落体（JS源码实现）
拖拽案例代码：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>基本的拖拽效果</title> <style> body { -webkit-user-select: none; -moz-user-select: none;
2021-02-04 18:14:59
189
原创 案例——N级菜单
N级菜单效果图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>N级菜单</title> <style> #menu { width: 400px; background: burlywood; }
2021-02-01 20:48:45
96
原创 案例——模块化开发选项卡
选项卡效果图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>模块化开发选项卡</title> <style> * { margin: 0; padding: 0; box-sizing: border-box;
2021-01-31 21:05:18
65
原创 基于原生JS封装Tool库（源码）
Tool库var Tool = function() { //getElementByClassName在IE678中不存在，因此可以用来判断是不是低版本浏览器 this.flag = "getElementsByClassName" in document;};Tool.prototype = { constructor: Tool, //常用函数 //通过ClassName获取元素 getElementsByClassName: function(c
2021-01-30 21:31:39
221
原创 案例——原生js模块化开发日历控件
模块化开发日历效果图：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>日历控件</title> <style> body { -webkit-user-select: none; } #calendar {
2021-01-29 23:54:43
188
原创 案例——原生js返回顶部
原生JS实现返回顶部案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>返回顶部的案例</title> <style> body, div { margin: 0; padding: 0; -webkit
2021-01-29 17:37:42
84
原创 try catch / throw
js错误处理和异常调试查看报错F12调出控制台错误的处理try catch一旦发生错误，程序就终止执行了。但是js提供try-catch结构，允许对错误处理。try{ throw new Error('出错');//中断程序，抛出错误}catch(e){ console.log(e.name+":"+e.message); console.log(e.stack);}//Error: 出错// at <anonymous>:2:11try代码块抛出错
2021-01-24 12:14:54
238
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人