ruby___ruby的博客

Webpack教程

ruby___ruby — Thu, 01 Apr 2021 10:12:12 +0800

webpack简介我们平时写好的前端代码要部署到服务器上进行测试，这个时候就需要打包工具，这就是webpack。 Webpack 是一个前端资源加载/打包工具。我们前端编写的代码除了基本的JS文件，还有许多的less/css这些样式文件以及各种图片，webpack就是帮助将这些混在一起的文件，进行分配，将相同的文件分类到一起，形成一个个静态资源文件夹，这样就可以帮忙减少页面的访问。下面是webpack主要几个组成： 1、entry：整个项目的入口：主要是’./app.js’文件。 2、output：整个

计算机网络——应用层

ruby___ruby — Thu, 01 Apr 2021 10:11:22 +0800

计算机网络——应用层 DNS DNS，（Domain Name System）域名系统。因为当我们访问一个网站的时候，其实访问的是一系列的IP地址+主机等一系列数字，记录十分麻烦，而且也记不住。但其实我们访问各个网站的时候，你会发现根本不是一系列的数字，其实就是利用了DNS来代替IP地址，这就是域名。 DNS协议 DHCP协议 DHCP，Dynamic Host Configoration Protocol，动态主机配置协议。一个局域网协议，并应用于UDP协议之上的应用层。提出一个问题，IP地址的网络

axios教程

ruby___ruby — Thu, 01 Apr 2021 10:09:27 +0800

Axios Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。特点： 1、在浏览器中使用可以帮助生成XMLHttpRequest请求。 2、在node.js里面使用可以帮助生成http请求。 3、设置了请求、响应拦截器。 4、支持Promise的API。 5、自动转换JSON数据。 6、转换请求、响应数据。 7、可以取消请求。请求 get axios.get(url) .then(response=>{ // ... }).catch(resp

Vue教程十二——虚拟DOM

ruby___ruby — Fri, 19 Mar 2021 10:18:03 +0800

虚拟DOM 在此章节，讲解一下关于Vue虚拟DOM的知识点。那什么是虚拟DOM呢，这里了解一下页面渲染的过程。页面渲染当我们请求页面时，HTTP请求返回就会返回页面HTML数据： 1、首先会将HTML信息构建成DOM节点树 2、之后将CSS样式构建成CSSOM树 3、之后将上面的两棵树结合形成一个render树 4、最后将render树加载到浏览器页面上注意，这是一个极其复杂耗时的过程，假如我们执行操作，一次改一点，一次改一点，那么就需要一遍又一遍的执行上面的页面渲染，页面就会卡死，所以Vue就是

Javascript教程十————DOM

ruby___ruby — Fri, 19 Mar 2021 10:17:12 +0800

DOM对象 DOM是HTML文件被浏览器解析后的一个树形结构，用于在浏览器中显示HTML中的内容，同时浏览器只会生成一颗DOM树，因此，只有一个DOM的根结点document。操纵DOM树的操作：遍历、添加、删除、更新。获取一个DOM树的节点主要方法有三种： document.getElementById() // ID 是唯一的在HTML文件中 document.getElementsByTagname() // 根据标签来获取一组节点 document.getElementsBycCassName(

Javascript教程十——事件循环机制

ruby___ruby — Fri, 19 Mar 2021 10:16:46 +0800

事件循环机制事件循环，也就是EventLoop，也就是完成一个任务会需要完成一系列的任务，因此会有一个任务队列，用循环的方式一个个执行，同时执行期间的机制依据着：同步 > 异步很好理解，就是同步的任务一定是排着队的一个个从前往后执行，但是异步是会比同步慢一点，这是无可厚非的，但是在异步里面也是要分先后的。任务类型任务类型主要分为两种：宏任务 marco-task 和微任务 micro-task。在ES6中，宏任务又称为ScriptJobs，而微任务又称PromiseJobs 宏

Javascript教程九——BOM

ruby___ruby — Fri, 19 Mar 2021 10:15:37 +0800

浏览器对象（BOM） Javascript可以获取浏览器的对象，并对其进行操作。 Windows Windows之前可以作为全局对象来调用，同时也可以用来操作浏览器对象，用来表示浏览器的窗口。 window对象有innerWidth和innerHeight属性，可以获取浏览器窗口的内部宽度和高度。对应的，还有一个outerWidth和outerHeight属性，可以获取浏览器窗口的整个宽高。 navigator navigator对象表示浏览器的信息 screen screen对象表示屏幕的信息 scre

Javascript教程八——面向对象编程

ruby___ruby — Thu, 04 Mar 2021 18:51:38 +0800

面向对象编程 JavaScript对每个创建的对象都会设置一个原型，指向它的原型对象。 var arr = [1, 2, 3]; 其原型链是：实例---->数组---------------->对象Object ---------->null arr ----> Array.prototype ----> Object.prototype ----> null 在Array.prototype上，已经有许多已定义好的函数，例如indexOf等，此时就可以直接通过一下

Javascript教程七——标准对象

ruby___ruby — Thu, 04 Mar 2021 18:50:45 +0800

标准对象在JavaScript的世界里，一切都是对象，为了区分对象的类型，我们用typeof操作符获取对象的类型。包装对象（完全可以不用，还容易出错）所谓包装对象，就是使用new 将数据类型转换成object，例如： var arr = new Number(123); // object 上述代码将 number类型饿123 转换成object类型的123，两者使用 === 会出现不相等的情况，所以轻易不要使用！！！！！需要转换类型，可以省略掉 new ，这样类型就可以单纯转换成 Number/

Javascript教程六——闭包+箭头函数

ruby___ruby — Thu, 04 Mar 2021 18:49:29 +0800

高级函数 JavaScript的函数其实都指向某个变量。既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。 function add(x, y, f) { return f(x) + f(y); } 编写高阶函数，就是让函数的参数能够接收别的函数。 map/reduce map()方法定义在JavaScript的Array中，用于对数组中每个元素执行相应的操作。 var arr = [1,2,3,4,5]; function pow(x)

Vue-router教程六——路由懒加载

ruby___ruby — Thu, 25 Feb 2021 12:23:09 +0800

路由懒加载当我们写完代码进行打包的时候，我们会发现首页加载的时间长的过分，这是因为首页在加载所有路由的组件，就十分浪费时间，所以路由懒加载提供的思路便是将路由表进行切割，只有当这个路由被访问的时候才会去加载。而帮助实现的便是Vue的异步组件和webpack的代码分割功能（我需要去看看webpack）。 1、Vue异步组件: 可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身)： const Foo = () => Promise

Vue-router教程3——Browser对象

ruby___ruby — Thu, 25 Feb 2021 12:21:59 +0800

Browser对象在上一节中，我们有提到history对象，那么history究竟是什么呢，在这一节，我们将详细谈谈Browser对象。 Windows对象 Windows对象就是我们打开浏览器的窗口，通过操纵Windows对象，我们就可以了解当前浏览器窗口的属性以及对属性进行修改。因此Windows对象的属性能方便我们更好的去晚上页面，具体的属性就可以参考： https://www.runoob.com/jsref/obj-window.html Navigator 对象 Navigator 对象里面包

Vue教程11-自定义指令

ruby___ruby — Wed, 12 Aug 2020 10:08:24 +0800

自定义指令平时我们和Vue搭配使用的UI组件都是element-ui，每个调用的指令都有已经封装完毕的绑定数据和事件，但是有时候我们希望能够在绑定指令上再复杂化，这个情况下就需要我们自己去定义一个绑定指令了。可以这样理解，一个element-UI里面的组件，它写好了一个点击指令，只要绑定好对应的函数便可以直接使用，但是此时，我们希望使用鼠标移入/移出指令，但是element-UI没有写。那我们就可以自己来写了。因为我平时都喜欢以组件为单位，所以在组件里面局部定义指令更方便。在script里面，dir

Vue教程10-插槽

ruby___ruby — Wed, 12 Aug 2020 10:07:55 +0800

分发插槽已知现在存在一个组件，我们已经知道往里面传递数据会呈现的模样，但是现在，我希望呈现出来的模样由我自己来决定，即自定义，此时就需要我们使用插槽slot。插槽 slot 我们自己定义了一个子组件，之后我们会在父组件里面调用这个子组件，这时，当我们希望在父组件页面里面给这个子组件里面添加内容时，我们会这样做： // 父组件页面

这是我们希望添加内容的地方

// 子组件模版

Vue教程9-父组件与子组件数据传递

ruby___ruby — Wed, 12 Aug 2020 10:07:31 +0800

数据传递同时这里就要考虑关于组件之间的数据传递了，很明显，当父组件要向子组件传递数据时，通过 props。在父组件界面上，通过将需要传递的数据绑定到一个参数里面，之后在子组件的data里面，定义一个props对象，这个对象里面在定义传递的属性参数,包括type，default。 props 利用props从父组件向子组件传递数据时，props里面的属性采用驼峰命名法，那么在父组件进行数据绑定时要利用 - 来连接，同时传递数据的类型直接在props定义的时候设定 type ，平时绑定的数据可以直接赋值，也可

Vue教程8-组件

ruby___ruby — Wed, 12 Aug 2020 10:07:08 +0800

组件一个组件相当于一个Vue实例，可以多次复用，在这个实例里面，包括：template、script、style。因为和一个实例完全相同，因此在组件中也会包含data、metheds、computed、watch等。 data 但是和普通的实例也有一些不同，在普通的Vue里面，data是一个对象，但是在组件中，data必须是一个函数，这样子，每个组件的data就会维护成一个独立的数据，就算多次复用该组件，数据也不会互相影响。 data(){ return { ... } } 组件组织组件的

Vue教程7-数据驱动

ruby___ruby — Wed, 12 Aug 2020 10:06:31 +0800

数据驱动 Vue的数据驱动便是不同以往的js需要通过事件来触发更新DOM，而是直接当数据发生变化，页面就会随之更新，不需要手动去更新DOM，更加便捷简单，而Vue的数据驱动就要依赖MVVM框架以及双向数据绑定。双向数据绑定 Vue页面组件的数据初始化都是在data里面进行声明，Vue会遍历data里面所有声明的属性property，之后Vue会利用Object.defineProperty()将这些属性全部转换成getter/setter 这些 getter/setter 对用户来说是不可见的，但是在内部

Vue教程6-style的绑定

ruby___ruby — Wed, 12 Aug 2020 10:05:59 +0800

style绑定 HTML标签中属性style是用来表述css样式的，但有的时候，我们的css样式不是固定的，所以我们不能直接写成普通的字符串,像是下面的例子，就是单纯可以将HTML组件写成固定的css样式。

当我们需要进行动态的css样式绑定时，我们就需要利用v-bind。

data:{ Object: { width: window.in

Vue教程5-条件与列表渲染

ruby___ruby — Wed, 12 Aug 2020 10:05:23 +0800

条件渲染之前我们说过 v-if命令接收true/false后会对一个元素进行显示与否，但是当我们需要对多个元素进行切换时，我们就需要多个v-if了。因此Vue就提出了v-else/v-else-if。假设我们一共三个元素，利用template标签。