前进的胖子-CSDN博客

<swiper-item class="swiper-box-first" > <scroll-view scroll-y="true" style="height:{{winHeight-10}}rpx"> </scroll-view> </swiper-item>**注意点: swiper-item 必须内嵌一个 scroll-view 标签style 样式中的 height 中的高度必须是具体的高度具体...

2021-08-23 18:25:41 3074

原创 Ts构建前端工程

1.初始化项目npm init2.初始TStsc init3.卸全局ts-nodenpm uninstall -g ts-node4将ts-node安装到局部npm install -D ts-node5卸载全局的 typescript npm uninstall -g typescript6将 typescript 安装到局部 npm install -D typescript7配置文件的启动项8安装SuperAgent软件作用:是处理 get,post,put,d

2021-07-22 17:16:07 646

原创 vue首页实现多个倒计时功能

将时间转化成时分秒 for (var s = 0; s < this.count_down_list.length; s++) { if (this.count_down_list[s].time !== 0) { this.live_day = Math.floor( this.count_down_list[s].time / 86400 ); .

2021-06-28 17:36:00 679

原创 vue 路由跳转页面

第一个页面通过：this.$router.push({ path: “/homecourseall”, query: { id: id } });跳转到另外一个页面将跳转页面的id 传输的另外一个页面第二个页面:this.route.query.id获取到第一个页面传过来的id用获取到的 id 从新访问一个新的接口获取到栏目的 id将栏目的 id 返回给接口接口在重新渲染出数据...

2021-05-12 16:37:17 119

原创 vue 实现动态类的绑定

动态类的绑定 :class在html 样式中data 数据中事件中问题：如果遇到请求后端接口的时候数据不够的话解决方案:创建一个新的数组将数据从新添加到数组中

2021-05-12 15:27:49 171

原创 vuex

vuex 概述：组件之间共享数据的方式父向子传值：v - bind 属性绑定子向父传值： v-on 事件绑定兄弟组件之间共享数据： EventBus $on 接受数据的那个组件 $emit 发送数据的那个组件vuex 是实现组件全局状态(数据) 管理的一种机制，可以方便的实现组件之间数据的共享使用vuex统一管理状态的好处能够在 vuex 中集中管理共享的数据，易于开发和后期维护能够高效地实现组件之间的数据共享，提高开发效率存储在vuex 中的数据都是响应式的,能够..

2020-12-20 19:48:58 117

原创 HTTP缓存机制

HTTP缓存机制将资源的副本保存到用户客户端不是永久的有生命周期的无缓存缓存[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iMYUi8sK-1598104690911)(https://s1.ax1x.com/2020/08/22/dU9MVA.png)]缓存优点:缓解服务去端的资源消耗和运行压力减少服务器端资源加载的延迟减少对带宽造成的压力web 站点变得更具有响应性缓存的案例：常见的HTTP缓存只能存储GET响应，对于其他类型的响应无能为

2020-12-03 20:09:25 108

原创 webpack打包工具

Webpack前端开发的弊端：文件依赖关系错综复杂静态资源请求效率低模块化支持不友好浏览器对高级javascript 特性兼容程度较低webpack 是一个流行的前端项目构造工具（打包工具），可以解决当前web开发中面临的困境。提供了友好的模块化支持，以及代码压缩混淆，处理js 兼容问题，性能优化等强大的功能创建列表隔行变色项目创建项目空白目录，并运行 npm init -y 命令初始化包管理配置文件 package.json新建 src 源代码目录新建 src ->

2020-11-29 08:39:04 162

原创前端工程化基础

前端工程化模块化概述：命名冲突 2. 文件依赖通过模块化解决上述问题模块化就是把单独的一个功能封装到一个模块（文件中），模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块模块化相关规范1. 浏览器端模块规范 AMDrequire.js(http://www.requirejs.cn/) CMDSea.js(http://seajs.qithub.io/seajs/docs/)2. 服务器端模块化规范 CommonJS1. 模块分为单文件模块

2020-11-28 10:41:47 147

原创 Vue汇总

Vue声明式渲染 — 组件系统 – 客户端路由 – 集中式状态管理 – 项目构建易用灵活高效vue 的基本使用步骤：需要提供标签用于填充数据引入vue.js库文件可以使用vue语法做功能把vue提供的数据填充到标签里面<body>  <div id="app">{{msg}}</div> <script type="text/javascript"

2020-11-26 15:37:41 407 1

原创 vue 图书管理系统

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .grid { margin: auto; width: 530px; text-align: center; } .grid ta.

2020-11-22 19:36:10 4469

原创 FormData 对象

FormData 对象可以模拟html表单相当于将html 表单映射成表单对象自动将表单对象中的数据拼接成请求参数的格式异步上传二进制文件准备html 表单 <form action="" id='form'> <inpupt type='text' name='username'></inpupt> <inpupt type='password' name='password'></inpupt>

2020-11-17 14:03:12 222

原创 Es 6 汇总

ES 6js 编写 - 运行其它语言编写 - 编译 - 运行babal 编译工具作用域 ES5 中作用域全局作用域var a = 5 函数作用域function fn(){var b = 5} ES6 中作用域新增（块级作用域）声明块级作用域只能用let但是let 不仅声明块级作用域还可以声明全局作用域和函数作用域定义 let{块级作用域：let v = ture}let 与 var 区别let - 提供了块级,全局,函数不存在声

2020-11-08 10:44:02 196

原创 js 选项卡案例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .boders_s{

2020-10-28 19:04:35 202

原创 js 拼图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ mar

2020-10-28 19:03:31 212

原创 js 模拟单选

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .choice{

2020-10-28 19:02:35 250

原创 js 轮播图案例思路

在这里插入代码片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>1_2轮播图</title> <styl

2020-10-28 19:01:02 242

原创微信聊天框

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>微信聊天</title> <style> .box{ mar.

2020-10-26 10:57:53 506

原创动物相册

主要注意锚点 <div class="photo_img"> <div class="photo_main"> <div class="photo_left"> <img src="../imger/1.png" alt="" id='first'> <img src="../imger/2.png" alt="" id='second'>

2020-10-06 19:19:53 266

原创 css+html 图片移动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>点击图片</title> <link rel="stylesheet" href="点击图片.css"&gt

2020-09-29 20:04:58 973

原创 html+css 汇总

HTML 超文本标记语言标记 : < >标签对 :<html></html>单标签<meta charset="utf-8" />css 入门样式：行间样式<div style= " "> </div>内部样式表<style> div{ width:100px height:100px }<style>外联样式表创建了一个css文件<link rel="st

2020-09-17 10:21:15 192

原创 css常见的布局

上中下 - 栏式 .wap{ width: 900px; margin: 0 auto; } #header{ height: 100px; background: blanchedalmond; } #section{ height: 700px;

2020-09-17 10:19:11 116

原创案例 jquery ajax 搜索框

/* 捕获用户输入行为 1. 绑定键盘事件-> keydown ，keyup, keypress 2. 绑定输入事件->input */ $('#search').bind('input',function(){ // 清除前面的 $('.alart>ul').empty() // 根据用户...

2020-09-10 14:30:33 372

原创 jquery中的 ajax实现

jquery中的 ajaxjquery 中的 ajax 六个方法load( ) 方法url : 异步请求的地址data ：异步请求的数据如果没数据的为get 有数据的话是postcallback: 异步请求成功后的回调函数返回值 - 服务器端的响应结果注意：自动将返回结果写入到目标元素中 $('button').click(function(){ $('button').load('json.json',{zhang:ni},function(){

2020-09-10 14:28:54 181

原创 json 的数据样式

Json 数据数据格式轻量级的数据交换格式独立于任何语言的文本格式,易于程序员阅读和编写,同时也易于计算机解析和生成主要为两种结构：“名称/值” 对的集合。不同语言中,它被理解为对象(object)/记录(record)/结构(struct)/字典(dictionary)/哈希表(hash table)/有键列表(keyed list) /或者关联数组(associative array)2. “值的有序列表”。大部分语言中它被理解为数组(array)JSON 格式中作为值的类

2020-09-10 14:25:04 842

原创同步交互与异步交互对比

同步交互与异步交互同步交互：同步（相当与排队）交互（客户端到服务器）客户端向服务器端发送请求,必须等待结果返回,才能向服务器端发送下一次请求异步交互:客户端向服务器端发送请求，不必等待结果返回，就可以向服务器端发送下一次请求异步交互比同步交互的优势：用户操作无需向同步交互必须等待结果异步交互只需与服务器端骄傲和必要的数据内容，而不是将所有数据全部更新异步交互对带宽造成的压力相比同步交互更小通过ajax实现异步交互不需要任何第三方插件,只要浏览器支持js 即可异步交互比同步交互的缺点

2020-09-03 08:35:20 485

原创 Ajax的介绍和Ajax实现的步骤

Ajax不是一个新技术, 而是一套技术的总和ajax模型 html页面能够快速地将数据逐步更新显示在用户界面上，不需要重载(刷新整个页面)包括以下几种技术：html 2.css 3.js 4.dom 5. xml 6. xml httprequest对象xmlhttprequest对象是实现ajax异步交互的核心实现ajax的执行步骤...

2020-09-03 08:33:20 126

空空如也

空空如也