- 博客(55)
- 收藏
- 关注
RSS订阅原创 小程序跳转方式
小程序跳转方式1、wx.navigateTo 用于保留当前页面、跳转到应用内的某个页面，使用 wx.navigateBack 可以返回到原页面。对于页面不是特别多的小程序，通常推荐使用 wx.navigateTo 进行跳转， 以便返回原页面，以提高加载速度。当页面特别多时，则不推荐使用。2、wx.redirectTo 当页面过多时，被保留页面会挤占微信分配给小程序的内存，或是达到微信所限制的 5 层页面栈。这时，我们应该考虑选择 wx.redirectTo 。wx.redirectTo() 用于关闭当前
2020-06-23 18:54:51
523
原创 微信小程序之生命周期
微信小程序之生命周期1、应用生命周期1、用户首次打开小程序，触发 onLaunch（全局只触发一次）。2、小程序初始化完成后，触发onShow方法，监听小程序显示。3、小程序从前台进入后台，触发 onHide方法。4、小程序从后台进入前台显示，触发 onShow方法。5、小程序后台运行一定时间，或系统资源占用过高，会被销毁。2、页面生命周期1、小程序注册完成后，加载页面，触发onLoad方法。2、页面载入后触发onShow方法，显示页面。3、首次显示页面，会触发onReady方法，渲染页
2020-06-22 21:49:35
386
原创 vue-router路由动态传参query和params
1.query方式传参和接收参数//路由{ path: '/detail', //这里不需要参入参数 name: "detail", component: () => import('@/views/login/index.vue'}使用：方法1：<router-link :to="{ name: 'details', query: { id: 123 }}">点击按钮</router-link>方法2：<router-link
2020-06-22 08:23:38
668
原创 Vue全家桶
Vue全家桶1、Vue有著名的全家桶系列，包含了vue-router，vuex， vue-resource。再加上构建工具vue-cli，sass样式,就是一个完整的vue项目的核心构成。概括起来就是：1.项目构建工具、2.路由、3.状态管理、4.http请求工具。下面单独介绍前言：Vue两大核心思想：组件化和数据驱动。组件化：把整体拆分为各个可以复用的个体，数据驱动：通过数据变化直接影响bom展示，避免dom操作。一、Vue-cli是快速构建这个单页应用的脚手架# 全局安装 vue-cli
2020-06-20 00:00:41
865
1
原创 vue中解决跨域问题
vue中解决跨域问题(1).什么是跨域跨域：由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一个与当前页面地址不同即为跨域。存在跨域的情况：网络协议不同，如http协议访问https协议。端口不同，如80端口访问8080端口。域名不同，如qianduanblog.com访问baidu.com。子域名不同，如abc.qianduanblog.com访问def.qianduanblog.com。域名和域名对应ip,如www.a.com访问20.205.28.90.(2).在v
2020-06-18 20:52:03
662
原创 从输入url到页面加载完成发生了什么
从输入url到页面加载完成发生了什么详解1、总体来说分为以下几个过程:DNS解析TCP连接发送HTTP请求服务器处理请求并返回HTTP报文浏览器解析渲染页面连接结束DNS解析DNS解析的过程就是寻找哪台机器上有你需要资源的过程。当你在浏览器中输入一个地址时，例如www.baidu.com，其实不是百度网站真正意义上的地址。互联网上每一台计算机的唯一标识是它的IP地址，但是IP地址并不方便记忆。用户更喜欢用方便记忆的网址去寻找互联网上的其它计算机，也就是上面提到的百度的网址。所以互联网设计者
2020-06-17 23:48:24
210
原创 css3新特性
css3新特性1、圆角边框border-radius:5px;2、弹性盒模型display: flex;3、媒体查询@media （max-width: 480px） {.box: {column-count: 1;}}4、颜色透明度color: rgba（255, 0, 0, 0.75）；5、渐变颜色background:linear-gradient（red, green, blue）；6、盒子阴影box-shadow:3px 3px 3px rgba（0, 64, 1
2020-06-16 21:07:23
237
原创 vue路由模式
vue路由模式1、vue-router 路由模式有几种？实际上存在三种模式：Hash: 使用URL的hash值来作为路由。支持所有浏览器。History: 以来HTML5 History API 和服务器配置。参考官网中HTML5 History模式Abstract： 支持所有javascript运行模式。如果发现没有浏览器的API，路由会自动强制进入这个模式。2、vue-router 路由模式区别1、hash ——即地址栏URL中的#符号（此hsah 不是密码学里的散列运算
2020-06-15 23:54:05
1551
原创 封装axios接口请求的思路
装axios接口请求的思路1、安装axiosnpm install axios2、在src目录下新建一个http文件夹3.在http下新建两个文件：api.js(用来统一数据请求接口)；request.js（封装数据请求方法）；4、request.js文件/* eslint-disable quotes *//* eslint-disable dot-notation */// 引入axiosimport axios from 'axios'import { Message } f
2020-06-15 10:22:43
853
原创 vue后台管理实现登录
vue后台管理实现登录1、实现思路1、当用户登录的时候，向后台请求登录接口，发送用户名和密码进行验证。// 点击登录按钮submitForm (formName) { this.$refs[formName].validate(async (valid) => { if (valid) { // this.ruleForm为用户名和密码，调用后端接口，进行传递验证 const result = await goLogin(t
2020-06-12 21:50:00
1682
原创 Vue的MVVM的理解
Vue的MVVM的理解什么是MVVM？1、概念介绍MVVM分为三个部分：分别是M（Model，模型层 ），V（View，视图层）1、 M：模型层，主要负责业务数据相关；2、 V：视图层，顾名思义，负责视图相关，细分下来就是html+css层；3、 VM：V与M沟通的桥梁，负责监听M或者V的修改，是实现MVVM双向绑定的要点；MVVM支持双向绑定，意思就是当M层数据进行修改时，VM层会监测到变化，并且通知V层进行相应的修改，反之修改V层则会通知M层数据进行修改，以此也实现了视图与模型层的
2020-06-11 23:34:25
438
原创 v-if与v-show的区别
v-if与v-show的区别一、区别v-if： 动态的向DOM树内添加或者删除DOM元素；“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；在初始渲染条件为假时，什么也不做。v-show： 通过设置DOM元素的display样式属性控制显示和隐藏；不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。总结：v-if有更高的切换消耗；v-show有更高的初始渲染消耗。二、应用场景1、v-if适合运行条件很少改变的情况； v-show适
2020-06-08 23:38:48
161
原创 div垂直居中有几种
div垂直居中有几种1、已知宽高position: absolute;left: 50%;top: 50%;width:200px;height:100px;margin-left:-100px;margin-top:-50px;2、宽高未知方法一：position#container{ position:relative;} #center{ position: absolute; top: 50%; left: 50%; transf
2020-06-07 22:02:56
2854
原创 js函数的多种写法
js函数的多种写法函数声明和表达式// 函数声明function BindingIdentifier() {}// 命名函数表达式// (BindingIdentifier对函数外部不可访问)(function BindingIdentifier() {}); // 匿名函数表达式(function() {});Function构造器new Function('x', 'y', 'return x * y;');新方法自从ES2015推出以来，已经引入了几种新的语法形式。这些
2020-06-06 23:59:49
575
原创 变量的解构赋值
变量的解构赋值1、变量的解构赋值基本用法ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构let [a, b, c] = [1, 2, 3];上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。默认值解构赋值允许指定默认值。注意： ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。2、对象的解构赋值解构不仅可以用于数组，还可以用于对象。let { foo, ba
2020-06-05 22:31:21
236
原创 原生javascript DOM操作
原生javascript DOM操作1.创建元素创建元素：document.createElement()创建文本节点 ：document.createTextNode()创建文档碎片：document.createDocumentFragment() ,所有的操作是在内存中进行的 为了避免重绘和回流：咱们插入dom时可采用createDocumentFragment，最后一次性的再添加到页面的dom中 //先创建li，然后插入到ul中 var oul=document.q
2020-06-04 20:58:27
200
原创 http 请求包含哪几个部分（请求行、请求头、请求体）
http 请求包含哪几个部分（请求行、请求头、请求体）http协议报文1.请求报文(请求行/请求头/请求数据/空行)请求行求方法字段、URL字段和HTTP协议版本例如：GET /index.html HTTP/1.1get方法将数据拼接在url后面，传递参数受限请求方法：GET、POST、HEAD、PUT、DELETE、OPTIONS、TRACE、CONNECT请求头(key value形式)User-Agent：产生请求的浏览器类型。Accept：客户端可识别的内容类型列表。Hos
2020-06-03 23:28:03
19802
原创 call，apply，bind
call，apply，bindcall，apply，bind这三个主要作用都是改变this指向的，但是使用的时候会有区别。 var msg = 'hello' var obj = { msg : 'vue.js' } function fn () { // 当前this指向的是全局window return this.msg } var res = fn() console.log(res) //输出结果为hello 1、通过call来改变
2020-06-02 20:44:45
120
原创 vue封装搜索组件
vue封装搜索组件1、引入搜索组件<Serach v-on:inputValue="inputValue" />2、引入搜索组件路径import Serach from './Search'3、事件处理代码export default { components: { Serach }, methods: { inputValue (inpVal) { console.log(inpVal) } }}搜索框组件代码<
2020-06-01 23:20:58
973
原创 select下拉框组件
select下拉框组件1、在父组件引入select组件<selec :sele="sele" :isSeleDiv="isSeleDiv" v-on:isBool="isBool" />2、在父组件引入select组件路径import selec from './Select'3、事件处理代码export default { components: { selec }, data () { return { // option中的数据
2020-05-31 21:52:00
1497
原创 Toast 轻提示代码封装
Toast 轻提示1、Toast vue代码<template> <div class="toast" v-on:click="onToast"> <!-- 文字提示 --> <div class="toast_text"> <p>{{text}}</p> </div> </div></template>
2020-05-30 23:18:06
444
1
原创 vue路由
vue路由前端路由和后端路由：后端路由：对于普通的网站，所有的超链接都是url地址，所有url都对应服务器上对应的资源前端路由：对于单页面应用程序来说，主要通过url的hash（#）来实现不同页面的切换，同时hash还有一个特点HTTP请求中不会包含hash相关的内容，所以单页面程序中的页面跳转主要用hash实现在单页面应用程序中这种通过hash来改变页面的方式称作前端路由区别于后端路由路由传参1、如果使用查询字符串 给路由传递参数则不需要修改路由规则的path属性<router-l
2020-05-29 22:20:49
120
原创 vue封装弹框组件
vue封装弹框组件1、引入弹框组件<Popout v-show="isPrpout" v-on:confirm="onConfirm" v-on:cancel="onCancel" />2、点击显示弹框<button @click="onClick">点击</button>3、在组建内使用import Popout from './Popout'export default { components: { Popout }, data
2020-05-28 20:43:24
2072
原创 vue常用的修饰符
vue常用的修饰符<!-- 阻止单击事件冒泡 --><a @click.stop="handle"></a><!-- 提交事件不再重载页面 --><form @submit.prevent="handle"></form><!-- 只有修饰符 --><form @submit.prevent></form><!-- 修饰符可以串联 --><a @click.st
2020-05-27 22:10:17
327
原创 正则表达式
正则表达式元字符重复常用的限定符字符转义如果你想查找元字符本身的话，比如你查找 . ,或者*,就出现了问题：你没办法指定它们，因为它们会被解释成别的意思。这时你就得使用\来取消这些字符的特殊意义。因此，你应该使用.和*。当然，要查找\本身，你也得用 \\.符号： | （也就是或 ）常见的正则表达式@ cc...
2020-05-26 20:44:50
132
原创 css3新增的属性有哪些
css3新增的属性有哪些1.CSS3边框：border-radius：CSS3圆角边框。在 CSS2 中添加圆角矩形需要技巧，我们必须为每个圆角使用不同的图片，在 CSS3 中，创建圆角是非常容易的，在 CSS3 中，border-radius 属性用于创建圆角。border：2px solid;box-shadow：CSS3边框阴影。在 CSS3 中，box-shadow 用于向方框添加阴影。box-shadow:10px 10px 5px #888888;border-image：C
2020-05-25 23:49:46
326
原创 vue路由
vue路由后端路由：对于普通的网站，所有的超链接都是url地址，所有url都对应服务器上对应的资源前端路由：对于单页面应用程序来说，主要通过url的hash（#）来实现不同页面的切换，同时hash还有一个特点HTTP请求中不会包含hash相关的内容，所以单页面程序中的页面跳转主要用hash实现在单页面应用程序中这种通过hash来改变页面的方式称作前端路由区别于后端路由路由的使用1、创建一个路由对象，当导入vue-router包之后，在window全局对象中就有一个路由的构造函数VueRoute
2020-05-24 22:24:07
123
原创 Vue路由详细讲解指南
Vue路由详细讲解Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转；首先我们来学习三个单词（route，routes，router）：route：首先它是个单数，译为路由，即我们可以理解为单个路由或者某一个路由；routes：它是个复数，表示多个的集合才能为复数；即我们可以理解为多个路由的集合，JS中表示多种不同状态的集合的形式只有数
2020-05-23 23:33:39
196
原创 将overflow：scroll的滑动条隐藏
将overflow：scroll的滑动条隐藏.box {width: 100%;height: 71%;overflow: scroll;margin-top: 0.3rem;}.box::-webkit-scrollbar {display: none}@ cc
2020-05-22 23:13:33
1833
原创 vue，vuex，组件通讯，核心概念
vuex 是什么？vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。1、vuex的核心概念state：vuex管理的状态对象，它应该是唯一的mutations：包含多个直接更新state的方法(回调函数)的对象，谁来触发: ac
2020-05-21 20:22:51
179
原创 HTML5之SVG的使用
HTML5之SVG的使用一、什么是SVG？SVG 指可伸缩矢量图形 (Scalable Vector Graphics)；SVG 用于定义用于网络的基于矢量的图形；SVG 使用 XML 格式定义图形；SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失；SVG 是万维网联盟的标准；二、SVG的优点SVG 可被非常多的工具读取和修改（比如记事本）SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。SVG 是可伸缩的SVG 图像可在任何的分辨率下被高质量地打印SV
2020-05-20 22:50:53
577
原创 axios的使用
axios的使用$ npm i axios//main.js//全局使用 axiosimport Vue from 'vue';import axios from 'axios';Vue.prototype.$axios = axios;//template.vue//局部引入axiosimport axios from 'axios';//this.axios使用所有方法别名别名 说明axios.request(config) 创建请求axios.get(url[,co
2020-05-19 22:09:42
110
原创 vue安装及配置
vue安装及配置首先下载node.js要求版本在8.9以上官网：https://nodejs.org/zh-cn/下载完可检查在windows任务命令行里输入node -v使用淘宝NPM镜像源下载比较快命令：npm install -g cnpm --registry=https://registry.npm.taobao.org安装vue-cli（全局安装vue-cli）命令：cnpm install vue-cli -g检查环境是否安装上：vue -V创建vue项目：在命令行里输入命
2020-05-18 20:42:00
366
原创 webpack搭建
1、创建文件夹，文件夹的名字不能为[webpack],否则会报错2、进入文件夹目录，在该目录下创建package.json文件npm init -y //要输入的命令执行完命令后，在webpackvue目录下会生成一个package.json文件3、安装webpack相关的类包npm install webpack webpack-cli --save-dev上面命令可简写为：npm i webpack webpack-cli -D说明：install === i --save-de
2020-05-17 21:06:55
218
原创 promise
promise1、promise是什么？主要用于异步计算可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果可以在对象之间传递和操作promise，帮助我们处理队列promise是一个对象，对象和函数的区别就是对象可以保存状态，函数不可以（闭包除外）并未剥夺函数return的能力，因此无需层层传递callback，进行回调获取数据代码风格，容易理解，便于维护多个异步等待合并便于解决2、promise有三个状态：pending[待定]初始状态fulfilled[实现]操作成
2020-05-16 22:38:00
78
原创 TypeScript
TypeScriptTypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准。TypeScript 由微软开发的自由和开源的编程语言。TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。1、NPM 安装 TypeScriptnpm install -g typescript2、安装完成后查看版本号：$ tsc -vVersion 3.2.23
2020-05-15 23:03:51
134
原创 class类、原型链
class类ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。prototype对象的constructor属性，直接指向“类”的本身，这与 ES5 的行为是一致的。- 原型链继承: 子类.prototype=new 父类() 总结： * 优点：可以方便继承父类的方法 * 缺点：不能传参- 借用构造函数继承 function 子类(参数1,参数2,...
2020-05-14 22:29:53
250
原创 智慧物流观后感
智慧物流观后感今天晚上组织看来央视的智慧物流栏目，看完整体的感觉呢，就是现在这个高科技飞速发展的社会，你们利用人工智能，大数据等运用到物流上，来代替人工操作，不仅加快了速度，还可以提高了质量，出错的机率也变的非常小。记者在智慧物流仓库的体验中，发现诸多大数据的具体应用。比如利用大数据对商品分仓，订单条码，算法切箱，快递员数字分区域和规划路径。通过大量的数据模拟配送行为，和数百亿的历史地址库，就可以为包裹做出最优路线预测。新年临近，电商又迎来了一年一度的年货节，面对网购高峰的到来，压力最大的要数物流。从
2020-05-13 23:00:49
10804
原创 async 函数
async 函数1、含义ES2017 标准引入了 async 函数，使得异步操作变得更加方便。async 函数就是 Generator 函数的语法糖。2、基本用法async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。3、语法async函数的语法规则总体上比较简单，难点是错误处理机制。async函数返回一个 Promise 对象。函数内部return语句返回的值，会成为th
2020-05-13 22:29:37
129
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人