- 博客(50)
- 收藏
- 关注
RSS订阅转载 install与directive
install(Vue,option) Vue.js提供install方法，可用于开发新插件以及全局注册组件等export default {//vue的构造器，option可选的选项对象 install(Vue,option){ 组件 指令 混入 挂载vue原型 }}全局注册组件// components.js文件中import ScreenFull from './ScreenFull'import TagsView from './TagsV
2022-05-05 19:19:59
581
原创 Class类
class类的基本写法es6引入了class类的概念，可通过class关键字来定义类每个类都会有一个构造函数，即constructor()方法，用于创建和初始化class对象要注意，如果一个类没有指定constructor()方法则会默认添加，其中this关键字代表实例对象class CustomData { constructor(x,y){ this.x = x; this.y = y; } // 定义方法 toString() { retur
2022-04-27 18:32:29
799
原创 React
构建 React 开发环境npm install -g create-react-appcreate-react-app 【my-app】cd 【my-app】/npm start初识reactpublic/index.html中id="root"与src/index.js中document.getElementById('root')关联注释 {/* */}组件代码1function App(props){ return( <div>{props.pro
2022-02-11 16:27:49
527
原创 vuex状态管理
vue1.下载vuex依赖2.创建store目录store.js，然后在js中引入 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)3.在main.js引入store并挂载 import store from './store' new Vue({ el: '#app', store, render: h => h(App) })4.store.js中c
2021-12-31 16:02:14
485
原创 关于移动端 html5诸多事件
冒泡事件可通过touchmove：当手指在屏幕上滑动的时候连续地触发，这个事件发生期间，调用preventDefault()事件可以阻止滚动touchstart：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发longpress：当手指在屏幕上长按时触发一次，可在内配合定时器执行多次，需要结束时配合touchend事件清除定时器，详情可以参考链接touchend：手指从屏幕上离开时触发待完善。。。...
2021-10-27 18:31:09
422
原创 uni-app--tabs切换swiper
父组件<template> <view class="wrap"> <tabs-swiper :getTabs='getTabs' @changTab="changTab"></tabs-swiper> <swiper class="swiper-box" :current="tabIndex"> <swiper-item class="swiper-item"> <scroll-view scr
2021-10-26 17:37:25
1240
原创 Vue--混入(Mixin)
Vue–混入(Mixin)当不同组件有相同功能时，不必重复定义属性和方法，可使用vue中的混入(Mixin)来分发 Vue 组件中的可复用功能。一个 mixin 对象可以包含任意组件选项，即data、methods、生命周期、computed等。当组件使用 mixin 对象时，所有 mixin 对象的选项将被“混合”进入该组件本身的选项。mixin的钩子函数会先于组件执行mixin方法和参数在各组件中是不共享的export const myMixins = { components
2021-10-21 11:57:22
297
转载 uni-app实现全局组件注册
uni-app-全局注册组件三种方式1. 传统vue组件需要创建、引用、组成三个步骤2. 在page.json中对应page设置 "globalStyle":{ "autoscan": true },和pages同级3.HBuilderX 2.5.5起支持easycom组件模式官方解释在pages.json文件中配置参数，和pages同级，"easycom": { "^u-(.*)": "@/目录/u-$1/u-$1.vue"},组件命名规则需要符合"^u-(.*)"，比如u-but
2021-10-18 19:44:50
4346
原创 rich-text 富文本
rich-text 富文本普通的text文件不能显示格式，富文本格式rtf文件可以显示出很多格式信息，比如可以在一个文本包含不同颜色、不同字号的文本官方<rich-text :nodes="content"></rich-text>content: {`<span style='color:red;'>展开</span>关闭`,}<template> <view> <view class="u-conten
2021-10-18 18:08:30
648
原创 计数器组件
组件<template> <view class="counter-box"> <view class="counter"> <text class="reduce-add" @click="addReduce(-1)" @longpress="longAddReduce(-1)" @touchend="stopLong">-</text> <text class="amount">{{count}}{{unit}}
2021-10-15 11:38:50
360
原创 行内存放数据属性data-id
data-*='data'为行内存放数据的属性，可通过事件源中的currentTarget.dataset获取data-*存放的值另外css可通过 data-*放置的标签名[data-*='data']设置<template> <view> <scroll-view scroll-x class="bg-white nav" :scroll-left="scrollLeft"> <view class="view-item" :class="inde
2021-10-13 17:55:41
877
原创 oninput完美限制输入正整数
oninput完美限制输入非0正整数方法一oninput="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"方法二 <el-input v-model="ruleForm.num" @input='verificationNum'>verificationNum(){ if(this.ruleF
2021-10-12 19:32:51
914
转载 Proxy代理
Proxy对象用于创建一个对象的代理，从而实现拦截和自定义。语法：let proxy = new Proxy(target, handler)proxy–代理对象target–用Proxy包装的目标对象handler–一个通常以函数作为属性的对象，其属性是当执行一个操作时定义代理的行为的函数//直接对代理对象进行操作，操作会转发到目标对象上let target = {}let proxy = new Proxy(target,{})proxy2.a = 1console.log(tar
2021-10-09 18:08:25
243
原创 new Map()
1. new Map()let data = new Map()data.set(key,value) 添加一个新建元素到映射 //Map(1) {key => value} data.get(key) 返回映射中的指定元素data.has(key) 如果映射包含指定元素，返回truedata.clear(key) 从映射中移除所有元素data.delete(key) 从映射中移除指定元素data.valueof(key) 返回指定对象的原始值data.forEach(function
2021-10-07 19:30:26
287
原创 try{}catch(res){}、throw(exception)、new Error()
1. try{}catch(res){}try{}中的代码出现错误异常时，系统会将异常信息封装到error对象中，传递给catch(res){}，包含res.message、res.name等EvalError: eval() 的使用与定义不一样RangeError 数值越界ReferenceError 非法或不能识别的引用数值SyntaxError 发生语法解析错误TypeError 操作数类型错误URIError URI 处理函数使用不当2.throw(exception) 声明
2021-10-07 17:45:38
198
原创 reduce()累计器理解与使用实例
关于reduce()reduce()语法：arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])这个语法可能看不懂，那看一些这个arr.reduce((accumulator,curValue,curIndex,arr)=>{ return accumulator+curValue },initialValue)accumulator 累计器currentValue 当前值cur
2021-10-07 16:20:08
277
原创 vue3动态注册路由
在vue-cil2中，我们可以通过webpack中require.context这个api实现工程自动化，而在vue-cil3里vite替代了webpack，节省了webpack冗长的打包时间的同时我们也会失去webpack的部分api，对此我们可以使用vite中的 import.meta.glob()异步、import.meta.globEager()同步 来进行替换。1. 动态注册路由//const registerRoute = () => { const routerList =
2021-10-07 13:44:52
3734
原创 uni-app 全局变量机制
getApp().globalData 全局变量机制在App.vue中 export default { globalData: { text: 'text' } }在App.vue中调用 this.globalData.text在onLaunch生命周期中getApp对象还未获取，暂时可以使用this.$scope.globalData.text在page中调用 getApp().globalData.text...
2021-09-27 03:44:26
139
原创 {}与Object.create(null)
var one = {} 创建的对象带有_proto_,下面有一些方法与属性，这便是js的原型链继承，继承了object的方法和属性，在遍历对象时，会遍历原型链上的属性，带来性能上的损耗var two = Object.create(null)对象是纯净的，没有任何原型继承，原型链没有上一层...
2021-09-27 03:40:13
100
原创 URL.createObjectURL()与FileReader.readAsDataURL()
1.URL.createObject()URL与FileReader.readAsDataURL()通过URL.createObjectURL()可以获取当前文件的一个内存URL通过FileReader.readAsDataURL()可以获取一段data:base64的字符串如果后台返回base64格式的图片，处理方式：this.base = `data:image/png;base64,${res.url}` 然后直接绑定在image的src属性上：<image :src="bas
2021-09-27 03:34:36
592
原创 vue-cli3
1.npm init vite-app 项目名2.npm install3.npm install vue-router@next --save //配置router 创建router目录4.npm install vuex@next //配置vuexvue-cli3配合element-plus注册组件注意问题 import DatePacker from '@/components/global/DatePacker.vue' components:{ D
2021-09-27 03:13:11
371
原创 vue中的provide和inject
父组件 provide () { return { one: this.reload } }, methods: { reload () { console.log(1111) } }子组件inject: ['one'],mounth(){ this.garder()}methods:{ garder(){ this.one() //调用 } }待续。。。
2021-07-28 22:04:17
75
原创 require.context()实现全局组件注册/路由工程(动态)化
main.js中// 注册全局组件import registerCom from './路径' //引入js文件路径Vue.use(registerCom)在js文件中/* 注册全局组件 */export default { install(Vue) { /* require.context( directory, (useSubdirectories = true), (regExp = /^\.\/.*$/), (mode = 'sync'));.
2021-07-28 21:51:10
238
原创 Object方法
Object.assign()语法：Object.assign(target,…sources)target：目标对象…sources：源对象返回值：目标对象目标对象会发生改变let a = {name:'a'} let b = {age:'b'} let c = Object.assign(a,b) console.log(a,b,c)// {name: "a", age: "b"} {age: "b"} {name: "a", age: "b"}
2021-07-28 21:46:31
201
原创 关于vue中 select多选 ＜transition-group＞ children must be keyed: ＜ElTag＞报错问题
查询出结果说是没有给<el-select>设置value-key="id"，这个id为v-for中item唯一的值，，但是我这边添加了后还是报错，后来知道是因为之前设置的枚举值被删除了，导致获取不到这个枚举值，因此请求后台传递这个被删除的枚举值时才报此错误。处理方案是设置if条件，当这个回显枚举值为undefined时过滤掉，此问题是后台删改数据导致，前端此法可以过滤报错问题，但不是在根本上解决问题以上理解也可能是错误的，记录备忘。。。...
2021-07-27 21:33:56
7859
原创 vue el-popover实现循环+close
重点<template> <section> <el-button v-for="(item,index) in List" :key="index" @click="butEvent(scope.$index)"> <el-popover :ref="`popover-${index}`" > <el-button><el-link @click="$refs[`popover
2021-07-05 23:14:31
1233
2
原创 js实现复制功能
<el-button @click="copy('被复制的内容')">按钮</el-button> copy(data){ const copyContent = data; // 创建input标签存放需要复制的文字 const inputTag = document.createElement("input"); // 把文字放进input中，以便复制 inputTag.val
2021-07-05 23:02:53
138
原创 日期处理类封装
获取当前时间 AddDayCount为-1获取昨天,0今天,1明天GetDateStr(AddDayCount,bool) { let date = new Date(); date.setDate(date.getDate()+AddDayCount);//获取AddDayCount天后的日期 let year = date.getFullYear(); let month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.g
2021-07-04 23:37:02
132
原创 对数据的逻辑处理
<template> <div class="jsBox"> <el-table :data="tableData" :border="true" style="width: 100%"> <el-table-column prop="name" label="日期" width="249"></el-table-column> <!-- <el-table-column prop="min" label="最小
2021-06-02 01:40:29
511
原创 处理数组中的object数据
1. 给数组添加key:value，如图通过Object.assign({key:value} 相关代码：let arr = []this.List.map((item,index)=>{ arr.push( Object.assign(item,{name: '王小虎'}) )})console.log("List",this.List)console.log("arr",arr)2. 给数组中的key:[]添加key:value，如图相关代码：this.List.
2021-05-28 01:02:56
724
原创 vue组件之间的通信传值
1.父子组件的传值方法1 通过使用props父传子 / $emit()子传父父组件<DashboardSon :title="tagData" @mountedev="getEvent" />data() { return{ tagData："我是父组件中的数据"， }},methods: { getEvent(data){ console.log(data，"子组件传递过来的值") },}子组件<button @click="se
2021-05-27 00:19:02
117
原创 element中的form表单整理
status-icon 是否在输入框中显示校验结果反馈图标 boolean — false<el-form status-icon >去掉表单验证的async-validator: ["userName is required"]的警告在node_modules/async-validator/es/util.js中找到图中console.warn(type, errors);注释掉...
2021-05-27 00:03:58
575
原创 css实现父选择器
通过+相邻兄弟选择器模拟父选择器//效果为 input聚焦的时候labelbox盒子边框为蓝色，失焦为黑色 <div class="fatherbox"> <input class='box' placeholder="请输入提现金额" /> <label class="labelbox"></label> </div><style> .fatherbox{ position: relative; width.
2021-05-22 22:31:44
5420
原创 css笔记
关于响应式布局<div style="position: absolute; left: 0; right: 0; top: 0; bottom: 0;"></div>待续。。。
2021-05-22 22:12:51
51
原创 element中修改 默认样式方法
使用ui-element中table的row-class-name 给tr添加类名cell-class-name 给td添加类名<el-table v-loading="tableLoad" :data="tableData" :row-class-name="Rowname" > Rowname(row){ console.log("添加表格行",row) return "Rowname1" },需要注意的是，不能再...
2021-05-21 13:04:40
503
原创 vue创建
shift+右键，点击“打开命令窗口”如果是window10版本利用 start cmd 重新打开另外一个命令窗口检测node环境—node -v检测npm环境—npm -v安装脚手架—npm install @vue/cli -g检测是否安装成功—vue -V以上的操作将环境搭建好后就可以进行创建vue项目文件了通过输入vue ui 自动打开网页来创建或者是vue create 项目名称...
2021-05-06 20:38:18
140
原创 事件源中的target和currentTarget的区别
这里我以微信小程序的为例的<view bindtap="oneEvent" id="box"> <view id="box1">{{myData.a}}</view> <view id="box2">{{myData.a}}</view></view>输出得到currentTarget是监听事件者，而target是事件的真正发出者...
2021-05-05 11:14:22
183
原创 微信小程序实现下拉刷新
在全局的app.json中的window 配置 "enablePullDownRefresh":true,或者是给对应的page中的json文件中直接配置 "enablePullDownRefresh":true需要注意的是true，不是"true"全局的app.json中对应page中其中有一个"backgroundTextStyle": "dark"（参数有dark/light）是配置顶部有三个点闪烁的动画另外有一个下拉监听事件 onPullDownRefresh，将其放入js中，下.
2021-05-04 20:36:38
283
1
原创 前端通过在服务器省设置代理页面解决代理问题
vue框架 服务器上设置代理页面解决代理问题在vue目录中创建一个名为vue.config.jsmodule.exports = { lintOnSave: false,//取消严格检查 devServer: { host: "localhost", port: 8080, // 端口号 https: false, // https:{type:Boolean} open: true, //配置自动启动浏览器 proxy: { '/api': {
2021-04-28 09:52:59
312
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人