- 博客(109)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 vue学习·
MVVMM - Model，数据V - View，视图VM - ViewModel，关联 Model 与 View，实现数据双向绑定：View 的变动会自动反映到 ViewModel，ViewModel 会自动通知 Model 更新，反之，Molde 的变化也会自动反映到 ViewModel 中，ViewModel 会通知 View 实现重新渲染。Vue官网尤雨溪现行两种版本：v2.x 与 v3.x，目前 3.x 的版本成为了默认版本。渐进式 JavaScript 框架兼容
2022-03-20 22:21:48
318
原创 待办事项处理
<!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>待办事项</ti
2022-03-16 23:24:15
365
原创 vue学习
MVVMM - Model，数据V - View，视图VM - ViewModel，关联 Model 与 View，实现数据双向绑定：View 的变动会自动反映到 ViewModel，ViewModel 会自动通知 Model 更新，反之，Molde 的变化也会自动反映到 ViewModel 中，ViewModel 会通知 View 实现重新渲染。Vue官网尤雨溪现行两种版本：v2.x 与 v3.x，目前 3.x 的版本成为了默认版本。渐进式 JavaScript 框架兼容性
2022-03-16 23:23:20
507
原创 demo代办事项任务计划
<!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>待办事项</ti
2022-03-15 21:51:20
515
原创 vue初始学习
MVVMM - Model，数据V - View，视图VM - ViewModel，关联 Model 与 View，实现数据双向绑定：View 的变动会自动反映到 ViewModel，ViewModel 会自动通知 Model 更新，反之，Molde 的变化也会自动反映到 ViewModel 中，ViewModel 会通知 View 实现重新渲染。Vue官网尤雨溪现行两种版本：v2.x 与 v3.x，目前 3.x 的版本成为了默认版本。渐进式 JavaScript 框架兼容性
2022-03-14 18:19:22
934
原创 MVC,MVP,MVVM
1.View 传送指令到 Controller2.Controller 完成业务逻辑后，要求 Model 改变状态3.Model 将新的数据发送到 View，用户得到反馈=MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向。各部分之间的通信，都是双向的。View 与 Model 不发生联系，都通过 Presenter 传递。View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presente.
2022-03-14 11:36:02
1115
原创 webpack简单实用
[官方文档地址](https://webpack.js.org/guides/getting-started/#basic-setup)[插件下载地址](https://www.npmjs.com/)packge.json >{ "name": "webpack-demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "webpack serve
2022-03-13 15:51:02
1649
原创 nodejs webserver创建
// 使用 require 指令来载入 http 模块const http = require('http')// 使用 fs 模块，来读取文件const fs = require('fs')// 创建服务器const server = http.createServer((request, response) => { // 监听到有客户端请求时，会自动调用该回调函数处理请求并返回响应 const {url, method} = request // 解构赋值 // cons
2022-03-07 22:08:58
212
原创 GIT使用
# GIT 和 GITHUB- 在学习之前我们要先要清楚几个东西- `git` 和 `github` 是两个东西，不是一个东西- 就像 `java` 和 `javascript` 一样，是两个东西- 需要搞清楚几个词语的意思 - 本地：我自己的终端 - 远程：在网络那一头的终端 - 仓库：一个被 `git` 管理了的文件夹## 什么是 GIT- `git` 官方名称： **分布式版本管理器**- 私人解释： 就是一个管理我们文件夹的工具 - 只不过可以保留所有的版本信
2022-03-03 15:40:20
80
原创 gulp文档
# GULP- `gulp` 是一个项目开发的 **自动化打包构建工具**- 基于 `node` 环境来运行的## 什么是自动化打包构建工具- 比如 - 我们在开发的过程中，会写到 `js` 文件，`css` 文件，等等 - 我们的项目如果想上线，那么一定要体积小一点，文件大小越小越好 - 而我们在写 `js` 文件的时候，会有很多 **换行/空格** 之类的东西 - 这些 **换行/空格** 都是占文件体积的一部分 - 那么我们在上线之前就要吧这些 **换行/空格**
2022-02-22 20:55:30
258
原创 requires模块化与es6模块化
# 前端模块化 ##### 前言随着Ajax技术的兴起，前后端分离的开发模式逐渐占领了几乎整个市场，现在的服务器带宽也足够完成大量数据交互，于是很多以前在服务器端的逻辑也可以移植到前端来处理了，从而减轻服务器的压力，当然，这样的话Javascript代码就会越来越复杂。而Javascript作为一门松散的弱类型语言，在一个大型项目面前如果没有合理的拆分与规划，将会变得很难维护，这个时候我们就需要把前端逻辑做一个块化的处理。**所谓模块化就是把需要重复使用的功能封装成模块，一个页面有一个统筹全局的
2022-02-22 19:04:36
925
原创 Sass用法
# SASS- [SASS官网](https://www.sass.hk/)- ### 世界上最成熟、最稳定、最强大的专业级CSS扩展语言！- `sass` 是一个 css 的预编译工具- 也就是能够 **更优雅** 的书写 css- `sass` 写出来的东西 **浏览器不认识**- 依旧是要转换成 css 在浏览器中运行- 这个时候就需要一个工具来帮我们做## 安装 sass 环境- 以前的 `sass` 需要依赖一个 `ruby` 的环境- 现在的 `sas
2022-02-21 20:43:46
89
原创 node简介
# node- [node官网](https://nodejs.org/en/)- [node中文网](http://nodejs.cn/)- 什么是 node - Node.js is a JavaScript runtime built on [Chrome's V8 JavaScript engine](https://v8.dev/). - Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。- 这个是 node 官网的解释 - 其实 nod
2022-02-21 20:42:20
1073
原创 jquery网络请求和插件
# jQuery- 今天我们继续来聊 `jQuery`## 发送 ajax 请求- 发送 get 请求 ```js // 直接使用 $.get 方法来发送一个请求 /* 参数一： 请求地址 参数二： 请求时携带的参数 参数三： 请求成功的回调 参数四： 返回的数据类型 */ $.get('./ajax.php', { id: 10 }, function (res) { console.log(res) }, 'json')发送 post 请
2022-02-21 20:41:38
489
原创 jQuery
# jQuery - `jQuery` 是一个前端库，也是一个方法库- 他里面封装着一些列的方法供我们使用- 我们常用的一些方法它里面都有，我们可以直接拿来使用就行了- jQuery之所以好用，很多人愿意使用，是因为他的几个优点太强大了 1. 优质的选择器和筛选器 2. 好用的隐式迭代（之前给元素设置属性或者其他的东西，需要把数组或者集合进行遍历，jquery会默认给咱们遍历，迭代就是遍历） 3. 强大的链式编程- 因为这些东西的出现，很多时候我们要做的事情被 “一行代码解决”-
2022-02-17 20:46:16
160
原创 【无标题】
//console.log($('button')[0]) // $(document).ready(function(){ // console.log($('button')[0]) // }) //这个是上面方式的简写形式 $(function(){ console.log($('button')[0]) }) </script></head&g
2022-02-16 21:02:13
296
原创 购物车究极
index.html<!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"> <
2022-02-16 20:57:40
298
原创 面向对象购物车
<link rel="stylesheet" href="css/index.css"></head><body> <header>网页头部区域</header> <main> <ul></ul> </main> <a href="html/cart.html"> <div class="count">
2022-02-15 22:19:48
105
原创 借用构造函数继承与组合继承
//构造函数本质上也是一个函数类型，既然是一个函数类型，可以把它当成普通函数来调用 // function Person(name, age){ // this.name = name // this.age = age // console.log(this.name) // console.log(this.age) // } // Person('冯
2022-02-15 20:59:11
221
2
原创 原型继承。。
<script> //继承：例如，冯建炜有1000万，百年后，他儿子继承10块钱 //注意点：继承是继承相同的属性（共有的东西），一个类之间的继承 function Dog(name, age){ this.name = name this.age = age } Dog.prototype.rg = function(){ console.lo
2022-02-14 21:53:21
133
原创 闭包与闭包作用
<script> //闭包：一个函数在外部可以读取另一个函数内部的变量 function fn(){ let a = 10 //有一个 A 函数，再 A 函数内部返回一个 B 函数 return function(){ //B 函数内部访问着 A 函数内部的私有变量 console.log(a) }
2022-02-14 21:52:06
48
原创 【无标题】
函数回顾let num = 10 console.log(num) /* let num num = 10 console.log(num) */ //定义（声明）阶段 function fn(a){ console.log('hello') } //调用阶段 fn(10)
2022-02-14 21:51:09
47
原创 自执行函数
/* 自执行函数 + 立即执行函数 + 就是函数自己调用，函数声明完成后，会自己立马执行 + 特点： => 当函数执行完毕后，它会在内存空间里面进行销毁，比普通的函数节省空间 => 当咱们使用了自执行函数后，会形成一个私有作用域，只有内部使用，外部其他地方使用不了 + 作用： => 适合做
2022-02-14 14:40:52
100
原创 this改向
// 函数调用圆括号时(函数名称+括号)，函数的this是window对象 // function fn(){ // console.log(this) // } // window.fn() // 函数作为一个对象的方法，对象打点调用，函数的this就是这个对象 // let obj = { // name: '柯真宏', // say(){
2022-02-14 14:40:24
126
原创 jsonp
同源策略+ 同源策略主要是为了安全性 => 协议：http https ftp => 域名：www.baidu.com www.jd.com => 端口：80 8080 40等等 => 只要其中有一个不相同我就不让你访问 => 同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。 同源策略给前端带来
2022-02-13 22:05:59
134
原创 回调地狱终极解决方案
<script>对比 /* ajax_get({ url: 'data/a.php', success(res){ console.log(res) console.log('第一次的结果') ajax_get({ url: 'data/b.php',
2022-02-10 20:35:16
466
原创 回调地狱与promise
<script src="js/ajax.js"></script> <script> // function fn(a){ // a() // } // fn(function(){}) // let arr = ['a', 'b'] // arr.sort(function(){}) // setTimeout(function(){
2022-02-10 20:34:20
364
原创 ajax实现快递查询
<!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>Doc
2022-02-10 17:35:03
111
原创 ajax方式
### 同步和异步同步: 指的就是事情要一件一件做。等做完前一件才能做后一件任务异步: 不受当前任务的影响，两件事情同时进行，做一件事情时，不影响另一件事情的进行。编程中：异步程序代码执行时不会阻塞其它程序代码执行,从而提升整体执行效率。### ajax的概念##### 什么是ajax 1 Ajax: asynchronous javascript and xml (异步js和xml) 2 是可以与服务器进行(异步/同步)交互的技术之一。ajax的语言载体是jav
2022-02-09 19:41:36
266
原创 sessionStorage存储
<button>设置</button> <button>获取</button> <button>删除</button> <button>清空</button> <script> let aBtn = document.querySelectorAll('button') aBtn[0].addEventListener('click',
2022-02-09 19:36:00
417
原创 h5新增存储localstorge
localStorage.setItem('username', '张三') localStorage.setItem('password', 123) console.log(localStorage.getItem('username')) localStorage.removeItem('username') console.log(localStorage.getItem('username'))加入购物车<s
2022-02-08 20:59:14
260
原创 cookie
设置cookie<body> <a href="03-获取cookie.html">购物车页面</a> <script> //怎么在浏览器里面存储一个cookie呢？ //cookie默认是会话级别的存储，浏览器关闭就自动清除了。说明cookie是存在过期时间 //注意点：存储cookie必须分开单个存储设置 // document.cookie = 'username=张三'
2022-02-08 20:58:11
71
原创 php简单学习
/* 网站或者APP开发 + 都是由两部分组成 => 前端，使用html、css、js完成网页相关的一些功能，给用户进行界面的展示 => 后端，和服务器还有数据库相关，网站或者APP都是放在服务器上面的，要不然别人访问不了的。前端的数据不是固定的， 都是后端传递给咱们的 + 前后端交换 => 在实际开发中会.
2022-02-07 20:14:36
201
原创 购物车功能
<!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>Document<
2022-01-16 19:11:09
131
2
原创 淡出淡入轮播
<style> * { margin: 0; padding: 0; } ul { list-style: none; position: relative; width: 590px; margin: 50px auto; } li { position: absolute; display: none; top: 0; left:
2022-01-16 19:08:36
342
原创 多属性运动函数
<style> .box, .box2 { width: 100px; height: 100px; position: absolute; background-color: #f00; top: 50px; left: 100px; opacity: 0.5; } .box2 { top: 200px; } </style></head&g
2022-01-16 19:08:06
107
原创 单属性运动函数封装
JSfunction $(selector, all) { if (all) { return document.querySelectorAll(selector) } return document.querySelector(selector)}<style> .box, .box2 { width: 100px; height: 100px; position: absolute; background-
2022-01-16 19:06:30
356
原创 购物车渲染
<!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>Document<
2022-01-13 23:57:08
188
原创 右键菜单选项 左键取消菜单
<style> * { margin: 0; padding: 0; } ul { border: 1px solid; width: 100px; position: absolute; display: none; } </style></head><body> <ul> <li>全选</li>
2022-01-12 18:26:24
292
原创 获取元素计算定位
<div class="outer"> <div class="inner"> asdflj <span>asdfljasl</span> </div> </div> <script src="js/tools.js"></script> <script> // 获取元素的计算定位 console.log($('.inner').o
2022-01-12 18:08:58
105
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人