- 博客(50)
- 收藏
- 关注
RSS订阅原创 jqeury 和 vue的对比
1.jquery介绍：想必大家都用过jquery吧，这个曾经也是现在依然最流行的web前端js库，可是现在无论是国内还是国外他的使用率正在渐渐被其他的js库所代替，随着浏览器厂商对HTML5规范统一遵循以及ECMA6在浏览器端的实现，jquery的使用率将会越来越低2.vue介绍：vue是一个兴起的前端js库，是一个精简的MVVM。从技术角度讲，Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来，通过对数据的操作就可以完成对页
2020-09-02 13:29:10
152
转载 什么是MvvM
经典的 MVC 模式MVC 是最常见的客户端软件架构之一，它历史悠久，简单好用，易于理解，而且目前常见的 iOS 和 Android 开发，SDK 和与其搭配的 IDE 工具都是默认以 MVC 的方式来使用的。但是我个人更喜欢 MVVM 模式，也一直坚持使用 MVVM 模式来工作了很多年。最常见的客户端架构有三种：MVC: Model-View-ControllerMVP: Model-View-PresenterMVVM: Model-View-ViewModel在 MVC 里面，Mode
2020-09-02 13:21:08
261
转载 使用vue-cli（vue脚手架）快速搭建项目
1. 避坑前言其实这次使用vue-cli的过程并不顺利，反复尝试几次都遇到以下这个报错：将这个放在最前面说是希望大家在搭建前，应该先确保将node更新至6以上，这样能少走一些弯路。下面开始正式介绍整个构建过程。2. 使用 vue-cli 搭建项目下面整个过程是基于已经安装node.js和cnpm的基础上，node.js如何安装就不在这里详说了。如何全局化安装cnpm，这里简单提一下： npm install cnpm -g --registry=https://registry.npm.tao
2020-08-25 20:05:44
186
原创 配置webpack
1. 创建项目文件夹创建一个 webpackStudy2. nodejs初始化 npm init -y右键 webpackStudy 文件夹 打开终端 输入 npm init-y初始化后 :3. 安装模块 npm i webpack webpack-cli --save-dev安装中 :已完成3. 创建dist 文件夹 下新建 index.html 创建 src 文件夹 下新建 index.js...
2020-08-25 19:59:29
102
原创 使用gtihub pages搭建个人博客
GitHub Pages 本用于介绍托管在 GitHub 的项目， 不过，由于他的空间免费稳定，用来做搭建一个博客再好不过了。缺点：只能放静态页面，也就说github pages只能解析html、css、js，无法解析后端语言。[用户名.github.io] 将来访问路径博客搭建步骤：1. 下载安装git1.1 安装好后鼠标右键左面出现 git 说明已经安装完成1.2 查看安装 版本和配置完成 打开命令窗口 cmd 输入git -v 或者 git2. hexo创建博客安装步骤在桌
2020-08-23 15:51:27
118
转载 Node + Express搭建个人博客
初始化一个Express项目在Express框架的官方文档中，是通过生成器工具express-generator快速生成了一个Express应用，相关步骤如下：安装Express生成器 npm install -g express-generator初始化一个Express应用 express express-app如此便生成了一个名为express-app的Express应用。目录结构概览首先来看一下这个Express应用的目录结构，目录结构如下：express-app│ app
2020-08-17 22:59:52
248
原创 原生与Vue的钩子函数
1. js中钩子函数相当于回调函数回调函数 : 让开发者在特定的时候 执行自定义逻辑2. jQuery的动画钩子函数 让开发者在动画执行完毕之后 执行自定义逻辑 $("#one").animate({}, function() {})3. window对象的资源加载完毕的钩子函数让开发者在页面资源加载完毕之后 执行的自定义逻辑 window.onload = function() {}4. Vue 自定义指令的钩子函数 bind ：
2020-08-15 15:45:41
215
原创 Vue 常用api
Vue 环境1. 开发环境 :<!-- 开发环境版本，包含了有帮助的命令行警告 相当于jquery中的开发版本 开发中 经常使用 因为出错有提示--><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>2. 生产环境<!-- 生产环境版本，优化了尺寸和速度 相当于jquery.min.js --><!-- <script src="https:
2020-08-11 23:26:43
952
原创 node插件, MD5密码加密 与 解密
MD5加密插件使用步骤1 : github搜索 MD5步骤 二 :2.1 安装插件:终端输入 : npm install blueimp-md52.22.32.4引入 : md5插件2.5获取 password的值 : let password = $("#password").val();调用加密方法 : password = md5(password);2.6输入用户名 密码 :2.7打开 mongdb 连接数据库 Robo加密成功 :pas
2020-08-09 17:46:18
3549
转载 基于Koa2打造属于自己的MVC框架
Express和Koa作为轻量级的web框架，虽然灵活简单，几行代码就可以启动服务器了，但是随着业务的复杂，你很快就会发现，需要自己手动配置各种中间件，并且由于这类web框架并不约束项目的目录结构，因此不同水平的程序员搭出的项目质量也是千差万别。为了解决上述问题，社区也出现了各种基于Express和Koa的上层web框架，比如Egg.js和Nest.js也是基于Koa并结合自身业务需求，实现了一套MVC开发框架。我司的Node主要是用来承担BFF层，并不涉及真正的业务逻辑，因此该框架只是对Koa进行了相对
2020-08-03 23:40:56
783
原创 node.js
什么是node.js ?Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境 v8解析js是最快的nodejs是让js运行在服务器端nodejs里面的API大多数都是异步服务器端的js和浏览器端的js有什么区别?客户端的js三个组成部分 :DOM 文档对象模型 js操作网页内容的一套APIBOM 浏览器对象模型 js操作浏览器页面的一套APIECMAScript 一套js语法的规范 for服务端的js 只有ECMAScript
2020-08-03 23:20:50
177
原创 JS 6种继承方式
6种继承方式首先定义一个父类：构造函数 function Animal(name) { this.name = name || 'Animal'; this.sleep = function () { console.log(this.name + '正在睡觉！'); }; }原型上面的方法： Animal.prototype.eat = funct
2020-07-28 11:38:03
92
转载 JS 垃圾回收机制
JS的垃圾回收机制是为了以防内存泄漏，内存泄漏的含义就是当已经不需要某块内存时这块内存还存在着，垃圾回收机制就是间歇的不定期的寻找到不再使用的变量，并释放掉它们所指向的内存。1. 垃圾回收JavaScript引擎是如何发现清理它的?2. 内存管理主要概念是可达性可达性 :可达值 :一个简单的例子 : // user 具有对象的引用 let user = { name: "John" };这里箭头表示一个对象引用。全局变量“user”引用对象 {name:“John”} .
2020-07-26 17:51:43
127
原创 Es6 解构赋值和扩展运算符
什么叫做解构?在ES6中 按照一定的模式 从数组中提取数值 对应的变量进行赋值的操作 就叫做解构赋值本质上讲 解构赋值 就是模式匹配1. 解构赋值var [a, b, c] = [1, 2 ,3]// console.log(a, b, c);如果想要解构赋值成功 那么就必须保证两边的模式完全一样var [a, b, c] = [1,[2],{name : "lucy"}];// console.log(a, b, c);2. 解构不成功如果想要解构不成功 那么变量的
2020-07-18 15:05:00
359
原创 Bootstrap字体图标和less组件使用
字体图标库介绍 :其实就是把一些矢量图打包成一个字体文件 做成一个字体库 然后把这些编码给对应的类名1. css样式默认的图标设置设置font-family 就可以让常规得字符显示出不同的图标 矢量图 跟字体一样 可以改变颜色和大小body { font-family: "wingdings"; font-size: 30px; color: red; }html <body>
2020-07-18 13:53:54
498
原创 canvs画布的使用
canvs画布介绍canvas 就是画布的意思获取canvas 元素搭建canvas绘制环境(我们所有的绘制行为都是在这个环境下进行的)在内存绘制(仅仅存在于内存中 我们看不到)绘制到页面上(调用stroke方法)1.创建一个画布html <canvas id="myCanvas"> </canvas> 1.获取canvas元素 var canvas = document.getElementById("myCanvas");2.搭建canvas画
2020-07-11 15:28:28
1515
原创 弹性布局的介绍和使用
弹性布局的介绍弹性布局 也叫作伸缩布局 是c3中新增的一种布局方式 而且移动端用的居多注意 : 弹性布局 就是加在父盒子上 然后让子元素应用弹性布局弹性布局主轴， 副轴图 :css: <ul> width: 400px; height: 350px; border: 1px solid black; list-style: none; padding: 0;
2020-07-11 14:48:05
971
原创 响应式开发
响应式开发原理实现响应式开发需要使用到 媒体查询@media 是css3里面新增的属性通过判断屏幕得大小 来决定使用什么样得布局方式(让什么样得样式生效)屏幕得分类 :超小屏幕 width < 768px小屏幕 width > 768px && width < 992中屏幕 width > 992px && width < 1200大屏幕 width > 1200px语法 : @media(判断条件
2020-07-08 18:42:38
86
原创 ajax get 和 post请求的区别
ajax get 和 post请求发送ajax请求的5个步骤 : 1. 创建请求对象 2. 调用open方法 (open 方法里面来设置 请求方式和请求路径) 3. 设置请求(get请求不需要， 可以直接忽略, post请求必须设置请求) 4. 监听响应完成事件(在响应完成事件里面来获取响应体) 5. 发送请求创建请求对象var xhr = new XMLHttpRequest()调用open方法 就相当于
2020-07-08 17:16:59
99
原创 H5 本地存储
1. localStorage 本地存储本地存储 就是把数据存储在浏览器端本地存储的方法 :保存数据 localStorage.setItem(属性名字符串,属性值)// 保存数据 document.getElementById("btn1").onclick = function () { // 本体存储是以键值的形式来进行的 localStorage.setItem("name", "张三");
2020-05-17 12:18:38
463
原创 H5 新增页面结构标签
1.之前的布局全部使用div来布局基本网页结构 ：头部 logo 搜索框 导航栏主体部分 商品展示 左右结构 左中右结尾部 赞助商信息 友情链接 版权信息 合作商 <div class="header"> <div class="nav"></div> </div> <div class="main"> <div class="section
2020-05-17 10:25:05
453
原创 怎么让盒子向右均速移动呢？
盒子向右均速移动四个步骤 :1.声明一个变量来保存盒子的原始位置2.注册点击事件3.开启定时器3.1开始移动3.2把现在的位置值赋值给left属性3.3边界检测3.4 到目标位置清除定时器 停止运动4. 元素复位CSS : #box{ width: 100px; height: 100px; background-co...
2020-04-12 10:17:44
2018
原创 JS DOM 查用法
DOM元素:DOM元素：查(查找）1.1 (查元素)1.2 (查属性)1.3 (查内容)1.1 (查元素)类名获取元素名返回值IDgetElementById返回值只获取到一个元素,没有找到返回nullClassgetElementsByClassName返回值是一个类数组,没有找到返回空数组标签名geteElementsByTsagNa...
2020-03-22 12:47:39
86
原创 JS 克隆节点
克隆节点元素.cloneNode(参数)参数 : 布尔类型 true false(默认) //body部分 <div id="box"> 我是外面的大盒子 <h1>我是标题</h1> </div> //js部分 //获取元素 var box = document.getElementByI...
2020-03-15 12:29:54
1339
原创 JS 获取第一个和最后一个，子节点、子元素
1.获取第一个子元素和子节点获取第一个子节点 : 父元素.firstChild获取第一个子元素 : 父元素.firstElementChild //body部分 <ul id="ul"> wwwwww <!-- 我是注释 --> <li>我是li标签1</li> <li id="li2">我是li标签2</li&...
2020-03-15 12:06:44
17920
原创 JS 兄弟元素和兄弟节点
获取兄弟节点和兄弟元素1.获取兄弟节点 :上一个节点下一个节点 //body内容 <ul id="ul"> wwwwww <!-- 我是注释 --> <li>我是li标签1</li> <li id="li2">我是li标签2</li> <li>我是li标签3</li> <...
2020-03-15 11:49:01
2946
原创 JS DOM节点
1.网页内容是是由节点组成的分为:(1)元素节点(2)属性节点(3)文本节点(4)注释节点(5)文档节点节点三要素 :节点类型 : nodeType节点名称 : nodeName节点值 : nodeValue获取子元素 : 父元素.children谷歌火狐 : 获取到的是元素节点IE8 : 获取的是 注释 元素获取子节点 : 父元素.childNodes谷...
2020-03-15 11:17:50
84
原创 JS innerText、innerHTML和textContent的区别
<div id="box"> 我是div标签 <p>我是一个p标签</p> </div> var box =document.getElementById("box"); console.log(box.innerText); console.log(box.textContent);innerText...
2020-03-08 12:51:52
151
原创 JS *常用事件类型
事件分类鼠标事件click : 点击事件bdclick : 双击事件(300ms以内连续发生两次点击事件)mouseover : 鼠标进入mouseout : 鼠标滑出mouseenter : 鼠标进入mouseleave : 鼠标离开mousedown : 鼠标按下(左键)mouseup : 鼠标弹起mousewheel : 鼠标滚轮滚动键盘事件keyup : 键...
2020-03-08 12:27:30
143
原创 JS 点击事件介绍
html <div id="box" class="one" style="width: 100px; height: 100px; background-color: pink;">div1</div>script事件的注册方式 :1.直接在DOM元素中注册(html事件)直接在html标签通过onXXX=""来绑定事件2.在js代码中直接绑定(dom0级...
2020-03-08 12:18:55
323
原创 JS 操作元素属性
html<div class="one" id="box" style="width: 100px; height: 100px; background-color:pink;">我是个盒子</div>script //获取元素 var one = document.getElementsByClassName("one")[0];对象的取值和赋值方法: ...
2020-03-08 12:12:26
83
原创 JS 获取dom元素
html <div id="box" class="one" name="bbb" style="width: 100px; height: 100px; background-color: pink;">div1</div> <div id="box1" class="one">div1</div> <div id="bo...
2020-03-08 12:04:47
77
原创 JS 修改this指向
需求 : 改变this指向call()语法结构 : 函数名.call(this的新指向, 参数1, 参数2, …) var obj = { name: "lisi", age: 23 }; function sum(n1, n2) { console.log(n1 + n2); co...
2020-03-08 10:55:49
69
原创 JS 函数的执行方式
函数执行方式 最基本的有三种普通的函数调用 //this 谁调用就指谁 function test () { console.log(111); console.log(this); } test(); // this也是window, 表示默认是使用window调用 window.t...
2020-03-08 10:30:57
443
原创 闭包的理解
闭包的定义 : 在函数内部声明一个函数,这个函数可以访问函数内部声明的局部变量那么这个函数就是闭包理解 ： 之后函数内部的子函数才可以访问函数内部声明的局部变量//3. 这里的f4就是闭包 function f3(){ var n3 = 12; function f4(){ alert(n3); }; return f4;...
2020-03-01 12:40:01
47
原创 预编译
AO在函数被调用执行前的一个瞬间，生成一个AO对象(Active Object),(每一次调用函数都会生成一个AO对象，多次调用，产生的Ao对象没有任何关系)1.在函数执行的前一瞬间,生成一个AO对象 AO = {}2.分析参数 ， 形参作为Ao对象的属性名 ， 实参作为属性值3.分析变量声明变量作为属性名，实参作为属性值4.分析函数声明 函数作为属性名 函数体作为属性值 ，如果遇到同名...
2020-03-01 12:33:21
83
原创 arguments关键字
1.arguments 只能在函数里面使用, 在函数外使用 就会报错(1)arguments的作用 : 获取函数的所有实参(2)arguments是一个伪数组(3)修改了形参, arguments也会随之改变(4)修改了arguments的值, 形参也会发生改变function sum(n1, n2) { // 修改了形参, arguments也会随之改变 ...
2020-02-23 14:07:43
301
原创 JS 简易计算器
加减乘除计算器html代码<input type="text" name="" id="num1" value=""/> <select id="ari"> <option value="">+</option> <option value="">-</option> <option ...
2020-02-08 13:12:44
76
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人