- 博客(53)
- 收藏
- 关注
RSS订阅原创 react 学习记录
创建项目npx create-react-app my-app 安装路由npm i react-router-dom引入ant组件库 npm install antd --save页面初始化import React ,{ Component }from 'react'import ReactDOM from 'react-dom'import 'antd/dist/antd.css';import './index.css'import { Layout } from 'an
2020-09-30 11:53:54
238
原创 node.js-我无法全局安装nodemon，无法识别“ nodemon”
npm config get prefix路径set PATH=%PATH%;路径
2020-09-18 11:55:24
508
原创 关于数组排序的相关总结
Array方法总结filter() sort()取最大值实现匹配确定数值对应费率方法一方法二for循环以及reduce()对比for infor offilter() sort()取最大值实现匹配确定数值对应费率近日写项目遇到这样的需求：根据后端传过来的不同数量对应的费率，在用户点击数量更改时显示相应的折扣后金额。关于项目1 技术栈：vue实现首先考虑的是在用户点击改变折扣费率，data中存储从后台获取的折扣列表rateList数据结构（示例）：[ {id: 1,
2020-09-12 14:54:38
339
原创 常用mixin方法
/* common.scss */$mainColor: red;$mainPdR:60px;$borderColor:#BABABE;$borderColorDetail:#88888E;@mixin font-dpr($font-size){ font-size: $font-size; [data-dpr="2"] & { font-size: $font-size * 2; } [data-dpr="3"] & { font-size:
2020-08-24 13:41:26
518
原创 关于slot的父子组件的参数传递问题
关键问题：子组件的slot 需要绑定传递的参数父组件 使用时在组件内部template 标签内进行接收#item="itemProps"，其中itemProps为任意命名，具体使用方式为在父组件内部slot中使用itemProps.XX的方式的进行访问父组件：<template > <div> <ul> <!-- 父组件的Child标签中,使用:itemValue绑定了数据,传递到子组件中使用--> &l
2020-08-21 13:15:50
1528
原创 关于vue实现验证码倒计时功能
template<div class="keyCode"> <el-input key="registerKeyCode" placeholder="请输入验证码" v-model="keyCode"> <i slot="prefix" class="el-input__icon iconfont icon-anquan"></i> </e
2020-08-21 11:31:40
255
原创 关于VUE项目中报Error: Avoided redundant navigation to current location: 的错
解决方案:在router.js 的 index.js 目录添加，注意需要在Vue.use(VueRouter)之前添加const originalPush = VueRouter.prototype.pushVueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err)}...
2020-08-21 10:24:51
280
原创 react学习值数据绑定
以一个todolist为例学习react入口函数—index.jsimport React from "react";import ReactDom from 'react-dom';import TodoList from "./TodoList";ReactDom.render(<TodoList/>,document.getElementById('root'))todolist首先引入reactFragment 为占位符，不会再dom中渲染import React,
2020-08-19 23:09:41
155
原创 element ui 改变表格边框颜色
使用element-ui做表格很方便，但是样式调整比较麻烦，特意记一下需要取消组件内样式的scoped，并提高权重，否则无法生效<style lang="scss"> @import "../../../assets/style/common"; .el-table--border:after, .el-table--group:after, .el-table:before { background-color: $borderColor!i
2020-08-19 10:30:04
3221
原创 git命令
git status //查看状态git add .// 添加git commit -m '完成了登录功能' //git branch//查看分支git checkout master//切换分支git merge login//合并分支 login分支名称git push /提交
2020-08-06 15:14:43
135
转载 .prettierrc文件常见配置
{ "semi": false, // 使用分号, 默认true "singleQuote": true, // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号) "bracketSpacing": true // 对象中的空格 默认true}
2020-08-06 14:55:25
476
原创 Vue非父子组件通信之发布订阅模式
Vue组件之间如果不是父子组件，数据传递问题：这样一个需求：两个兄弟组件均自定义了一个count值，需要在点击的时候将点击组件的count值，赋值给其兄弟组件的countDOM结构：<div id="app"> <children count="a"></children> <children count="b"></children></div>首先注册Vuelet app =new Vue({ el:'#
2020-08-03 16:29:07
175
原创 postcss----postcss.config.js配置
使用通过npm添加$ npm install postcss-px-to-viewport --save-devpostcss.config.jsmodule.exports = { plugins: { autoprefixer: {}, "postcss-px-to-viewport": { viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度. viewportHeight: 667, // 视窗的高度，对应的是我们设.
2020-07-23 11:48:02
5411
原创 ES6之对象扩展
Rest 解构赋值不会拷贝继承自原型对象的属性，(rest叫做剩余操作符)let obj1={a:1};let obj2={b:1};//当前对象的原型obj1.__proto__=obj2;let obj3={...obj1};console.log(obj3)//{a:1}Object.entries方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组Object.values方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍
2020-07-17 15:21:25
129
原创 vue学习之router
router1.前端路由的概念2.实现原理2.1hash2.2history.pushState({},"",'home')2.3history.replaceState({},"",'home')3.实现3.1. 引入路径3.2. 配置路由相关信息3.2.1导入路由3.3使用3.3.1通过Vue.use(插件)，安装插件3.3.2创建路由对象3.3.2.1创建路径与组件的对应关系，即配置映射关系3.3.2.2将router对象传入到vue实例中使用4. 设置默认路径5. 修改跳转模式6. router-
2020-07-16 10:48:23
681
原创 vue之数组中的哪些方法是响应式的
1.push this.letters.push('f')2.pop()删除最后一个元素this.letters.pop()3.shift()删除第一个this.letters.shift()4.unshift()添加在最前面,可以添加多个this.letters.unshift('aaa','bbb','ccc')5.splice():删除元素/插入元素/替换元素splice(1,1)在索引为1的地方删除一个元素,第二个元素不传，直接删除后面所有元素splice(index
2020-07-16 10:48:02
252
原创 vue----cli
安装cnpm install -g @vue/cli拉取旧版本cnpm install -g @vue/cli-init创建项目cli2:vue init webpack my-project（项目名称）cli4:vue create hello-world（项目名称）生成指定cli2:vue init webpack vuecli2test（项目名称）回车注意：ESlint 选择n单元测试：选择n...
2020-07-13 15:01:59
152
原创 Vue组件通讯之父组件向子组件通讯---props（有问题未解决）
如果设置传入参数的默认值，但是父组件未传入该参数，会报错，待解决props----properties[属性]的简写；组件之间的通许，通过在component/components设置props属性来进行例子：[采用模板分离写法]首先需要在组件内绑定需要传递的元素html<body><div id="app" > <tel :cmessage="message" :cmovies="movies"></tel></div&..
2020-07-09 17:37:24
192
原创 Vue组件中data为什么需要是一个函数
关于Vue组件中组件内部数据绑定通过data(){return {}}进行data不是一个对象类型，需要是一个函数类型，如果传入非函数类型会报错一个小例子：对于obj类型，如果在{}内部返回或者引用外部的obj，由于引用的是地址，会指向同一个对象，所以如果obj定义在for循环外部最终结果，均为[{url: 4},{url: 4},{url: 4},{url: 4}]即指向同一个地址let key = 'url' let arr2 = [] let arr = [1, 2, 3, 4]
2020-07-09 17:21:04
224
原创 map与reduce结合计算数组对象属性值
let detail = [ {name:'上衣',price:110}, {name:'衬衣',price:345}, {name:'裤子',price:678}, {name:'帽子',price:45}]function totalPrice(){ return this.detail.map(item=>item.price).reduce((x,y)=>x+y,0);}其他方法totalPrice2() { let total = 0; for
2020-07-08 09:53:55
491
原创 vue之点击列表切换class
html<style> .isActive { color: red; } </style></head><body><div id="app"> <ul> <li v-for="(item,index) in list" :class="{isActive:isActiveIndex==index}" @click="isCurrentActive(index)
2020-07-07 23:39:06
639
原创 vue学习之基本指令
v-bind指令用来绑定数据v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute<div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ </span></div>var app2 = new Vue({ el: '#app-2', data: { message: '页面
2020-07-07 23:31:26
189
原创 vue基础学习之组件
全局组件语法：Vue.component({});html：<div id="app"> <input type="text" v-model="inputValue"><button v-on:click="addHandleBtnClick">add</button> <ul> <todo-item v-for="item in list" v-bind:content="item">
2020-07-07 10:02:04
117
原创 微信小程序模板之template
1. 创建 template 模版template 模版 主要用于展示，模版中不涉及事件处理， 需要处理的事件逻辑放在调用模版的页面中。 一个 template 模版 只包含 wxml wxss 文件,建议文件命名以template结尾template.wxml 文件语法以渲染数据为多个数组为例：<template name="postItem"> <view class="post-container"> <image src="{{imgSrc}}
2020-07-03 17:35:18
520
原创 微信小程序开发学习（问题总结）
wxss rpx单位rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。常用函数1跳转页面生命周期差异：onHide触发 wx.navigateTo({ url: 'url', })onUnload触发wx.redirectTo({ url: '
2020-07-03 17:23:33
197
原创 原生ajax请求
eval("("+str+")"),将字符串转化成对象JASON对象的两个方法：JASON.parse() 用于将json字符串转化成对象JASON.stringify()用于将对象转化成json数据格式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ajax原生</title> <style>
2020-07-03 08:49:10
111
原创 ES6----Class继承中的super关键字的用法及指向
https://blog.youkuaiyun.com/qq_32107121/article/details/107044290?%3E
2020-07-02 10:28:16
288
原创 ES6语法之字符串新特性
padStart padEndpadStart()用于头部补全，如果用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串{ let str = 'i'; let str1 = str.padStart(5, 'mooc'); console.log(str1); let str2 = str.padEnd(5, 'mooc'); console.log(str2);}repeatrepeat()方法返回一个新字符串，表示将原字符串重复n次，参
2020-06-28 12:32:30
222
原创 zeptoch节点操作
结果引入zepto<script src="https://cdn.bootcss.com/zepto/1.1.7/zepto.min.js"></script>html<body> <div id="dv"> <p>我是p</p> </div></body>script<script> // $('#dv').append($('<d
2020-06-17 12:24:51
279
原创 移动端学习之requestAnimationFrame兼容性相关处理
不同厂商兼容性代码： var raf = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 16);
2020-06-16 14:05:30
898
原创 browser-sync start --server报错问题
cmd去访问，或者是修改PowerShell：以管理员身份打开PowerShell： 使用get-executionpolicy 查看脚本执行策略，使用set-executionpolicy来修改策略
2020-06-16 12:08:24
279
原创 npm淘宝镜像地址安装移动端调试工具vorlon
vorlon安装移动端调试工具使用淘宝镜像镜像进行安装步骤：安装node.jscmd中如果输入 node -v 可以打印出版本号，则node.js已经成功安装；安装npm淘宝镜像 npm i -g cnpm --registry=https://registry.npm.taobao.org安装vorloncnpm i -g vorlon...
2020-06-16 10:05:14
212
原创 移动端字体大小固定显示
此方法需要首先用js在head 添加自定义属性保存DPR值；[data-dpr='2'] body,[data-dpr='2'] a,[data-dpr='2'] input{ font-size: 24px;}[data-dpr='3'] body,[data-dpr='3'] a,[data-dpr='3'] input{ font-size: 36px;}
2020-06-12 17:00:47
320
1
原创 原生js解决移动端1像素问题---1
(function () { var docEl = document.documentElement, viewPortEl = document.querySelector('meta[name="viewport"]'), dpr = window.devicePixelRatio || 1, maxWidth = 540, minWidth = 320; dpr = dpr >= 3 ? 3 : (dpr >
2020-06-12 14:09:30
397
翻译 原生dom之---insertAdjacentHTML()
insertAdjacentHTML()将指定的文本解析为 Element 元素，并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接使用innerHTML操作更快。语法element.insertAdjacentHTML(position, text);position一个 DOMString，表示插入内容相对于元素的位置，并且必须是以下字符串之一：'beforebegin'：元素自身的前面。'aft
2020-06-10 13:50:09
260
原创 HTML5学习总结之使用原生validity属性设置提示框
html<form id="forms"> <div class="oneline"> <label for="name">用户名:</label> <input id="name" class="sinput" name="name" type="text" required> </div> <div class="oneline"> <lab
2020-06-10 12:47:07
450
1
转载 html5 form-Validity验证函数
h5 为表单新增了很多类型，及属性。根据这些新增的类型及属性 h5也为我们提供了验证这些数据的js函数，这些验证表单的函数都存在了ValidityState对象中，接下来让我们一起来了解一下这些函数的用法：ValidityState对象ValidityState对象是通过validity 属性获取的，该对象有8个属性，分别针对8个方面的错误验证，属性值均为布尔值。1．valueMissing属性必填的表单元素的值为空。如果表单元素设置了required特性，则为必填项。如果必填项的值为空，就无法
2020-06-10 09:32:43
1016
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人