- 博客(61)
- 收藏
- 关注
RSS订阅原创 html事件
HTML 有能力让事件触发浏览器中的动作，例如当用户单击元素时启动 JavaScript。以下是可添加到 HTML 元素以定义事件操作的全局事件属性。当前浏览器不支持video标签。tip: 颜色加深是常用事件。tip: 颜色加深是常用事件。tip: 颜色加深是常用事件。tip: 颜色加深是常用事件。tip: 颜色加深是常用事件。
2022-12-14 22:22:27
444
原创 html属性
属性可以为 HTML 标签提供一些额外信息，或者对 HTML 标签进行修饰。attr表示属性名value表示属性值。属性值必须使用双引号" "或者单引号’ '包围。注意⚠️ ：虽然双引号和单引号都可以包围属性值，但是为了规范和专业，请尽量使用双引号。一个标签可以没有属性，也可以有一个或者多个属性。
2022-12-13 18:30:40
1054
2
原创 webpack配置代理及cookie
const cookie = ''; //cookie值const RefererPath = 'index.html'module.exports = { dev: { proxyTable: { '/api':{ //前缀 target: url, //目标地址 changeOrigin:true, //是否允许跨域 onProxyReq: function(proxyReq, req, res) {
2021-01-05 11:26:20
1320
翻译 手写vue双向数据绑定原理
class Vue { constructor(options) { this.$el = options.el; this.$data = options.data; let computed = options.computed; let methods = options.methods // 这个跟元素是否存在 if (this.$el) { // 把数据全部转化成用Ob
2021-01-03 22:37:16
259
原创 computed，watch区别及一起搭配使用
computed定义:依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值watch定义：更多的是「观察」的作用，无缓存性，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作使用场景建议:需要缓存用computed需要异步操作用watchcomputed,watch一起使用...
2020-12-28 14:50:16
597
1
原创 css超出...
超出一行… white-space:nowrap; //不换行 overflow: hidden; //超出隐藏 text-overflow: ellipsis; //变成...
2020-11-16 20:35:25
158
原创 前端实现模糊查询
效果图需求当input值为空时显示所有数据当input有值时，添加回车事件模糊查询思路input添加一个回车事件，用数组es6方法filter过滤数组input添加一个input事件，实时监听input的值，为空时数据显示全部<template> <div class="approvalListBox"> <div class="searchBox"> <!-- 添加回车事件，input事件 -->
2020-11-11 16:36:47
5741
2
原创 JS获取当前时间的年，月，日，时间
var date = new Date();date .getYear(); //获取当前年份(2位)date .getFullYear(); //获取完整的年份(4位)date .getMonth(); //获取当前月份(0-11,0代表1月)date .getDate(); //获取当前日(1-31)date .getDay(); //获取当前星期X(0-6,0代表星期天)date .getTime(); //获取当前时间(从1970.1.1开始的毫秒数)date .getH
2020-11-11 08:37:17
467
原创 封装缓存
1.新建一个js文件const utils = {};utils.setItem = function (key, val) { localStorage.setItem(key, JSON.stringify(val));};utils.getItem = function (key) { return JSON.parse(localStorage.getItem(key));};utils.removeItem = function (key) { local
2020-11-06 11:28:50
227
原创 vue动画使用
<template> <transition name="approvalList-fadein"> <div class="conApprovalBox" v-if="isShow"> <div class="opac"></div> <div class="userInfoBox"> <div class="userInfo"> <div cl
2020-11-06 09:28:44
190
原创 改变input，textarea字体颜色
效果图input { text-shadow: 0px 0px 0px #000; -webkit-text-fill-color: transparent;}input::-webkit-input-placeholder{ color:#ccc; text-shadow: none; -webkit-text-fill-color: initial; }
2020-11-05 19:34:59
958
原创 使用插槽封装组件
技巧标签用slot文本用props子组件<template> <div class="top"> <slot name="left"></slot> <span>{{ title }}</span> <slot name="right"></slot> </div></template><script>export defa.
2020-09-16 00:26:37
473
原创 字符串，数组截取指定字符
数组的话，用arr.toString()或者arr.join("")转成字符串字符串直接引用方法function getCaption(str,idx) { var index=str.lastIndexOf("|"); if(idx==0){ str=str.substring(0,index); }else { str=str.substring(index+1,str.length); } return str;}var str= .
2020-09-14 23:02:44
903
1
原创 vue实现数组的增删查改
<template> <div> <div class="admin" @click="clickIsShow">管理</div> <div> <div class="adressInfo" v-for="(item,index) in list" :key="index"> <label> <input v-if="isSh.
2020-09-12 21:05:54
539
原创 简单实现外卖demo
关于加减菜单思路是：单独写一个组件，然后父向子组件传参，把这一项的数据都传过去；数据后端返回的肯定是个对象类型，在点击加减号时，触发vuex方法，动态给这个对象增减属性count其他的其实也没啥难的，主要是会vuex的用法main.js代码import Vue from 'vue'import App from './App.vue'import store from './store/index'import VueRouter from 'vue-router'Vue.use(Vu..
2020-09-06 21:41:49
504
原创 高度自适应
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html, bo.
2020-09-05 16:22:09
95
原创 promise基本用法及封装axios请求
基本用法var p = new Promise(function(resolve, reject) { setTimeout(function() { var flag = true; if(flag) { resove('hello') }else { reject('error') } }, 1000)});p.then(function(data) { console.log(data) //hello},function(info) { console.l
2020-08-29 01:22:15
674
原创 query跟params区别
共同点两者都是路由传参异同点query一般搭配path一起用;params一般搭配name一起用query类似get请求,就是能在浏览器中显示参数;params类似post请求,就是不会在浏览器中显示参数query传参,刷新页面不会丢失参数,params刷新会丢参数,不过可以在路由配置上加上path/:id就不会丢参了...
2020-08-26 21:23:48
421
原创 快速上手eCharts
先看效果图通过npm安装npm install echarts --save在main.js中引入import echarts from 'echarts'; //引入eChartsVue.prototype.$echarts = echarts //挂在到vue原型上在组件中使用<template> <div id="app"> //在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器 <..
2020-08-24 13:25:28
179
原创 axios模块化
安装axiosnpm i axios新建一个api文件夹.里面建个http.js文件,当然名字可以随便取// 导入axiosimport axios from 'axios'//设置基地址const http = axios.create({ baseURL: '地址'})//暴露httpexport default http;//封装一个方法export const login = ({username, passward}) => { return.
2020-08-21 00:26:26
341
原创 手风琴数据量过大出现卡顿
对于接口来说，要求后端第一个接口只返回title的数据，第二个接口返回item各自的数据，然后点击每一项item就渲染各自的数据对于展示页面，就可以用v-if，v-else来判断数据拿到前后来展示最后得提示一下，点击每一项发第二个请求时得加个定时器，不然你点一个item会显示上一个item...
2020-08-19 20:20:04
312
原创 快速上手moment.js
安装npm install moment组件中使用<script>import moment from 'moment'; export default { data() { return { data: [moment().format('yyyy-MM-DD HH:mm:ss'), moment().add(1, 'day').format('yyyy-MM-DD HH:mm:ss')] //2020-08-11 00:00:00,2020-08-12 00:00:0
2020-08-11 17:03:36
137
转载 可能比文档还详细--VueRouter完全指北
https://juejin.im/post/6844903665388486664#heading-44
2020-08-11 10:43:48
97
原创 防止事件多次触发请求
防抖节流在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果防抖当持续触发事件时，不执行函数，但是当触发停止一段时间后才执行一次节流当持续触发事件时，也必需一段时间之内容再执行一次function jieliu(fn, wait) { // 开始时间 var startTime = Da
2020-08-09 16:40:28
527
原创 ES6模块化导入、导出语法
Node.js中的模块化标准是CommonJS导入: require暴露: module.exportsES6的模块化语法ES6默认语法导入: import xxx from ‘模块’导出(暴露): export default 名字按名字导入导出导入: import {名字} from ‘模块’导出: export const 名字 = 值::: tip 提示导出时必须要赋值你导出的名字叫什么，导入的时候取的时候也要叫什么，名字跟导出的不匹配，就得到undefin
2020-08-09 16:39:30
678
原创 this指向
普通this四种指向普通函数调用 => window对象调用 => 当前对象构造函数调用 => 创建出来的实例apply和call调用 => 方法后的第一参数对象箭头函数它指向的是上层作用域中的this简写依据function不写,改成=>如果形参只有一个,可以省略小括号如果形参0个或者多个,不能省略小括号如果函数体只有一句话,是可以省略大括号的如果函数体只有一句话,并且是返回值的那一句话,在省略的同时也要省略return如果函数体
2020-08-09 16:37:35
91
原创 var let const 区别
var在js中是支持预解析的，而let不支持预解析，也就是变量提升的区别var可以重复定义同一个变量，但是let不可以var没有块级作用域,let有块级作用域const跟以上三点的let一样,唯一区别是const是用来定义常量的，常量定义之后是不允许改变的...
2020-08-09 16:36:44
97
原创 mixin介绍
Mixin概述混入(mixin)提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项例子定义一个混入对象export const myMixin = { data() { return { num: 1 } }, created() { this.func_one(); he
2020-08-09 16:33:34
11084
原创 vuex详细介绍
Vuex概述Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享Vuex的基本使用1.安装vuex依赖包npm install vuex --save2.导入vuex包import Vuex from 'vuex'Vue.use(Vuex)3.创建store对象const store = new Vuex.Store({ state: { count: 0 }})4.将store对象挂载到vue实例中new Vue
2020-08-09 11:50:54
240
原创 根据接口返回的数据，来显示页面上不同的状态
效果图created() { uni.request({ url: this.$api_host + '/region_category/get_cg_list', data: { token: this.userInfo.token }, header: {}, method: 'get', success: (result) => { console.log(result, 111); if (result.d
2020-07-28 15:45:10
1229
原创 vue组件传值,父子传值,子父传值,兄弟传值,组件主动获取数据及方法
一.父子传值父组件引入子组件并注册在标签通过动态绑定data里的值子组件通过props接收父组件传递过来的参数主动获取值父组件里注册的子组件标签里写上ref在mounted声明周期函数里打印this.$refs.name.msg即可效果图// 父组件<template> <div> <fatherSon :num=num :go='go' ref="name"></fatherSon> </div>&l
2020-07-25 18:30:30
472
1
原创 uniapp做导航栏（基于上次的demo做了升级）
1.先看效果图2.头部nav是用flex布局的，所以可以增加内容，布局都是自适应的3.content是flex布局的4.detail是flex布局的，我把主轴方向改成次轴方向，内容也是可以随意增加或者删减5.detail的宽度我给力一个固定的，因为小程序不兼容flex:1提示：uniapp做布局，最好用flex布局，尽量不要去用定位，浮动...
2020-07-24 11:03:41
358
原创 js实现时间戳转换成日期
1.页面多处都要使用时间戳转换，所以为了方便，直接写在main.js中，然后挂载到原型上2.直接调用this.$get_date(时间戳)const get_date = (datetime) => { var date = new Date(); date.setTime(datetime * 1000); var y = date.getFullYear(); var m = date.getMonth() + 1; m = m < 10 ? '0' + m : m; var
2020-07-14 21:51:15
559
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人