- 博客(99)
- 收藏
- 关注
RSS订阅原创 网络模块封装
网络模块封装Vue中发送网络请求有非常多的方式, 在开发中, 如何选择? 1.传统的Ajax传统的Ajax是基于XMLHttpRequest(XHR)缺点：1.配置和调用方式等非常混乱.2.编码起来看起来繁琐复杂3.所以真实开发中很少直接使用, 而是使用jQuery-Ajax2.jQuery-AjaxjQuery-Ajax相对于传统的Ajax非常好用.但是：1.在Vue的整个开发中都是不需要使用jQuery了.jQuery的代码1w+行.Vue的代码才1w+行.2.完全没有必.
2021-04-09 15:33:31
176
原创 Vuex
Vuex1.官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。2.它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。3.Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。状态管理1.可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用。2.我们自己
2021-04-07 21:13:26
213
原创 Promise
PromisePromise是异步编程的一种解决方案。我们封装一个网络请求的函数，因为不能立即拿到结果，所以不能像简单的3+4=7一样将结果返回。所以往往我们会传入另外一个函数，在数据请求成功时，将数据通过传入的函数回调出去。如果只是一个简单的网络请求，那么这种方案不会给我们带来很大的麻烦。当网络请求非常复杂时，就会出现回调地狱。这样代码难看而且不容易维护。我们更加期望的是一种更加优雅的方式来进行这种异步操作。Promise可以以一种非常优雅的方式来解决这个问题基本语法首先用一个
2021-04-06 21:45:05
191
原创 TabBar案例及思考
效果图vue init webpack TabBar目录结构结构搭建APP.vue<template> <div id="app"> <div class="tabbar"> <div class="tab-bar-item"> <img src="../assets/img/tabbar/home.svg" alt=""> 首页</div> <div class="ta
2021-04-06 15:34:39
183
原创 vue-router
vue-router路由路由是一个网络工程里面的术语。路由（routing）就是通过互联的网络把信息从源地址传输到目的地址的活动.路由器提供了两种机制: 路由和转送.路由是决定数据包从来源到目的地的路径.转送将输入端的数据转移到合适的输出端.路由中有一个非常重要的概念叫路由表路由表本质上就是一个映射表, 决定了数据包的指向后端路由阶段1、早期的网站开发整个HTML页面是由服务器来渲染的2、服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示.一个页面有自己对应的网址, 也
2021-04-05 17:21:20
403
原创 vue 脚手架
Vue CLI什么是Vue CLI写几个Vue的Demo程序, 那么不需要Vue CLI.如果开发大型项目, 那么需要, 并且必然需要使用Vue CLI使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。如果每个项目都要手动完成这些工作，那无疑效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。CLI是什么意思CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架.Vue CLI是一个官方发布
2021-04-04 17:26:38
171
原创 Webpack
webpack官方的解释:At its core, webpack is a static module bundler for modern JavaScript applications.webpack 是一个流行的前端项目构建工具（打包工具），可以解决当前 web 开发中所面临的困境。webpack 提供了友好的模块化支持以及代码压缩混淆处理 js 兼容问题性能优化等强大的功能，从而让程序员把工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。前端模块化在ES6之前
2021-04-01 20:15:06
223
1
原创 Vue 前端模块化
JavaScript原始功能网页开发的早期，js制作作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时候代码还是很少的。直接将代码写在<script>标签中即可随着ajax异步请求的出现，慢慢形成了前后端的分离客户端需要完成的事情越来越多，代码量也是与日俱增。为了应对代码量的剧增，我们通常会将代码组织在多个js文件中，进行维护。但是这种维护方式，依然不能避免一些问题。比如全局变量同名问题：例子这种代码的编写方式对js文件的依赖顺序几乎是强制性的当js文件过多，比如有几
2021-04-01 16:42:44
205
原创 Vue 组件化
什么是组件化？任何一个人处理信息的逻辑能力都是有限的所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容。但是，我们人有一种天生的能力，就是将问题进行拆解。如果将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现大的问题也会迎刃而解。组件化也是类似的思想：如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。但如果，我们讲一个页面拆分成一个个小的功能块每个功能块完成属于自己这部分独立的功能那么之后整
2021-03-30 21:55:25
229
原创 Vue 常用特性
常用特性概览⚫ 表单操作⚫ 自定义指令⚫ 计算属性⚫ 侦听器⚫ 过滤器⚫ 生命周期表单操作⚫ Input 单行文本⚫ textarea 多行文本⚫ select 下拉多选⚫ radio 单选框⚫ checkbox 多选框<body> <div id="app"> <form action="http://itcast.cn"> <div> <span>姓名：</span>
2021-03-28 17:59:22
167
原创 Vue基础 实现tab切换案例
目录结构代码示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .tab ul { overflow: hidden; padding: 0;
2021-03-28 15:41:54
189
原创 Vue 基础 模板语法
VueVue概述Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式javaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。易用：熟悉HTML、CSS、JavaScript知识后，可快速上手Vue灵活：在一个库和一套完整框架之间自如伸缩高效：20kB运行大
2021-03-27 18:21:17
209
原创 HTTP协议
HTTP协议HTTP协议简介什么是通信通信，就是信息的传递和交换。通信三要素：通信的主体通信的内容通信的方式现实生活中的通信张三要把自己考上传智专修学院的好消息写信告诉自己的好朋友李四。其中：通信的主体是张三和李四；通信的内容是考上传智专修学院；通信的方式是写信；互联网中的通信服务器把传智专修学院的简介通过响应的方式发送给客户端浏览器。其中，通信的主体是服务器和客户端浏览器；通信的内容是传智专修学院的简介；通信的方式是响应；通信协议通信协议（Communicat
2021-03-26 18:36:28
102
原创 Ajax与Node Form表单及案例
form表单表单在网页中主要负责数据采集功能。HTML中的<form>标签，就是用于采集用户输入的信息，并通过标签的提交操作，把采集到的信息提交到服务器端进行处理。表单由三个基本部分组成：表单标签 form表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮 <button type="submit">提交</button>标签的属性actionaction 属性用来规定当提交表单时，向何处发送表
2021-03-25 20:39:15
187
原创 AJax与Node 服务器端介绍
客户端与服务器服务器上网过程中，负责存放和对外提供资源的电脑，叫做服务器。客户端上网过程中，负责获取和消费资源的电脑，叫做客户端。URL地址URL（全称是UniformResourceLocator）中文叫统一资源定位符，用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源。URL地址一般由三部组成：① 客户端与服务器之间的通信协议② 存有该资源的服务器名称③ 资源在服务器上具体的存放位置客户端与服务器的通信过程
2021-03-25 19:24:58
236
原创 javaScript 继承
继承1.ES6之前没有提供extends继承方法，所以我们需要构造函数+原型对象模拟实现继承，成为组合继承。call方法call()：调用函数，并且修改这个函数的this指向方法：fun.call(thisArg,arg1,arg2...)thisArg:调用函数修改this指向的对象arg1 arg2：传递的其他函数举例：<script> function fn(x,y) { console.log(x+y);
2021-03-24 20:41:38
100
原创 javaScript 构造函数与原型对象
构造函数构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。function Person(name, age, sex) { this.name = name; this.age = age; this.sayHi = function() { alert('我的名字叫：' + th
2021-03-24 20:28:30
261
原创 javaScript ES6中的类与对象
类 class在 ES6 中新增加了类的概念，可以使用 class 关键字声明一个类，之后以这个类来实例化对象。类抽象了对象的公共部分，它泛指某一大类（class）对象特指某一个，通过类实例化一个具体的对象创建类语法：class name { // class body} 创建实例：var xx = new name(); 注意： 类必须使用 new 实例化对象类 constructor 构造函数constructor() 方法是类的构造函数(默认方法)，用于传递参数,返回实
2021-03-24 20:00:53
138
原创 Echarts数据可视化
什么是数据可视化数据可视化主要目的：借助于图形化手段，清晰有效地传达与沟通信息。数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。数据可视化的场景常见的数据可视化库D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难) ECharts.js 百度出品的一个开源 Javascript 数据可视化库 Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用 AntV 蚂蚁金服全新一代数据可视化
2021-03-24 18:47:38
467
原创 JQuery 属性操作
属性操作设置或获取元素固有属性值 prop()所谓元素固有属性就是元素本身自带的属性，比如<a> 元素里面的 href ，比如 <input> 元素里面的 type。获取属性语法prop(''属性'')设置属性语法prop(''属性'', ''属性值'')<body> <a href="http://www.itcast.cn" title="都挺好">都挺好</a> <input type="
2021-03-23 15:59:04
91
原创 移动端WEB开发 响应式布局
响应式开发响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。<style> .container { height: 150px; background-color: pink; margin: 0 auto; } /* 1. 超小屏幕下 小于 768 布局容器的宽度为 100% */ @
2021-03-20 14:32:30
354
原创 移动WEB开发 rem适配布局
rem基础rem 单位rem (root em)是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。 <style> div { font-size: 12px; } p { width: 10em; /*120px*/ height: 10em;
2021-03-19 20:20:07
262
原创 移动WEB开发 flex布局
flex布局传统布局 兼容性好 布局繁琐 局限性，不能再移动端很好的布局flex 弹性布局 操作方便，布局极为简单，移动端应用很广泛 PC 端浏览器支持情况较差 IE 11或更低版本，不支持或仅部分支持flex布局体验<style> span { width: 300px; height: 100px; background-color: green;
2021-03-19 13:33:41
294
原创 移动web开发 流式布局
流式布局移动端基础PC端常见浏览器:360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。移动端常见浏览器UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可。手机屏幕现状
2021-03-18 20:27:23
217
原创 javaScript 缓动动画
mouseenter 和mouseover的区别当鼠标移动到元素上时就会触发 mouseenter 事件类似 mouseover，它们两者之间的差别是mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。 mouseenter 只会经过自身盒子触发,之所以这样，就是因为mouseenter不会冒泡跟mouseenter搭配 鼠标离开 mouseleave 同样不会冒泡动画实现原理核心原理：通过定时器 setInterval() 不断移动盒子位置。实现步骤：获得盒子当前位置让盒子在
2021-03-17 21:21:24
120
原创 Python 集合
集合创建集合创建集合使⽤ {} 或 set() ， 但是如果要创建空集合只能使⽤ set() ，因为 {} ⽤来创建空字典。s1 = {10, 20, 30, 40, 50}print(s1)s2 = {10, 30, 20, 10, 30, 40, 30, 50}print(s2)s3 = set('abcdefg')print(s3)s4 = set()print(type(s4)) # sets5 = {}print(type(s5)) # dict集合是无序的，因此无法确
2021-03-16 19:51:10
55
原创 Python 字典
字典字典，字典里面的数据是以键值对形式出现，字典数据和数据顺序没有关系即字典不⽀持下标，后期⽆论数据如何变化，只需要按照对应的键的名字查找数据即可。创建字典# 有数据字典dict1 = {'name': 'Tom', 'age': 20, 'gender': '男'}# 空字典dict2 = {}dict3 = dict()字典特点：符号为⼤括号数据为键值对形式出现各个键值对之间⽤逗号隔开注意：⼀般称冒号前⾯的为键(key)，简称k；冒号后⾯的为值(value)，简称v。常
2021-03-16 19:20:21
133
原创 Python 元组
概念特点⼀个元组可以存储多个数据，元组内的数据是不能修改的。元组特点：定义元组使⽤⼩括号，且逗号隔开各个数据，数据可以是不同的数据类型。定义元组# 多个数据元组t1 = (10, 20, 30)# 单个数据元组t2 = (10,)如果定义的元组只有⼀个数据，那么这个数据后⾯也好添加逗号，否则数据类型为唯⼀的这个数据的数据类型t2 = (10,)print(type(t2)) # tuplet3 = (20)print(type(t3)) # intt4 = ('hello')
2021-03-16 18:39:14
83
原创 Python 列表
格式[数据1, 数据2, 数据3, 数据4......] 列表可以⼀次性存储多个数据，且可以为不同数据类型。常⽤操作列表的作⽤是⼀次性存储多个数据，程序员可以对这些数据进⾏的操作有：增、删、改、查。查找下标name_list = ['Tom', 'Lily', 'Rose']print(name_list[0]) # Tomprint(name_list[1]) # Lilyprint(name_list[2]) # Rose函数index()：返回指定数据所在位置的下标 。
2021-03-16 17:21:03
134
原创 javaScript 事件高级
事件高级注册事件（绑定事件）给元素添加事件，称为注册事件或者绑定事件。注册事件有两种方式：传统方式和方法监听注册方式传统注册方式利用 on 开头的事件 onclick<button onclick=“alert('hi~')”></button>btn.onclick = function() {} 特点： 注册事件的唯一性同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数方法监听注册方式w3c 标准推荐方式addEve
2021-03-16 12:27:37
220
原创 javaScript DOM
DOMDOM概述文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。DOM树DOM又称为文档树模型, 因为整个HTML文档是一个树形的结构。文档 ：一个页面就是一个文档，DOM 中使用 document 表示元素：页面中的所有标签都是元素，DOM 中使用 element 表示节点：网页中的所有内容
2021-03-15 20:03:58
124
原创 Python 字符串
字符串创建字符串字符串是 Python 中最常⽤的数据类型。我们⼀般使⽤引号来创建字符串。创建字符串很简单，只要为变量分配⼀个值即可。a = 'hello world'b = "abcdefg"print(type(a))print(type(b))注意：控制台显示结果为 <class 'str'> ， 即数据类型为str(字符串)。字符串特征⼀对引号字符串name1 = 'Tom'name2 = "Rose"三引号字符串name3 = ''' Tom '''na
2021-03-13 15:25:18
333
原创 javaScript简单类型与复杂类型
简单类型与复杂类型简单类型又叫做基本数据类型或者值类型,复杂类型又叫做引用类型。值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型string ，number，boolean，undefined，null引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等// 简单数据类型 null 返回的是一个空的对象 object var tim
2021-03-13 14:38:08
110
原创 javaScript内置对象
内置对象JavaScript 中的对象分为3种：自定义对象内置对象浏览器对象前面两种对象是JS 基础 内容，属于 ECMAScript； 第三个浏览器对象属于我们JS 独有的内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）内置对象最大的优点就是帮助我们快速开发JavaScript 提供了多个内置对象：Math、 Date 、Array、String等Math对象Math 对象不是构造函数，它具有数学常数和函数的属性和方
2021-03-13 14:16:44
127
原创 Python 基础
注释单⾏： # 注释内容 ，快捷键ctrl+/print('hello Python') # 输出(简单的说明可以放到⼀⾏代码的后⾯，⼀般习惯代码后⾯添加两个空格再书写注释⽂字)多⾏： “”" 注释内容 “”" 或 ‘’’ 注释内容 ‘’’""" 下⾯三⾏都是输出的作⽤，输出内容分别是： hello Python hello itcast hello itheima"""print('hello Python')print('hello itcast')print('hello i
2021-03-12 19:21:15
138
原创 javaScript 作用域 预解析
作用域作用域概述通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。JavaScript（es6前）中的作用域有两种： 全局作用域 局部作用域（函数作用域）全局作用域作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。局部作用域 （函数作用域）作用于函数内的代码环境，就是局部作用域。 因为跟函数有关系，所以也称为函数作用域。
2021-03-12 14:45:25
183
原创 javaScript函数
函数函数的概念在 JS 里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。虽然 for循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用 JS 中的函数。函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。函数的使用函数在使用时分为两步：声明函数和调用函数声明函数// 声明函数function 函数名() { //函数体代码} function 是声明函数的关键字,必须小写 由于函数一
2021-03-12 12:48:05
203
原创 javaScript数组
数组数组的概念数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。// 普通变量一次只能存储一个值var num = 10; // 数组一次可以存储多个值var arr = [1,2,3,4,5];数组的创建方式JS 中创建数组有两种方式： 利用 new 创建数组 利用数组字面量创建数组利用 new 创建数组var 数组名 = new Array() ；var arr = new Array();
2021-03-12 11:51:55
184
原创 javaScript基础 (运算符 逻辑控制语句 循环控制语句)
运算符算术运算符概念算术运算使用的符号，用于执行两个变量或值的算术运算。浮点数的精度问题浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数。var result = 0.1 + 0.2; // 结果不是 0.3，而是：0.30000000000000004console.log(0.07 * 100); // 结果不是 7， 而是：7.000000000000001所以：不要直接判断两个浮点数是否相等 !表达式和返回值表达式：是由数字、运算符、变量等以能求得数
2021-03-11 21:27:14
438
原创 小程序基础
数据绑定1.小程序的数据一般情况下需要动态的从服务端获取，然后再渲染输出到视窗中显示。2.WXML中的动态数据均来自对于Page的data。3.数据绑定使用Mustache语法（双大括号）将变量包起来。4.例子：base.js文件/** * 页面的初始数据 */ data: { msg:"Hello World!", img:"/images/film.png",base.wxml文件<view>{{msg}}</view>
2021-03-04 17:15:53
330
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人