- 博客(28)
- 收藏
- 关注
RSS订阅原创 Webpack教程
webpack简介我们平时写好的前端代码要部署到服务器上进行测试，这个时候就需要打包工具，这就是webpack。Webpack 是一个前端资源加载/打包工具。我们前端编写的代码除了基本的JS文件，还有许多的less/css这些样式文件以及各种图片，webpack就是帮助将这些混在一起的文件，进行分配，将相同的文件分类到一起，形成一个个静态资源文件夹，这样就可以帮忙减少页面的访问。下面是webpack主要几个组成：1、entry：整个项目的入口：主要是’./app.js’文件。2、output：整个
2021-04-01 10:12:12
945
原创 计算机网络——应用层
计算机网络——应用层DNSDNS，（Domain Name System）域名系统。因为当我们访问一个网站的时候，其实访问的是一系列的IP地址+主机等一系列数字，记录十分麻烦，而且也记不住。但其实我们访问各个网站的时候，你会发现根本不是一系列的数字，其实就是利用了DNS来代替IP地址，这就是域名。DNS协议DHCP协议DHCP，Dynamic Host Configoration Protocol，动态主机配置协议。一个局域网协议，并应用于UDP协议之上的应用层。提出一个问题，IP地址的网络
2021-04-01 10:11:22
347
原创 axios教程
AxiosAxios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。特点：1、在浏览器中使用可以帮助生成XMLHttpRequest请求。2、在node.js里面使用可以帮助生成http请求。3、设置了请求、响应拦截器。4、支持Promise的API。5、自动转换JSON数据。6、转换请求、响应数据。7、可以取消请求。请求getaxios.get(url) .then(response=>{ // ... }).catch(resp
2021-04-01 10:09:27
208
原创 Vue教程十二——虚拟DOM
虚拟DOM在此章节，讲解一下关于Vue虚拟DOM的知识点。那什么是虚拟DOM呢，这里了解一下页面渲染的过程。页面渲染当我们请求页面时，HTTP请求返回就会返回页面HTML数据：1、首先会将HTML信息构建成DOM节点树2、之后将CSS样式构建成CSSOM树3、之后将上面的两棵树结合形成一个render树4、最后将render树加载到浏览器页面上注意，这是一个极其复杂耗时的过程，假如我们执行操作，一次改一点，一次改一点，那么就需要一遍又一遍的执行上面的页面渲染，页面就会卡死，所以Vue就是
2021-03-19 10:18:03
219
2
原创 Javascript教程十————DOM
DOM对象DOM是HTML文件被浏览器解析后的一个树形结构，用于在浏览器中显示HTML中的内容，同时浏览器只会生成一颗DOM树，因此，只有一个DOM的根结点document。操纵DOM树的操作：遍历、添加、删除、更新。获取一个DOM树的节点主要方法有三种：document.getElementById() // ID 是唯一的在HTML文件中document.getElementsByTagname() // 根据标签来获取一组节点document.getElementsBycCassName(
2021-03-19 10:17:12
65
原创 Javascript教程十——事件循环机制
事件循环机制事件循环，也就是EventLoop，也就是完成一个任务会需要完成一系列的任务，因此会有一个任务队列，用循环的方式一个个执行，同时执行期间的机制依据着：同步 > 异步很好理解，就是同步的任务一定是排着队的一个个从前往后执行，但是异步是会比同步慢一点，这是无可厚非的，但是在异步里面也是要分先后的。任务类型任务类型主要分为两种：宏任务 marco-task 和 微任务 micro-task。在ES6中，宏任务又称为ScriptJobs，而微任务又称PromiseJobs宏
2021-03-19 10:16:46
97
原创 Javascript教程九——BOM
浏览器对象（BOM）Javascript可以获取浏览器的对象，并对其进行操作。WindowsWindows之前可以作为全局对象来调用，同时也可以用来操作浏览器对象，用来表示浏览器的窗口。window对象有innerWidth和innerHeight属性，可以获取浏览器窗口的内部宽度和高度。对应的，还有一个outerWidth和outerHeight属性，可以获取浏览器窗口的整个宽高。navigatornavigator对象表示浏览器的信息screenscreen对象表示屏幕的信息scre
2021-03-19 10:15:37
57
原创 Javascript教程八——面向对象编程
面向对象编程JavaScript对每个创建的对象都会设置一个原型，指向它的原型对象。var arr = [1, 2, 3];其原型链是：实例---->数组---------------->对象Object ---------->nullarr ----> Array.prototype ----> Object.prototype ----> null在Array.prototype上，已经有许多已定义好的函数，例如indexOf等，此时就可以直接通过一下
2021-03-04 18:51:38
84
原创 Javascript教程七——标准对象
标准对象在JavaScript的世界里，一切都是对象，为了区分对象的类型，我们用typeof操作符获取对象的类型。包装对象（完全可以不用，还容易出错）所谓包装对象，就是使用new 将数据类型转换成object，例如：var arr = new Number(123); // object上述代码将 number类型饿123 转换成object类型的123，两者使用 === 会出现不相等的情况，所以轻易不要使用！！！！！需要转换类型，可以省略掉 new ，这样类型就可以单纯转换成 Number/
2021-03-04 18:50:45
59
原创 Javascript教程六——闭包+箭头函数
高级函数JavaScript的函数其实都指向某个变量。既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。function add(x, y, f) { return f(x) + f(y);}编写高阶函数，就是让函数的参数能够接收别的函数。map/reducemap()方法定义在JavaScript的Array中，用于对数组中每个元素执行相应的操作。var arr = [1,2,3,4,5];function pow(x)
2021-03-04 18:49:29
1229
1
原创 Vue-router教程六——路由懒加载
路由懒加载当我们写完代码进行打包的时候，我们会发现首页加载的时间长的过分，这是因为首页在加载所有路由的组件，就十分浪费时间，所以路由懒加载提供的思路便是将路由表进行切割，只有当这个路由被访问的时候才会去加载。而帮助实现的便是Vue的异步组件和webpack的代码分割功能（我需要去看看webpack）。1、Vue异步组件: 可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身)：const Foo = () => Promise
2021-02-25 12:23:09
114
原创 Vue-router教程3——Browser对象
Browser对象在上一节中，我们有提到history对象，那么history究竟是什么呢，在这一节，我们将详细谈谈Browser对象。Windows对象Windows对象就是我们打开浏览器的窗口，通过操纵Windows对象，我们就可以了解当前浏览器窗口的属性以及对属性进行修改。因此Windows对象的属性能方便我们更好的去晚上页面，具体的属性就可以参考：https://www.runoob.com/jsref/obj-window.htmlNavigator 对象Navigator 对象里面包
2021-02-25 12:21:59
275
原创 Vue教程11-自定义指令
自定义指令平时我们和Vue搭配使用的UI组件都是element-ui，每个调用的指令都有已经封装完毕的绑定数据和事件，但是有时候我们希望能够在绑定指令上再复杂化，这个情况下就需要我们自己去定义一个绑定指令了。可以这样理解，一个element-UI里面的组件，它写好了一个点击指令，只要绑定好对应的函数便可以直接使用，但是此时，我们希望使用鼠标移入/移出指令，但是element-UI没有写。那我们就可以自己来写了。因为我平时都喜欢以组件为单位，所以在组件里面局部定义指令更方便。在script里面，dir
2020-08-12 10:08:24
124
原创 Vue教程10-插槽
分发插槽已知现在存在一个组件，我们已经知道往里面传递数据会呈现的模样，但是现在，我希望呈现出来的模样由我自己来决定，即自定义，此时就需要我们使用插槽slot。插槽 slot我们自己定义了一个子组件，之后我们会在父组件里面调用这个子组件，这时，当我们希望在父组件页面里面给这个子组件里面添加内容时，我们会这样做：// 父组件页面<div> <child> 这是我们希望添加内容的地方 </child></div>// 子组件模版<te
2020-08-12 10:07:55
74
原创 Vue教程9-父组件与子组件数据传递
数据传递同时这里就要考虑关于组件之间的数据传递了，很明显，当父组件要向子组件传递数据时，通过 props。在父组件界面上，通过将需要传递的数据绑定到一个参数里面，之后在子组件的data里面，定义一个props对象，这个对象里面在定义传递的属性参数,包括type，default。props利用props从父组件向子组件传递数据时，props里面的属性采用驼峰命名法，那么在父组件进行数据绑定时要利用 - 来连接，同时传递数据的类型直接在props定义的时候设定 type ，平时绑定的数据可以直接赋值，也可
2020-08-12 10:07:31
127
原创 Vue教程8-组件
组件一个组件相当于一个Vue实例，可以多次复用，在这个实例里面，包括：template、script、style。因为和一个实例完全相同，因此在组件中也会包含data、metheds、computed、watch等。data但是和普通的实例也有一些不同，在普通的Vue里面，data是一个对象，但是在组件中，data必须是一个函数，这样子，每个组件的data就会维护成一个独立的数据，就算多次复用该组件，数据也不会互相影响。data(){ return { ... }}组件组织组件的
2020-08-12 10:07:08
96
原创 Vue教程7-数据驱动
数据驱动Vue的数据驱动便是不同以往的js需要通过事件来触发更新DOM，而是直接当数据发生变化，页面就会随之更新，不需要手动去更新DOM，更加便捷简单，而Vue的数据驱动就要依赖MVVM框架以及双向数据绑定。双向数据绑定Vue页面组件的数据初始化都是在data里面进行声明，Vue会遍历data里面所有声明的属性property，之后Vue会利用Object.defineProperty()将这些属性全部转换成getter/setter 这些 getter/setter 对用户来说是不可见的，但是在内部
2020-08-12 10:06:31
131
原创 Vue教程6-style的绑定
style绑定HTML标签中属性style是用来表述css样式的，但有的时候，我们的css样式不是固定的，所以我们不能直接写成普通的字符串,像是下面的例子，就是单纯可以将HTML组件写成固定的css样式。<div style='height: 500px; width: 500px;'/>当我们需要进行动态的css样式绑定时，我们就需要利用v-bind。<div :style='Object' />data:{ Object: { width: window.in
2020-08-12 10:05:59
78
原创 Vue教程5-条件与列表渲染
条件渲染之前我们说过 v-if命令接收true/false后会对一个元素进行显示与否，但是当我们需要对多个元素进行切换时，我们就需要多个v-if了。因此Vue就提出了v-else/v-else-if。假设我们一共三个元素，利用template标签。<template v-if=' A=== B'></template><template v-else-if=' A=== C'></template><template v-else-if='
2020-08-12 10:05:23
71
原创 Vue教程4-计算属性与监听属性
计算属性与监听器计算属性在data对象里面的是普通声明的属性property，还有一类属性，它们存在与computed对象中，叫做计算属性。var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.spl
2020-07-15 12:13:37
97
原创 Vue教程3-声明式渲染
VueVue是一套用于构建用户界面的渐进式框架，被设计可以自底向上逐层设计。Vue的核心只关心视图层。声明式渲染Vue可以采用简洁的语法模版来声明式的将数据渲染进DOM系统中，也就是可以通过 {{data}} 的方式直接将数据写入DOM中。<div id='app'> {{message}}</div>var app = new Vue({ el: '#app', data: { message: 'Hello, World', show: true,
2020-07-15 12:12:05
575
原创 Vue教程2-实例
实例创建一个Vue实例是通过new Vue（）创建的。var app = new Vue({ ...})创建之后，我们就要关注实例里面的数据data与方法methods。数据与方法所谓的数据，便是实例里面的data，data是一个对象，在对象里面便要声明一个个属性property，因为上节说过，Vue是使用的声明式渲染，只有在data对象中声明的的属性才有响应式的属性，必须在实例创建之前便在data里面声明，因此如果有些属性没有初始值，我们就帮助添加一个初始值，例如：0、‘’、false、[
2020-07-15 12:11:32
170
原创 Vue教程1-创建项目
创建项目Vue创建项目使用脚手架vue-cli更为简洁方便。Vue-clivue-cli是官方为开发者设计的用于创建项目的一款脚手架，可以帮助用户自动集成各种开发环境、依赖配置等。安装脚手架首先，Vue的搭建是要建立在JS的编程基础，因此需要在电脑中全局安装Node.js（去官网便可以安装）。安装成功后，在命令行中输入：npm -v 便可查看安装的Node版本，同时npm是Node开发中的一个命令，通过npm便可以进行各种依赖的安装。之后通过npm便可以全局安装vue-cli。npm
2020-07-13 18:11:01
240
原创 Javascript教程五——函数
函数function abs(x) { if (x >= 0) { return x; } else { return -x; }}var abs = function (x) { if (x >= 0) { return x; } else { return -x; }};上述abs()函数的定义如下：1、function指出这是一个函数定义2、abs是函数的名称3、(x)括号内列出函数的参数，多个参数以,分隔4、
2020-07-06 12:20:24
70
原创 Javascript教程四——对象与遍历
数据类型分析详解对象JavaScript用一个{…}表示一个对象，键值对以 xxx: xxx 形式申明，用 , 隔开之后通过对象.属性进行访问。var person = { name: 'ruby_ruby', age: 20, sex: male};person.name; // 'ruby_ruby'person.age; // 20如果属性名包含特殊字符，就必须用 ’ '括起来var xiaohong = { name: '小红', 'middle-school': 'No
2020-06-27 11:41:09
689
原创 Javascript教程三——数组
数据结构详解数组JavaScript的Array可以包含任意数据类型，并通过索引来访问每个元素。要取得Array的长度，直接访问length属性Array.lengthArray可以通过索引把对应的元素修改为新的值，因此，对Array的索引进行赋值会直接修改这个Arrayarr = [1,2,3];arr[0] = 4;alert(arr); // [4,2,3]indexOfArray也可以通过indexOf()来搜索一个指定的元素的位置arr.indexOf(4); // 0
2020-06-26 21:37:03
105
原创 Javascript教程二——字符串
数据类型详解字符串JavaScript的字符串就是用’‘或""括起来的字符表示。如果’本身也是一个字符，那就可以用"括起来，比如"I’m OK"包含的字符是I，’，m，空格，O，K这6个字符。如果字符串内部既包含’又包含"怎么办？可以用转义字符\来标识。转义字符\可以转义很多字符，比如\n表示换行，\t表示制表符，字符\本身也要转义，所以\表示的字符就是\。多行字符串由于多行字符串用\n写起来比较费事，所以最新的ES6标准新增了一种多行字符串的表示方法，用反引号 ` 表示。` 1233 4
2020-06-26 11:43:22
130
原创 JavaScript教程一——数据类型与变量
简介ECMAScriptJavaScript语言的标准，被称为ECMAScript标准。最新版ECMAScript 6标准（简称ES6）在2015年6月正式发布。JavaScript组成ECMAScript（ES）：js核心解释器DOM (Document Object Model 文档对象模型)：操作HTML对象，使用document。BOM (Browser Object Modal 浏览器对象模型)：操作浏览器，使用window。快速入门<script>...</sc
2020-06-26 11:24:12
209
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人