- 博客(50)
- 收藏
- 关注
原创 Vuex简单了解
VuexVuex基本了解—Vuex是一个专门为Vue.js应用程序开发的状态管理模式;它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化;—状态管理模式,集中式存储管理可以看作为把多个需要的组件共享的变量全部存储在一个对象里面;然后将这个对象放在顶层的Vue实例中,让其他组件可以使用;—简单来说就是Vuex为全局单例模式,大管家,多个视图都依赖同一状态,我们可以将共享的状态抽取出来,交给大管家统一管理,之后每个视图按照一定规则进行访问和修改等操作;—V
2022-01-16 10:05:22 314
原创 Promise简单了解
PromisePromise简介—Promise是异步编程的一种解决方案,将网络请求和异步处理代码进行分离;—什么时候处理异步事件?比较常见的场景就是网络请求!我们封装一个网络请求的函数,不会立即拿到结果,往往会传入另一个函数,在数据请求成功时,将数据通过传入的函数回调出去;如果网络请求非常复杂时,会出现回调地狱;定时器的异步事件—Promise可以对异步事件进行封装;—Promise传入一个回调函数,回调函数中传入两个参数resolve和reject,这两个参数本身也是函数;—异
2022-01-11 15:23:34 584
原创 网络模块封装-axio
网络模块封装-axios网络请求模块的选择—传统的Ajax是基于XML Http Request(XHR),缺点:配置和调用方式等非常混乱;真实开发中很少直接使用,而是使用jQuery-Ajax;—Vue开发中不需要使用jQuery,完全没必要为了网络请求而引用这个重量级的框架;—Vue1.x版本中,官方推出了Vue-resource,相对于jQuery体积要小,但是不支持Vue新版本,也不会继续更新和维护,对以后的项目开发和维护存在很大的隐患;—axios有很多优点,在浏览器中发送XHR请
2022-01-04 20:09:47 523
原创 Vue-Router
Vue-Router路由—路由:通过互联的网络把信息从源地址传输到目的地址的活动;路由器提供两种机制路由和转送,路由时决定数据包从来源到目的地的路径,转送将输入端的数据的转移到合适的输出端;—路由中有一个非常重要的概念叫路由表,路由表本质上就是一个映射表,决定数据包的指向;包括内网ip:电脑标识(mac地址);—IP地址必须是唯一的,内网IP(192.168.1.110等)和公网IP(202.111.23.45等是永远不重复的!唯一的身份标识);—前端渲染和后端渲染?后端路由阶段:(
2021-12-29 15:57:24 339
原创 Vue模块化和Webpack相关安装和配置
模块化开发模块化的基础封装//可以使用匿名函数,闭包解决重名问题,即防止其他模块中也存在相同的变量名称var ModuleA = (function(){//定义一个对象作为模块的出口,这样可以将需要的属性和方法暴露到外面var obj = {}//在对象内部添加变量obj.flag = trueobj.sum = function(info){ console.log(info)}//将对象返回,这样可以在外面使用一个MoudleA接受return obj})()
2021-12-22 15:04:37 269
原创 NodeJS简单了解
初识NodeJSNode.js简介—学习Node.js更好地深入了解服务器端这个黑盒子,理解前后端数据交互;此外还有像Java、PHP、Python、Ruby、Net等服务端开发语言;—Node.js是基于Chrom V8的运行时环境,不是一门语言,也不是库、框架,简单来说是可以解析和执行JavaScript代码的平台;以前只有浏览器才可以解析运行JS代码,但是现在JS可以完全脱离浏览器运行;—Node.js的特性:事件驱动event-driven、非阻塞IO模型(异步);—Node.js的
2021-12-15 20:22:01 1281
原创 Vue相关操作
Vue相关操作计算属性computed—setter和getter:在计算属性中一般会封装get()和set()方法,但是一般是set()方法是不常用的,因此计算属性只有get()方法,表现为只读属性;—因为computed中都含有get()方法,所以一般简写为如下方式:—一定要注意,计算属性中传递的参数是一个对象,因此在访问计算属性时,可以直接使用{{}}进行读取内容;<div id = "app"> <h2>{{fullName}}</h2><
2021-12-08 15:55:00 761 1
原创 Vue父子组件通信和插槽
Vue父子组件通信父子组件通信和双向绑定—如果使用v-model进行双向绑定时,当绑定在组件的props中的数据时,虽然可以完成双向绑定,但会出现警告;因此我们在进行组件双向绑定时,不能直接绑定给子组件,一般是在绑定给组件中data函数中返回的数据;<div id = "cpn"><!--这里可以写成自结束标签,因为标签内部没东西,所以可以简写--> <cpn :number1 = "num1" :number2 = "num2" @num1change = "
2021-12-02 09:30:45 1293
原创 JavaScript代码规范及分号问题
JavaScript代码规范及分号问题JavaScript代码规范—在实际开发项目中,每个开发者都有自己的代码风格,为了约定大家的代码风格,社区中诞生了一些比较规范的代码风格规范;—目前比较常用的有两种规范:JavaScript Standard Style和Airbnb JavaScript Style;—JavaScript Standard Style规范参考网址:http://hongfanqie.github.io/standardjs/—Airbnb JavaScript Sty
2021-12-01 11:09:46 1095
原创 Vue组件化开发
Vue组件化开发JavaScript高阶函数的使用编程范式可以分为:命令式编程(JS)和声明式编程(Vue);或者面向对象编程(第一公民:对象)和函数式编程(第一公民:函数);JS高级函数可以实现链式编程!!这种编程称为函数式编程;例如箭头函数,首先经过过滤,找出小于100的数值,然后将这些数值乘以2,再求取该些值得总和:let total = nums.filter(n=> n < 100).map(n=> n*2).reduce((pre,n)=> pre+n);
2021-11-28 20:11:42 207
原创 Vue框架-邂逅Vue.js
Vue框架-邂逅VuejsVue基础—Vue是一个渐进式的框架;通俗理解,渐进式意味着你可以将Vue作为你应用的一部分嵌入其中,带来更丰富的交互体验;或者你希望将更多的业务逻辑使用Vue实现,那么Vue的核心库以及生态系统可以满足要求,比如Vue全家桶(Core+Vue-router+Vuex);—Vue的特点:解耦视图和数据;可复用组件;前端路由技术;状态管理;虚拟DOM;—安装Vue.js官方安装提供多种安装方式!!直接CDN引入:可以选择开发环境版本或者生产环境版本
2021-11-24 20:43:42 225
原创 模块化开发和Webpack简介
模块化开发模块化的基础封装//可以使用匿名函数,闭包解决重名问题,即防止其他模块中也存在相同的变量名称var ModuleA = (function(){//定义一个对象作为模块的出口,这样可以将需要的属性和方法暴露到外面var obj = {}//在对象内部添加变量obj.flag = trueobj.sum = function(info){ console.log(info)}//将对象返回,这样可以在外面使用一个MoudleA接受return obj})()
2021-11-23 15:18:55 433
原创 Ajax简单了解
AjaxAjax简介—Ajax是前端相关技术,可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,实现异步请求;例如淘宝页面的搜索框下面的提示框会根据搜索框内容的不同而改变,但是并没有重新加载页面;—Ajax请求数据需要五个步骤:【1】创建一个Ajax异步对象;【2】设置请求方式和请求地址;【3】发送请求;【4】监听状态的变化;【5】处理服务器返回的结果;实现Ajax请求实例window.onload = function(){ var btn = doc
2021-11-20 18:32:35 852
原创 PHP简单了解
PHP简单了解这里简单了解了一下服务器后端开发语言的一种,PHP,对于客户端如何与后端服务器实现数据交换以及网络请求具有一定的帮助!基本简介—服务器:一台提供了某种服务功能的超级电脑,比如文件服务器、邮件服务器、Web服务器等;—如何将电脑提供某种服务,则需要安装相应的软件,比如电脑提供聊天服务,就需要安装相应的聊天软件,电脑提供浏览网页服务,就需要安装相应的浏览网页软件;—电脑需要安装Web服务相关软件才能提供管理网站的服务,安装了Web服务软件的电脑,称为Web服务器,Web服务器软件:
2021-11-19 17:17:32 109
原创 jQuery-jQuery插件
jQuery-jQuery插件扩展插件扩展jQuery对象的方法—语法:$.fn.extend(object)—这里面的this为jQuery对象,即$(xxx)—例如为jQuery对象添加功能方法,调用时$().fn():(function(){//扩展jQuery对象的方法$.fn.extend({ //增加全选功能 checkAll:function(){ //当前this为jQuery对象 this.prop('checked',true)
2021-11-17 11:26:29 349
原创 jQuery-效果
jQuery-效果内置动画淡入淡出—淡入淡出效果是通过不断改变元素的透明度(opacity)来实现的;以下函数可以传递参数:切换速度、切换效果和回调函数;—fadeOut():淡出动画效果;—fadeIn():淡入动画效果;—fadeToggle():自动切换淡入淡出效果;滑动—滑动动画效果是不断改变元素的高度实现的;—slideDown():展开动画效果,向下滑动;—slideUp():收缩动画效果,向上滑动;—slideToggle():自动切换展开和收缩动画效果;
2021-11-15 17:08:44 649
原创 jQuery-CSS和事件处理
jQuery-CSS和事件处理CSS样式操作—读取CSS样式语法:css('样式名字符串')—设置CSS样式语法:css('样式名字符串','设置的样式字符串')—另外css()里面传递的参数可以为一个封装所有设置样式的对象;例如:<script> $('p:eq(1)').css({ color:'red', background:'blue', width:300, height:100 })</script>
2021-11-14 20:48:31 1386
原创 jQuery-选择器
jQuery-选择器jQuery选择器—选择器本身只是一个有特定语法规则的字符串,没有实质用处;用于查找页面中特定元素;—他的基本语法规则为CSS选择器语法,并进行扩展;—只用调用$(),并将选择器作为参数传入才能起作用;—$(selector):根据选择器规则在整个文档中查找所有匹配的标签的伪数组,并封装jQuery对象返回;—选择器分类:基本选择器、层次选择器、过滤选择器、表单选择器;基本选择器id选择器:$('#id名');元素选择器:$('元素名')属性选择器:$
2021-11-13 17:28:56 966
原创 jQuery-基本简介
jQuery—基本简介jQuery简介—jQuery主要的功能为CRUD—增删改查,其中最基本的功能为查找元素;—官方网址:https://jquery.com/—jQuery是一个优秀的js函数库,封装了BOM/DOM函数,主要是DOM封装库;使用jQuery的网站超过90%,中大型WEB项目开发首选;Write Less Do More!!!—jQuery特点:HTML元素选取(选择器)、HTML元素操作、CSS操作、HTML事件处理、链式调用、读写合一、隐式遍历、浏览器兼容、易扩展插件
2021-11-12 15:04:49 591
原创 JS-线程和进程机制
JSAdvance-线程机制与事件机制进程与线程—进程(process):程序的一次执行,它占有的一片独有的内存空间;可以通过windows任务管理器查看进程;—线程(thread):进程内的一个独立执行单元,是程序执行的一个完整流程,是CPU的最小调度单位;—相关知识进程和线程相关参考网址:https://www.cnblogs.com/yu-hailong/p/9596431.html应用程序必须运行在某个进程的某个线程上;一个进程中至少有一个运行的线程,主线程,进程启动后自动创建
2021-11-10 20:07:22 501 2
原创 JS-FunctionAdvance
JS-Function Advance原型和原型链原型—每个函数对象都具有prototype属性,它默认指向一个Object空对象(即为原型对象);—原型对象中有一个属性constructor,它指向函数对象本身;简单理解为相互引用关系,可以通过prototype指向constructor,然后constructor又可以指向函数本身对象;—给原型对象添加属性(一般都是方法),这样函数的所有实例对象自动拥有原型中的属性(方法);显式原型与隐式原型—显式原型(属性):每个函数都有一个p
2021-11-08 09:27:04 100
原创 JS-Object Advance
JS-Object Advance对象创建模式方式一:Object构造函数模式—先创建空Object对象,在动态添加属性和方法;—适用于起初不确定对象内部数据的情况;—存在语句较多的问题<script> var p = new Object() p.name="Tom" p.age=12 p.setName=function(name){ this.name = name}</script>方式二:对象字面量模式—使用{}创建对象,同时
2021-10-31 15:08:32 73
原创 JS-Review
JS—Review数据类型判断typeof:返回数据类型的字符串表达;可以区别数值、字符串、布尔值、undefined、函数对象;不能区别null和Object以及Object和Array;instanceof:专门用来判断对象的具体类型,Object、Array和函数对象;=== / ==:全等可以判断两个数据类型是否一致;可以判断undefined和null(因为它们的类型唯一的值);undefined和null的区别:undefined代表定义未赋值;null代表了赋值了只
2021-10-21 17:21:12 148
原创 VueCLI的安装
Vue CLI的安装NodeJS的安装—因为VueCLI是进行webpack的配置,而webpack依赖于node.js的环境,因此我们需要安装NodeJS和NPM,NPM是一个NodeJS包管理和分发工具,后续我们经常通过npm安装开发过程中一些依赖包;—安装过程可参考我的“全局安装webpack”博文,Node环境要求8.9以上或者更高版本,可以通过node -v检查自己安装的版本;Vue脚手架安装—可以参考Vue CLI官网安装,官网参考地址:https://cli.vuejs.org
2021-10-17 10:12:14 142
原创 全局安装webpack-解决不是内部命令的问题
全局安装Webpack-解决不是内部命令的问题node.js的安装—首先需要安装node.js,可以直接在官网安装,官网安装地址:https://nodejs.org/en/;具体安装流程可以参考我的第一篇博文;—安装完成,可以在cmd执行node -v显示安装版本即表示安装成功;配置安装路径—找到node.js的安装路径,会在里面找到node_cache和node_global两个文件夹,如果没有可以自己创建一下,分别执行以下命令:npm config set cache "D:\Pro
2021-10-16 16:01:55 722
原创 JS-JSON
JS-JSONJSON简介JSON Java Script Object Notation JS对象表示法—JS中的对象只有JS自己认识,其他的语言都不认识;—JSON就是特殊格式的字符串,这个字符串可以被任意语言所识别, 并且可以转换为任意语言中的对象;—JSON主要用于数据的交互传递;—JSON和JS对象的格式一样,只不过JSON字符串中的属性名必须加双引号,其他的和JS格式一致;—JSON在IE7及以下的浏览器中不支持,所以在这些浏览器中调用时会报错;JSON对象分类:对
2021-10-15 16:58:45 65
原创 JS-Array
JS-数组数组简介—内建对象由ES标准定义的对象(Object、Function)—数组(Array)也是一个内建对象;—它和普通对象功能类似,也是用来存储一些值;—不同的是普通对象使用字符串作为属性名,而数组是使用数字作为索引操作元素;—索引index:从0开始的整数是索引;—数组的存储性能比普通对象要好,在开发中我们经常使用数组来存储一些数据;—使用typeof检查数组时,会返回object;—构造函数创建数组对象语法:var arr = new Array();—向数组中添加
2021-10-15 15:55:44 436
原创 JS-BOM
JS-BOMBOM—浏览器对象模型—BOM可以使我们通过JS操作浏览器;—在BOM中为我们提供了一组对象,用来完成浏览器的操作;—BOM对象:Window—代表的整个浏览器窗口,同时window也是网页中的全局对象;Navigator—代表的当前浏览器信息,通过该对象可以识别不同的浏览器;Location—代表当前浏览器的地址栏信息,通过该对象可以获取地址信息或者操作浏览器跳转页面;History—代表浏览器的历史记录,可以通过该对象来操作浏览器的历史记录;由
2021-09-17 09:40:07 90
原创 JS-函数
JS-函数函数简介—函数也是一个对象;—函数中可以封装一些功能(代码),在需要时可以执行这些功能(代码);—函数中可以保存一些代码,在需要是时调用;—使用typeof检查一个函数对象时,会返回function;—函数对象具有对象的基本功能(添加属性等功能),同时它可以封装代码;使用构造函数创建函数对象—语法:var fun = new Function();—可以将要封装的代码以字符串的形式传递给构造函数;var fun = new Function("console.log(
2021-09-09 17:24:34 218
原创 JS-DOM
JS-DOMDOM简介DOM—宿主对象,由浏览器或者编程环境提供的对象;—全称:Document Object Model文档对象模型;—JS中通过DOM对HTML文档进行操作;可以随心所欲的操作WEB页面;文档—文档表示的是整个HTML网页文档;(文档也可以看作是一个对象);对象—表示将网页中的每一部分都转换为一个对象;(比如<h1>标签,注释,标签内容等等);模型—使用模型表示对象间的关系,即DOM树,方便获取对象;节点(Node) 构成HTML文档的最基本单元;
2021-09-03 20:02:29 84
原创 JS-事件对象
JS-事件对象事件对象简介事件对象—当事件响应函数被触发时,浏览器每次都会将一个事件对象作为实参传递给响应函数;—在事件对象中封装了当前事件的一切信息,比如鼠标坐标、键盘哪个按键被按下、鼠标滚轮滚动方向等;—具体可以查看事件对象中相关属性,比如鼠标/键盘相关属性,例如button属性,返回事件被触发时,哪个鼠标按钮被点击;—在IE8中,响应函数被触发时,浏览器不会传递事件对象这个参数,在IE8及以下的浏览器中,将事件对象作为window对象的属性保存的;因此为了兼容IE8浏览器,可以通过
2021-08-30 09:45:27 184
原创 JS-正则表达式
JS-正则表达式正则表达式的简介—用于定义一些字符串的规则,计算机可以根据正则表达式检查一个字符串是否符合规则,或者将字符串中符合规则的内容提取出来;—正则表达式实际上可以看作是一个对象;—创建正则表达式: 1. 构造函数创建语法:var 变量 = new RegExp("正则表达式","匹配模式"); 2. 参数一:正则表达式,参数二:匹配模式;两个参数都为字符串; 3. 在构造函数中可以传递一个匹配模式(字符参数)作为第二个参数,其中参
2021-08-27 10:18:12 146
原创 JS-对象
JS-对象对象—五种基本数据类型:String字符串、Number数值 Boolean布尔值 、Null空值、Undefined未定义;—如果看到某个数据类型不属于以上五种基本类型,则全部为对象Object;—基本数据类型的不足:(1)都为单一值,值与值之间无联系;(2)如果使用基本数据类型数据,我们所创建的变量都是独立的,不是一个整体;—对象属于一种复合数据类型,在对象中可以保存多个不同数据类型的属性;—对象的分类:内建对象:由ES标准中定义的对象,在任何ES的实现中都可以使用;
2021-08-21 11:42:47 143
原创 JS-运算符(操作符)
JS-运算符(操作符)运算符也叫操作符,通过运算符可以对一个或者多个值进行运算;比如说,typeof就是一个运算符,获得一个值的类型,并将该值的类型以字符串的形式返回;算数运算符+:加法运算符,对符号两侧的两个值进行加法运算,并将结果返回;当对非Number类型的值进行运算时,会将这些值转换为Number,然后再进行相加运算;任何值和NaN进行运算都是NaN;对两个字符串进行加法运算,则会做拼串,会将两个字符串拼接为一个字符串并返回;任何值和字符换进行加法运算,都会首先
2021-08-15 19:32:17 238
原创 JS-流程控制
JS-流程控制语句和代码块—语句statement:程序是由一条条语句构成的;语句是按照自上往下的顺序一条一条执行的;—代码块:一个{}中的语句,我们也称为代码块;—同一个{}中的语句,我们称为一组语句,它们共同执行或者共同不执行;—在代码块的后边就不用编写分号了;—JS中的代码块,只具有分组功能,不具备其他功能;—代码块内部的内容,在外部是完全可见的,代码块只是分组,不能将代码块内的内容进行隔离;流程控制语句—通过流程控制语句可以控制程序执行流程,使程序可以根据一定条件来选择执行
2021-08-11 22:23:05 99
原创 JS-数据类型
JS-数据类型JS中,字面量的数据类型一共有6种:—String 字符串—Number 数值—Boolean 布尔值—Null 空值—Undefined 未定义—Object 对象其中String Number Boolean Null和Undefined属于基本数据类型,Object属于引用数据类型;String字符串—在JS中使用字符串需要使用引号引起来,单引号和双引号都可以,成对使用,不能单双引号混合使用;—引号不能嵌套使用,双引号里面不可以放置双引号,单引号里面不可以放
2021-08-06 21:09:13 75
原创 JavaScript—JS Basis
JS-Basis简介JavaScript诞生于1995年,它的出现主要用于处理网页中的前端验证;前端验证就是检查用户输入内容是否符合一定的规则(浏览器验证并非服务器验证是否符合规则),比如用户名的长度、密码的长度和邮箱格式等。ECMAScript是JavaScript的一个标准文档,这个标准是由各个厂商去实现;不同的浏览器厂商对该标准会有不同的实现;一个完整的JavaScript主要由三个部分组成:ECMAScript(标准文档)、DOM(文档对象模型)、BOM(浏览器对象模型);特点—
2021-08-03 17:00:42 192
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人