来杯仙气儿-优快云博客

原创 React组件生命周期钩子函数

React框架组件的生命周期一般分为三个阶段，分别是挂载阶段、更新阶段、卸载阶段一、挂载阶段1、constructorconstructor钩子函数是组件的第一个钩子函数，这个钩子函数里面存放管理自身状态的this.state()函数以及super()函数，super()函数在constructor汉中必须要写，否则会报错。super()函数主要是调用父类里面的方法。constructo...

2020-04-19 21:46:16 742

原创 Vuex在vue-cli中的使用

一：什么是vuex？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。大白话理解就是，这一部分为公共的东西，大家在其他的组件里面都可以调用，适用于中大型项目，小型项目用起来就显得有点冗余了。二：vuex的安装npm安装：npm install vuex --save三：在项目中...

2020-04-02 21:05:50 380 1

原创 axios的拦截器配合路由守卫实现前端鉴权认证登录

1、安装axios使用npm安装npm install axios2、封装axios拦截器可以使用自定义配置新建一个 axios 实例，axios.create([config])axios的方法可以去网站里面了解，这里不做多余解释在项目的src目录下新建一个文件夹，里面新建一个js文件，笔者这里的路径是：src/utils/http.js//1.引入axios模块import...

2020-03-30 21:40:08 1039

原创 Swiper+Vue的自定义指令实现轮播图封装

在vue-cli的脚手架环境下，可能会涉及到轮播图组件的复用，下面就来对轮播图的组件进行封装。1、安装Swiper插件在项目的根目录下打开命令行：npm install swiper检查是否安装完成，可以在package.json的文件中查看。如果有swiper表示安装完成。2、准备好一个轮播图组件<template> <div class="swipe...

2020-03-30 20:07:59 755

原创 vue-router的使用

Vue中会使用官方提供的vue-router插件来使用单页面，原理就是通过检测地址栏变化后将对应的路由组件进行切换（卸载和安装），从而达到单页面运用的，使用户通过某些操作更改地址栏url之后，动态的进行不同模板内容的无刷新切换。1.vue-router的安装方法一：直接下载安装下载地址：https://unpkg.com/vue-router/dist/vue-router.js<s...

2020-03-28 21:51:29 310

了解生命周期的各个部分Vue中的任何一个实例和组件的产生，都是从new开始的(vue实例我们有new关键词可以看到，组件的new是我们看不到)。他们都会经历下面的过程：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroy这个几个部分，他们也是Vue提供的钩子函数，和data以及met...

2020-03-24 22:19:34 306

转载 Vue中的虚拟DOM

vue框架还有一个强大的功能，就是提供了一个虚拟DOM树的概念，虚拟的DOM的核心思想是：对复杂的文档DOM结构，提供一种方便的工具，进行最小化地DOM操作。如何理解这就话，我的理解是：在页面渲染之前，先在内存里面生成一个DOM树（可以理解电脑先在脑海里构建了一个DOM结构），假设它为DOM树1，然后再渲染到页面上生成一个存在的DOM结构。在我们通过vue进行一些DOM操作的时候，比如在一个di...

2020-03-23 22:23:21 177

原创 Vue.js实现toDoList列表功能

toDoList是一个经典的案例，原生js，jquery和vue.js都可以实现此功能，我们先来看看用jquery实现此功能的代码。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <bod...

2020-03-19 21:33:35 283

原创 Vue完成新增属性的双向绑定

在vue框架中，一般情况下，我们为某一个对象添加上一个属性，直接赋值就可以了，代码如下：<div class="box" id="box"> <ul> <li> <p>{{obj.name}}</p> <p>{{obj.age}}</p> <p>{{obj....

2020-03-18 21:53:46 1304

原创使用token、cookie+session两种方法实现身份验证

token、cookie+session是基于nodejs环境下的模块，可以用来实现身份验证的功能，下面请看具体的实现过程。token模块实现的思想：在服务端不需要存储用户的登录记录，全部发给客户端有客户端自己存(cookie,local)1、客户端使用用户名跟密码请求登录2、服务端收到请求，去验证用户名与密码3、验证成功后，服务端会签发一个 Token（加了密的字符串），再把这个 To...

2020-03-12 21:47:22 1374

原创 EXPRESS处理常见请求的方法

express是基于nodejs的框架，当然，express也封装了对各种请求处理的方法，下面介绍一下get、post、ajax、jsonp请求的处理方法1、处理get请求//1.引入express框架const express=require('express');//2.创建服务器const serve=express();//3.监听端口serve.listen(5555,'l...

2020-03-11 21:24:04 1304

原创基于NODEJS的express框架的使用

1.什么是express？官方的解释是：Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架，为 Web 和移动应用程序提供一组强大的功能。简单点理解，就是原生的nodejs比较繁重，express框架的出现就是减轻了我们对原生nodejs的要求，更简单让我们学习使用nodejs技术，将其中很多常见的功能封装起来，类似于jQuery，是一个封装的工具库。2.安...

2020-03-10 21:32:09 542

原创我认识的jQuery中的设计模式

jQuery中常见的设计模式近几天学习了几个常用到的设计模式，自己总结了一下，加上了自己的理解和看法，下面对几个常用的设计模式逐一分析1.单例设计模式从名字我们就可以看出，单例就是指一个实例的意思，我们知道，构造函数实例化出来的对象，虽然长得一样，但是他们实际上是不同的对象，比如下面代码所示：function Person(){ this.name='Tom' }let p1=ne...

2020-02-22 20:04:33 316

m0_46212240的博客