cc果冻LXY-优快云博客

原创 vue移动端微信授权登录插件封装

新建wechatAuth.js文件const qs = require('qs')//应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且，即使在未关注的情况下，只要用户授权，也能获取其信息）const SCOPES = ['snsapi_base',...

2019-08-13 17:17:06 1473

原创 vuex的简单使用

要在main.js里引入store文件夹里的index.jshome.vue<template> <div class="home"> <button @click="clickHandle()">加购物车</button> <foot></foot> </div></...

2019-08-05 17:08:00 206

原创对时间的封装

var data = new Date() var year = data.getFullYear(); var month = data.getMonth() + 1; var weekday = data.getDate(); var h = data.getHours() + ':'; var m = data.getMinutes() + ':';...

2019-08-05 09:08:09 198

原创 keep-alive

在路由切换到其他component再返回后该组件数据会重新加载， keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染路由里面配置export default [ { path: '/', name: 'home', component: Home, meta: { keepAlive: true ...

2019-08-05 09:07:02 140

原创 good-storage

安装 npm install good-storage 用法 import storage from 'good-storage' // localStorage storage.set(key,val) storage.get(key, def) // sessionStorage storage.session.set(key, val) storage.sess...

2019-08-05 09:04:12 337

原创 js-cookie的用法

安装：npm install js-cookie引用import Cookies from 'js-cookie'一般使用1、存到Cookie去//有效的cookieCookies.set('name', 'value');// 七天后过期的cookieCookies.set('name', 'value', { expires: 7 });// 过期的cooki...

2019-08-05 09:00:41 866

原创 vue移动端微信授权登录插件封装

const qs = require('qs')//应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且，即使在未关注的情况下，只要用户授权，也能获取其信息）const SCOPES = ['snsapi_base', 'snsapi_userin...

2019-08-05 08:55:57 1100

原创 react-redux实现点击添加购物车，显示购物车总数量

在列表中点击按钮添加购物车，显示购物车数量总数，不管多少个按钮，将按钮dispath里面的type设置成一样的就可以了list列表app.jsstore文件夹里的index.jsstore文件夹里的reducers里的count.js...

2019-07-31 10:37:32 1835

转载在vue中如何使用layui

根据官网的文档，要在一个html文件下使用layui里面的组件库其实很简单，但是在vue项目中使用该ui库却存在着很多坑，下面我们就详细讲解一下如何在vue-cli搭建的项目下使用layui1.第一个坑：vue项目中使用npm安装引入时报错（目前并没有找到引入的合适的方式，知道的可以留言探讨）在官网中我们可以看到他提到支持npm安装，但是当我们安装成功后，在main.js中引入时却报并不能...

2019-07-23 11:45:25 718

原创 react 和vue相比

1、vue是使用单文件组件的方式把所有的组件相关内容在一个文件中进行编写.2、vue文件使用webpack中的vue-loader实现加载.3、react使用jsx语法实现组件的编写，vue是用html模板.4、vue使用数据双向绑定，使用Object.defininePrototype监听对象的setter和getter方法实现相应式的数据更新.5、react使用单向数据流机制实...

2019-07-23 10:30:02 159

原创 react的生命周期

initalization组件初始化调用一个方法：constrctorMounting：组件的挂载阶段componentWillMount组件将要挂载→render（渲染，render方法里是页面上展示的内容）→componentDidMount组件挂在完成（axios请求数据在这里）Updation更新阶段（props和state）props会执行...

2019-07-19 15:24:44 146

原创小程序手记

小程序的生命周期App({ onLaunch (options) { //小程序初始化完成时触发，全局只触发一次。 }, onShow (options) { //小程序启动，或从后台进入前台显示时触发。 }, onHide () { // 小程序从前台进入后台时触发 }, onError (msg) { console.log(ms...

2019-07-04 12:14:07 147

原创 react的坑

在用NavLink或者Link跳转的时候，例如：你在home页，再点击home这个标签的时候会报出一个错但此时项目是可以运行的，而且这个报错信息仅仅在开发环境有，在生产环境是没有的，所以说此问题不会影响系统的正常使用，但如果你是一名“代码洁癖症”患者的话呢，我们可以做一下处理，把它关掉。处理过程：在配置路由的时候，在后面加replace <ul> ...

2019-06-26 17:42:26 164

转载 Nuxt.js

什么是Nuxt.jsNuxt.js 是一个基于 Vue.js 的通用应用框架。通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的UI渲染。Nuxt.js 集成了以下组件/框架，用于开发完整而强大的 Web 应用：Vue 2 Vue-Router Vuex(当配置了Vuex 状态树配置项时才会引入) Vue 服务器端渲染 Vue-Met...

2019-06-25 09:17:24 374

原创 React的高阶组件

高阶组件：组件被当做参数传递到另一个组件中进行使用，返回一个新组件。自定义一个组件，把登陆判断做一个封装在引入组件的地方，把自定义组件引入import NeedLogin from './components/NeedLogin'需要登陆判断的route组件采用自定义组件<Content> <Route exact path='/' component={H...

2019-06-20 20:37:41 139

转载 React的路由传参

1.params<Route path='/path/:name' component={Path}/><link to="/path/2">xxx</Link>this.props.history.push({pathname:"/path/" + name});读取参数用:this.props.match.params.name优势：刷...

2019-06-20 17:34:51 130

原创 react组件传值

父组件给子组件传值用props子组件給父组件传值用方法调用import React, { Component } from 'react'//子组件class Counter extends Component { constructor(props) { super(props); this.state = { count: 1 } }...

2019-06-17 22:27:22 127

原创自我总结

对于音乐类的项目从来没有涉及过，自己想挑战下，所以写了一个简易的音乐接口用的是网易云的api，这个项目的重点在视频和搜索搜索：关键词搜索可以进行匹配，当输入框为空的时候，匹配的内容为空，点击歌手进行匹配，点击任何，只要有链接，都可以唱的。视频：使用controls属性才会播放，video的poster属性是用户点击播放按钮前显示的图像；我在video外面有个div，点击...

2019-06-15 10:36:05 143

原创 vue自定义组件及嵌套

组件在components里进行注册template里是模板内容定义的组件必须只有一个根节点自定义事件要用$emit派发，所有使用组件的父组件可以进行事件监听<div id="app"> <btn txt="按钮" type="btns"></btn> <btn txt="点击"></btn> &l...

2019-06-10 22:03:35 2096

原创 vue组件间的传值

子组件向父组件传值，使用属性props <div id="app"> <msg txt="我是txt"></msg> </div> <script src="./libs/vue.js"></script> <script> const txt ={ template...

2019-05-30 15:22:07 122

原创 vue的路由

什么是路由路由是根据不同的 url 地址展示不同的内容或页面应用场景单页面应用页面router和route的区别route就是一条路由，它将一个URL路径和一个函数进行映射，/users -> getAllUsers()/users/count -> getUsersCount()这就是两条路由，当访问/users的时候，会执行getAllUsers()...

2019-04-02 21:30:00 137

转载 vue的生命周期，钩子函数和组件传值

所有的生命周期钩子自动绑定this上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法，这是因为箭头函数绑定了父上下文，因此this与你期待的 Vue 实例不同。生命周期beforeCreate created beforeMount mounted beforeUpdate updated activate...

2019-03-21 14:14:31 431

原创浅谈js跨域

一、什么是跨域？跨域是指从一个域名的网页去请求另一个域名的资源。跨域的严格一点的定义是：只要协议，域名，端口有任何一个的不同，就被当作是跨域。域名，协议，端口均相同的为同源。二、为什么会造成跨域原因就是安全问题：如果一个网页可以随意地访问另外一个网站的资源，那么就有可能在客户完全不知情的情况下出现安全问题。三、既然有安全问题，为什么还要跨域跨域是不可避免的，例如...

2019-03-19 21:17:09 224

原创浅谈Object.defineProperty（）

为JavaScript对象新增或者修改属性，有两种不同方式：直接使用=赋值或者使用Object.defineProperty 定义。经常使用的定义与赋值方法obj.prop =value或者obj['prop']=valuelet person ={};person.name = 'Anny';person['age'] = 24;console.log(person.name...

2019-03-18 20:40:18 254

转载移动端开发需要注意的事项

最基本的是布局和适配一般布局都会用flex布局适配用单位rem1、防止手机中网页放大和缩小，这点是最基本的，在设置meta中的viewport使用viewport使页面禁止缩放。通常把user-scalable设置为0来关闭用户对页面视图缩放的行为。<meta name="viewport" content="width=device-width, initial-sc...

2019-03-16 19:00:49 708

原创 express脚手架创建

一、先全局安装express npm i express -g二、新建一个文件work用npm init初始化文件会生成一个package.json文件三、安装express本地依赖接下来安装Express并将其保存到依赖列表中：npm i express --save（如果只是临时安装Express，不想将它添加到依赖列表中，只需略去–save即可）...

2019-03-15 20:46:32 865

转载理解RESTful风格的API

网络应用程序，分为前端和后端两个部分。当前的发展趋势，就是前端设备层出不穷（手机、平板、桌面电脑、其他专用设备......）。因此，必须有一种统一的机制，方便不同的前端设备与后端进行通信。RESTful是目前比较成熟的一套互联网应用程序的API设计理论。RESTful架构风格特点1、资源所谓"资源"，就是网络上的一个实体，或者说是网络上的一个具体信息。它可以是一段文本、一张图片、一...

2019-03-13 22:22:07 300

转载 http请求

HTTP全称是HyperText Transfer Protocal，即超文本传输协议；是因特网上应用最为广泛的一种网络传输协议，所有的WWW文件都必须遵守这个标准。HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）。HTTP报文结构请求报文HTTP请求报文由请求行、请求头、空行和请求内容4个部分构成。请求行由请求方法字...

2019-03-12 22:25:41 424

原创浏览器兼容性问题

浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。在网站的设计和制作中，做好浏览器兼容，才能够让网站在不同的浏览器下都正常显示。浏览器兼容的重要性：网站做好了浏览器兼容，能够让网站在不同的浏览器下都正常显示浏览器兼容能够抓住更多的网站访客浏览器兼容能够给客户更好的体验产生的原因：因为不同浏览器使用内核及...

2019-03-11 21:56:22 214

原创 web页面的性能优化以及seo

为什么要性能优化？1、加快页面的展示速度（提高用户的体验性）2、节约服务器宽带流量3、减少服务器压力web页面的性能优化　一、页面级优化1. 减少 HTTP请求数每个请求都是有成本的，既包含时间成本也包含资源成本。时间成本就是用户需要看到或者 “感受” 到这个资源是必须要等待这个过程结束的，资源上由于每个请求都需要携带数据，因此每个请求都需要占用带宽。另外，由于浏览器进...

2019-03-09 10:12:20 301

DOM事件存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。事件捕获：通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。事件冒泡：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点**dom标准事件流的触发的先后顺序为：**先捕获再冒泡，即当...

2019-03-08 08:44:04 9340

原创 post和get 区别

post 和 get的区别HTTP定义了与服务器交互的不同方法，其中最基本的四种：GET， POST，PUT，DELETE浏览器中输入网址访问资源一般都是通过GET方式在form提交中，可以通过method指定提交方式为GET或者POSTGET和POST发送机制不同GET - 从指定的资源请求数据。POST - 向指定的资源提交要被处理的数据。GET一般用于获取/查询资源信息，而PO...

2019-03-05 21:47:44 196

原创 jQuery 三级联动

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>三级联动</title> <style text/css> *{margin: 0;padding: 0;} select

2019-02-18 15:46:32 162

原创 jQuery写下拉菜单

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>下拉菜单</title> <style text/css> *{padding: 0;margin: 0;} li{list-style:

2019-02-18 09:16:13 239

原创 jQuery实现的树形动画

要引入jquery库才可以实现<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <style type="text/css"&am

2019-02-16 11:38:31 695

原创 jquery实现选项卡的例子

一定要先引入jQuery的文库不然效果实现不了<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery-1.11.0.js&quot

2019-02-16 11:31:44 172

原创用函数写九九乘法口诀表

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css" > #box{background:red

2019-02-12 22:04:43 583

原创鼠标拖拽

控制div的边界<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ positio

2019-02-12 21:52:26 157

原创 prototype 和 proto 和 constructor 原型链

一、prototype和__proto__的概念prototype是函数的一个属性（每个函数都有一个prototype属性），这个属性是一个指针，指向一个对象。它是显示修改对象的原型的属性。__proto__是一个对象拥有的内置属性（请注意：prototype是函数的内置属性，__proto__是对象的内置属性），是JS内部使用寻找原型链的属性。二、prototype和__proto_...

2019-02-12 21:20:20 158

原创面向对象

面向对象和面向过程面向对象中出现了类的概念，通过类可以创建相同属性和方法的对象面向对象的三个特点 1、封装把数据和对数据的操作集中在一起 2、继承一般是针对类（父类，子类），一个类型的对象可以访问另外一个类型的属性和方法 3、多态同一种方法（sound()）针对于不同对...

2019-02-12 20:59:54 115

react-redux.zip

myvuex.zip

空空如也