此鱼非闲鱼也-CSDN博客

原创原生js实现倒计时

倒计时的实现倒计时是web开发中常见的组件，请完成second和render两个函数，完成倒计时的显示部分1、 second函数的输入为整数，返回 { day: Int, hour: Int, min: Int, second: Int }2、 render函数的输入为second函数的输出，将数据在页面对应的DOM元素上显示出来，格式如html所示3、如果day为0，隐藏对应的DOM元素，否则显示（请直接使用已经实现的css代码）4、数值不足两位，前面补充0<!DO

2021-07-30 23:20:29 311

原创 vue三种路由传参方式：路由属性push方法、params、query

vue路由传参的三种方式：场景：点击当前页的某个按钮跳转到另一个页面，并将某个值带过去<div class=“item” @click=“getDetail(3)”>查看详情1、直接使用路由属性配置this.$router.push实现携带参数跳转 methods:{ getDetail(id){ this.$router.push({path:`/user/${id}/`}) } }对应的路由配置(每个路由配置信

2020-08-14 09:37:03 6084 1

原创 Redux - javaScript状态管理器在React中的运用

Redux官方链接https://www.redux.org.cn/Redux 是一个独立的JavaScript 状态管理库，不属于React内容。Redux 本身是 MVVM渐进式框架 M(数据模型) - V(视图) - VM(虚拟模型)定义：官方定义，是 JavaScript 状态容器，提供可预测化的状态管理。作用及特点：可以构建一致化的应用，运行于不同的环境（客户端、服务器、原生应用），易于测试提供超爽的开发体验，比如有一个时间旅行调试器可以编辑后实时预览。除了与React一

2020-07-20 18:01:37 259

原创 React路由 - 路由参数、withRouter组件、Router hooks、路由组件传参、Switch组件、Redirect重定向组件、动态路由

说动态路由之前，先看看路由参数都有哪些？1、路由参数1-1、history 历史记录及路由给我们的一些操作路由是根据历史记录跳转视图history对象中提供了很多方法，便于用户再浏览历史记录中跳转。go() 方法可以回到历史记录中的某一页面，通过与当前页面相对位置来标志。当前页面的相对位置标志为0。go()方法中，传入一个参数，这个参数是一个整数，即在 history 记录中向前或者后退多少步。history.goBack()方法可以回到历史记录中的上一个 URL。调用该方法的效果等价

2020-07-15 19:19:34 4648

原创 React路由-react-router-dom安装与使用(一)

路由当应用变得复杂的时候，就需要分块的进行处理和展示。传统方式的处理:把整个应用分成了多个页面，然后通过 URL 进行连接。传统方式的弊端:每次切换页面都需要重新发送所有请求和渲染整个页面，性能上会有影响；会导致整个 JavaScript 重新执行，丢失状态。单页面应用单页面应用SPA(Single Page Application): 整个应用只加载一个页面（入口页面），后续在与用户的交互过程中，通过 DOM 操作在这个单页上动态生成结构和内容。**单页面应用优缺点**如下：

2020-07-14 21:47:40 4512 2

原创 React函数式组件-自定义hooks

React hooks中除了常用的useState、useEffect、useRef。我们还可以自定义hooks，可以达到不增加组件而实现组件之间的一些复用的目的。

2020-07-13 23:21:00 1424

原创 React函数式组件 -函数式组件传值、常用hook的使用(useState、seEffect、useRef)

函数式组件顾明思义，函数就是组件，组件就是一个函数。函数式组件长啥呢？没错，就是如下面这样的function App(){ return ( <div>hello,nice to meet you</div> );}1、看看函数式组件有哪些特点？组件的第一个参数是props，它是不可改变的，函数不能更改输入参数(接收父级传来的信息)组件中return必须写(定义该组件要渲染的内容)生命周期，无this，无state单向数据流(数据必须从

2020-07-09 23:14:14 19871

原创 React使用 - 常用生命周期函数、受控组件与非受控组件

React生命周期生命周期: 就是指某个事物从开始到结束的各个阶段。React生命周期：在 React.js 中指的是组件从创建到销毁的过程，React.js 在这个过程中的不同阶段调用的函数。作用：通过这些函数，我们可以更加精确的对组件进行控制。前面我们一直在使用的 render 函数其实就是组件生命周期渲染阶段执行的函数注意：React生命周期的新旧方法之间，不可以同时存在。否则报错生命周期函数详解挂载阶段constructor(props)类的构造函数，也是组件初始化函数，一般情况下

2020-07-03 19:25:00 346

原创 React使用 - 组件通信

1、补充state与setStatestate是组件自身的状态setState(updater, [callback])updater: 更新数据 FUNCTION/OBJECTcallback: 更新成功后的回调 FUNCTION浅合并 Object.assign()数据需要修改，同时页面又要响应变化，使用 setState()方法来更新数据import React, { Component } from 'react';export default class App extends

2020-07-02 22:51:02 140

原创 React基本使用 - props与state、React事件

1、props父组件传过来的参数可以使用组件类的defaultProps属性，设置默认的props值// Actor.jsimport React,{Component} from 'react';export default class Actor extends Component{ render(){ return ( <div> hi, {this.props.name} - {this.props

2020-07-01 21:29:28 329

原创 React基本使用-类式组件

React组件的使用React组件分类函数式组件类式组件React自定义组件命名原生 html元素名称以小写字母开头，符合驼峰命名法规范，比如hello、myComponent。自定义的 React 类名以大写字母开头，比如 HelloWorld不能写成 helloWorld。React组件类只能包含一个顶层标签。React类式组件使用的必要条件组件类必须继承React.Component类必须要有render方法；render方法的return返回的就是组件的内容类式组

2020-06-30 18:46:19 2004

原创 React的基本使用-JSX、创建视图、插值、条件输出、列表循环、属性表达式

React基本使用React是用于构建用户界面的 JavaScript 库。React的特点：以声明式编写 UI，可以让你的代码更加可靠，并且更方便调试。组件逻辑使用 JavaScript 编写而不是模版，可以轻松地在应用中传递数据，而且使状态与 DOM 分离。还可以使用 Node 进行服务器渲染，或者使用 React Native 开发原生移动应用。ReactDOMReactDOM 提供了与浏览器交互的 DOM 功能，比如：dom 渲染ReactDOM.render(element,

2020-06-29 20:33:23 751

原创微信小程序 - 无法获取云端数据库中的数据的问题（修改云端数据库权限）

小程序中从云端数据库获取数据时，没有数据获取云端数据库中的数据小程序控制台没有数据输出

2020-06-24 21:47:03 2174 3

原创微信小程序开发 - 导入数据到云端数据库

数据库导入云开发支持从文件导入已有的数据。两种导入的数据格式： CSV、JSON 格式。// JSON格式{"id": 1,"name": "tom","age": 18}{"id": 2,"name": "lucy","age": 20}// CSV格式{id,name,age1,tom,182,lucy,20}两种导入方式：有云开发控制台和HTTP API。两种导入冲突处理方式：Insert、UpsertInsert 模式：会在导入时总是插入新记录，

2020-06-24 21:21:14 3832

原创 mpvue小程序框架-地图定位(二)

使用腾讯地图定位需要使用微信公众平台permission接口首先要在小程序项目下的主配置文件app.json中声明permission，不然使用接口方法时，提示窗口如下：app.json配置文件中声明permission "pages":["pages/home/main"], "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" } }, "window":

2020-06-17 22:05:25 705

原创微信小程序开发-使用axios访问网站数据、mpvue（一）

微信小程序，通过云函数去访问凤凰网上的新闻数据云函数入口文件：cloudfunctions目录下的dataOpera.jsconst cloud = require('wx-server-sdk');cloud.init();// 使用npm去安装axios与cheerioconst axios = require("axios");const cheerio = require("cheerio"); // 云函数入口函数exports.main = async (event, co

2020-06-16 23:03:40 3110

原创微信小程序云开发学习指南（一）

云开发开发者可以使用云开发开发微信小程序、小游戏，无需搭建服务器，即可使用云端能力。云开发为开发者提供完整的原生云端支持和微信服务支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。云开发提供的支持|云函数| 无需自建服务器 |在云端运行的代码，微信私有协议天然鉴权，开发者只需编写自己的业务逻辑即可||数据库|无需自建数据库|一个既可在小程序前端操作，也能在云函数中读写的 JSON

2020-06-15 20:40:53 1005 1

原创微信小程序开发- 缓存用户登录信息，连接websocket做小游戏（四）

每次玩完，都需要更新分数服务器端：有连接的用户，更新分数1.搭建静态页面2.请求对应的数据3.将数据呈现到页面中缓存用户登录信息登录前先做一下判断，看是否有缓存用户信息。每次打开页面时，有登录信息就直接进入，不需要再次去登录，如果没有缓存的登录信息再进行登录wx.login({ wx.setStorageSync({ // 这里传的是字符串，需要将对象转化字符串 "userInfo",JSON.stringify(userInfo) });});//

2020-06-10 22:25:33 813

原创微信小程序开发- 自定义组件、插槽、websocket（三）

1、小程序组件化编程从小程序基础库版本 1.6.3 开始，小程序支持简洁的组件化编程。开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。2、创建自定义组件自定义组件的构成：一个自定义组件由 .json 、.wxml 、.wxss和 .js 四个文件组成。编写组件需要做哪些工作？在编写自定义组件前，需要在 json文件中进行声明（ component:true 就可以将

2020-06-09 22:59:11 820

原创微信小程序开发-自定义组件、数据获取方式、视图渲染(二)

data-*嵌入自定义数据使用 data-* 属性来嵌入自定义数据。也就是说这个data-*是可以用来存储数据的，data-的后面跟着自定义的变量名，比如data-name、data-pwd等等，后面再赋值，这个值就会被存储起来。获取数据时通过js来实现。  <button data-id="3" catch:tap="fn">点击触发事件 </button> {{message}}

2020-06-08 22:18:20 1033

原创微信小程序开发-第一个小程序（一）

1、啥是小程序？小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验它需要所有的开发者都能做到：快速的加载更强大的能力原生的体验易用且安全的微信数据开放高效和简单的开发2、开发环境小程序的主要开发语言是 JavaScrip开发网页时，只需要使用到浏览器，搭配编译器或一些辅助工具即可。小程序开发，需要申请小程序帐号、登陆微信公众平台、安装小程序开发者工具、配置项目等过程才能完成。3、新建小程序3-1 扫码进入开发者工具已注册登陆开发

2020-06-07 21:36:18 1021

原创 git版本控制工具使用指南

1、先看一看版本控制是啥？是干嘛的？版本控制是指对软件开发过程中各种程序代码、说明文档等文件的变更进行管理。追踪文件的变化，文件的变更时间、变更内容、甚至变更执行人进行记录同时对每一个阶段性变更（不仅仅只是一个文件的变化）添加版本编号，方便将来进行查阅特定阶段的变更信息回滚以前的版本1-1、人工版本控制器通过人工的复制行为来保存项目的不同阶段的内容，添加适当的一些描述文字加以区分繁琐、容易出错产生大量重复（冗余）数据1-2版本控制工具通过程序完成上述人工版本控制行为方便且功能

2020-06-03 20:37:13 200

原创 webpack中loader的使用

webpack中的loader的使用1、什么是loader？loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader可以做哪些工作？可以将文件从不同的语言（如 TypeScript）转换为 JavaScript将内联图像转换为 data URL允许你直接在 JavaScript 模块中 import CSS文件2、loader

2020-05-30 22:27:43 881

原创 webpack打包工具使用

1、webpack是何方神圣？webpack是一个现代的javascript应用程序的静态模块打包器。当它处理程序时，它会递归地构建一个依赖关系图，其中包含应用程序的每个模块，然后将所有模块打包成一个或多个bundle。webpack是基于nodejs实现的，所以使用它前需要先搭建node.js环境。2、安装npm install -D webpack webpack-cli注意：不推荐全局安装webpack：webpack代码，webpack-cli：提供webpack命令、工具我们可以t

2020-05-28 22:15:48 389

原创模块化的规范及规范兼容问题

模块化详细总结ECMAScript2015以后，原生js推出了模块化概念，称为ECMAScript Module,简称ESM。现在主流浏览器都有很好的支持模块化的作用把复杂的问题分解成相对独立的模块，这样的设计可以降低程序复杂性，提高代码的重用，有利于团队协作开发与后期的维护和扩展模块化的核心模块独立的作用域如何导出模块内部数据如何导入外部模块数据独立模块作用域一个文件就是模块，拥有独立的作用域，且导出的模块默认是处于严格模式下,之前的文章有总结，小手点一点去看看严格模式

2020-05-27 20:49:47 633

原创 vuex工作原理与流程

vuex工作原理与流程Vue组件（action里面的dispatch )--> actions(commit方法） -->mutations（Mutate）--> state（getter） -->store更新所有调用vuex的组件（Vue Component组件）1、state存储应用状态数据的对象，与vue组件中data类似state的值可以是对象，也可以是返回对象的函数通过store.state访问状态数据示例如下：import Vue from 'vue'i

2020-05-21 22:44:08 4110 1

原创在vue中如何使用axios发送请求

axios是一个基于promise的http库，可以发送get，post请求（axios对ajax的封装），正由于Vue，React的出现，促使了axios轻量级库的出现直接使用会报错，需要下载axios，下载安装命令npm install --save axios使用axios在vue中发送ajax请求get方式 // 访问github的search接口 let url = `https://api.github.com/search/repositories?q=${t

2020-05-08 22:55:00 1038

原创 vue动态组件（组件切换操作）

vue动态组件有时，我们需要在多个不同的组件之间进行切换操作。组件的切换方式(1)使用v-if使用v-if 来处理，适用频繁操作的场景。会不断地创建组件和销毁组件,影响性能;不会保留组件改变后的状态及修改后的数据 <InBox v-if="currentCom==='InBox'"></InBox> <PostMail v-if="curren...

2020-05-08 11:07:52 2318

原创 vue组件生命周期、ref属性、nextTick

1、组件生命周期：组件从创建到销毁的过程。在这个过程中的不同阶段，vue会调用指定的组件方法基本生命周期函数的四个阶段：每一个阶段都对应着之前和之后两个函数，之前的函数使用较少，之后的函数使用较多一些（1）创建阶段–>beforeCreate()、created()（2）挂载阶段–>beforeMount()、mounted()（3）更新阶段–>bef...

2020-05-06 22:24:51 434

原创 vue非prop特性及props验证

1、非prop特性非 prop 特性：是指向一个组件传属性，但是该组件并没有相应 prop 来定义，这些 props 会被自动添加到组件的根元素（template模板中，包裹元素的最外层元素）上。2、替换/合并已有的特性默认情况下，非prop 特性的属性会覆盖组件根元素上同名的内容，但是针对 style 和 class 有特殊的处理，它们会合并（同名样式还是会覆盖）替换/合并已有的特性 ...

2020-04-29 20:36:03 695

原创 vue中.sync修饰符与vue插槽

sync修饰符vue组件之间数据传递，组件之间的通信方式：单向绑定父组件通过 props 传入数据到子组件内部，但是子组件内部不要修改外部传入的 props，vue提供了一种事件机制通知父级更新，父级中使用子组件时，监听对应的事件绑定处理函数即可虽然不推荐在组件内部修改 props ，但有时需要组件内部状态变化时去改变 props ，我们可以通过子组件触发事件，父级监听事件来达到这个目...

2020-04-28 22:44:47 1495

原创 vue组件传参（父传子、子传父、利用组件传参实现分页显示数据）

vue组件传参1、父传子父：自定义属性名 + 数据（要传递）=> :value="数据" 子：props ["父组件上的自定义属性名"] =>进行数据接收父级调用子组件，通过子组件的属性传入数据子元素内部通过props配置(数组)，来接受对应的数据，如props:['属性1','属性2',...]在可复用的组件中，最上层只能有一个...

2020-04-28 19:11:23 935

原创 vue全局过滤器与局部过滤器的使用

vue中的过滤器定义：对内容或数据进行过滤(二次处理)的一种方式写法：Vue.filter("过滤器名称",过滤方式);使用：过滤器类似于管道流种类：局部过滤器和全局过滤器1、全局过滤器（1）定义无参全局过滤器 <div id="app"> <p>{{ message | replaceStr}}</p> </di...

2020-04-25 22:43:19 2001 2

原创 vue中computed与watch的使用

1、事件函数vue中使用事件指令定义事件，@事件名="执行事件的函数";或者@事件名="执行事件的函数(参数)";在vue实例中事件函数是写在methods中的，如methods:{ 事件函数名(参数){ //函数体 }}注意：methods是与el和data同级的属性。看看示例：页面一开始打开先显示原始数据，三个按钮"全部"或"男"或"女"按钮后，筛选对应的数据显示到页面。 <...

2020-04-25 21:26:36 260

原创 vue组件(全局注册、局部注册)

vue组件使用1、认识组件(1) 创建组件的写法写法： Vue.component("组件名",{ //xx }); //这里是全局注册组件的写法Vue.component()函数的第一个参数就是组件名，比如Vue.component(“my-comname”,{ //xx}}); 那么my-comname就是新建组件的名称；（2）注意：为了能在模板中使用，这些组件必须先注册以便 ...

2020-04-23 21:01:08 814

原创 vue事件(事件指令、事件对象、事件修饰符)

vue事件1、事件指令：两种写法：(1) v-on:事件名.修饰符="执行的函数名或表达式"(2) @事件名="执行的函数名或表达式"注意:(1) 事件执行的函数，需要在methods中定义，即函数都存放在methods中(2) 事件绑定时，vue中函数名后有无小括号都可以调用，加小括号是为了传参使用。在普通js函数中，加小括号是调用此函数(3) this指向...

2020-04-22 18:24:11 1205

原创 vue自定义指令-实现按钮控制元素拖拽

1、要求：(1) 每次打开页面时，拖拽元素不可拖动，单击按钮后可以拖动元素，再次点击按钮，元素又不可拖动了。(2) 第一个按钮控制第一个div元素拖拽，第二个按钮控制第二个div元素拖拽，而且它们互不影响。2、问题：(1)前面写的拖拽代码，再次点击按钮后，元素还可以继续拖动。(2)点击其中一个按钮，另一个按钮的状态也改变了，两个元素都可以拖拽，无法实现一对一控制元素拖拽3、解决：(1...

2020-04-21 20:33:30 1278

原创 vue指令修饰符、自定义指令

1、vue指令修饰符指令名称:参数.修饰符 = "值"比如 v-bind:value.number = “msg”（1）不同指令有不同的参数，也有不同的修饰符（2）相同指令下的修饰符可以连续使用，但不能连着使用别的指令下的修饰符<div id="app">  &...

2020-04-20 22:31:47 1001

原创 Vue指令使用(v-once、v-cloak、v-pre、v-slot与v-on)（二）

vue中指令的使用1、v-once只会渲染元素或组件一次，即使后续的数据修改了，也不会渲染到页面上；它后面不需要跟任何表达式,比如<div v-once>{{dvText}}</div> <div id="app">  <h1>{{passa...

2020-04-17 22:18:34 582

原创前端框架之Vue的初步学习

什么是vue？官方解释：一套构建用户界面的渐进式框架。只关注视图层，采用自底向上增量开发的设计。它的目标是通过尽可能简单的API，去实现响应数据绑定和组合的视图组件。vue的使用之前，我们要先引入一个vue的js文件，两种方式：去vue官网上下载vue.js到本地,使用·<script>标签将它引入到html文件中直接引用网络上地址，CDN上的vue网络地址：https...

2020-04-17 17:15:25 159

空空如也

空空如也