- 博客(47)
- 收藏
- 关注
RSS订阅原创 监听的用法watch
1、computed是计算属性；watch是监听，监听data中的数据变化。3、computed：一个属性受到多个属性影响，如：购物车商品结算。2、computed不支持异步，有异步操作时无法监听数据变化；5、watch：一个数据影响多条数据，如：搜索数据。1、当想停止某页面定时刷新（监听路由的变化）4、watch支持异步操作。注：直接销毁方法不管用。
2023-08-29 16:16:45
135
原创 vue2和vue3的区别
使用setup()中的第二个参数content对象中有emit，只需要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。子组件中通过$emit向父组件触发一个监听方法，传递一个参数。8、main.js文件中部分设置不同。1、生命周期函数钩子不同。2、数据双向绑定原理不同。4、指令和插槽的使用不同。3、定义变量和方法不同。子组件通过prop接收。7、父子之间传参不同。
2023-08-14 16:44:06
627
2
原创 _this指向问题
“_this只是一个变量名,this代表父函数,如果在子函数还用this,this的指向就变成子函数了,_this就是用来存储指向的”
2022-01-05 14:34:37
231
原创 浅谈this.$route.params和this.$route.query的区别
1.this.$route.query的使用A、传参数：this.$router.push({ path: '/monitor', query:{ id:id, }}）B、获取参数：this.$route.query.idC、在url中形式（url中带参数）http://172.19.186.224:8080/#/monitor?id=1D、页面之间用路由跳转传参时，刷新跳转后传参的页面，数据还会显示存在
2021-07-26 18:05:28
463
原创 vuex页面刷新数据丢失遇到的问题
import createPersistedState from 'vuex-persistedstate'const store = new Vuex.Store({ // ... plugins: [ createPersistedState() ]})import { Store } from 'vuex'import createPersistedState from 'vuex-persistedstate'import * as Cookies from 'js
2021-05-26 15:24:17
83
原创 JS获取URL中参数值
function getQueryVariable(variable){ var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i<vars.length;i++) { var pair = vars[i].split("="); if(pair[0] == var
2021-05-08 10:45:12
79
原创 Vue.directive()方法创建全局自定义指令
Vue.directive('myfocus', { // bind表示这个自定义指令一绑定到dom上，就开始自动执行 bind(el,binding) { console.log('bind'); }, // 表示dom插入到页面上的时候自动执行 // 这些函数都有两个参数，一个是el(使用自定义指令的元素), 一个是binding(记录自定义指令信息的对象) inserted(el, binding) { console.log('
2021-01-19 19:50:35
174
1
原创 国际化修改element-ui自带的内容
//i18n.jsimport Vue from 'vue'import locale from 'element-ui/lib/locale'import VueI18n from 'vue-i18n'import messages from './langs'Vue.use(VueI18n);if(!localStorage.getItem('lang')){ localStorage.setItem('lang','zh');}const i18n = new VueI18n
2021-01-15 13:49:39
558
原创 vue watch监听 handler，deep，immediate用法
我们使用watch监听数据时，有三个选项，handler，deep，immediate该值默认是false，在进入页面时，第一次绑定值，不会立刻执行监听，只有数据发生改变才会执行handler中的操作，
2021-01-13 10:15:10
528
原创 vue 鼠标右键点击事件
<div @contextmenu.stop.prevent="$refs.ctxshow.showMenu($event, data)"> 鼠标右键点击</div> <e-vue-contextmenu ref="ctxshow" id="contextStyle" @ctx-show="show" @ctx-hide="hide"> <div @click="handlerSql">Sql数据操作</div> <
2021-01-12 16:27:59
2847
原创 elementUI 表格多选框this.$refs.xxx.toggleRowSelection的使用方法
在elementUI官方实例中，multipleSelection代表选中的值，**toggleRowSelection(row,selection)**方法用于原先已选的值传入进行勾选，row传递被勾选行的数据，selected设置是否选中。需求是每次打开弹窗都会重新获取表格数据，并且要选中对应的数据，但直接使用那个方法并没有效果，因为表格中的数据还没有请求出来。解决：获取数据后在需要进行勾选操作的外面套一个$nextTick this.$nextTick(() => { ch
2021-01-11 17:14:57
3325
原创 vue element-ui导出表格的功能，csv文件格式
下载插件npm install xlsx --savenpm install file-saver --save引入import FileSaver from 'file-saver'import XLSX from 'xlsx' // .table要导出的表格 var wb = XLSX.utils.table_to_book(document.querySelector('.out-table')) //表格的class名字 /* get binary st
2020-12-23 17:25:48
978
原创 vue多层数据嵌套的处理
1、现在是父组件请求，套用子组件请求， 当父组件请求完成之后，返回的都是Promise对象，使用循环 ，将父组件返回的Promise对象存到一个新的数组中。2、再使用 es6 中的Promise.all（）将数组中的Promise对象解析出来，这次他就会是你想要的数据了， 不管是顺序还是内容。在渲染的时候 需要这样搞一下...
2020-11-30 10:43:34
2104
原创 tab切换
<body> <div id="app"> <ul class="tab-tilte"> <li @click="cur=0" :class="{active:cur==0}">标题一</li> <li @click="cur=1" :class="{active:cur==1}">标题二</li> <li @click="
2020-11-20 13:43:00
97
原创 全选以及反选的实现（注意事项）逻辑复杂时渲染问题$set
//全选<checkbox-group @change="selectAll"> <checkbox :checked="allChecked"></checkbox></checkbox-group>//单选 <checkbox-group @change="changeitem(item)" checked class="checkbox"> <checkbox :value="item.price" :che
2020-11-19 14:30:36
175
原创 浅谈Object.assign()的用法
Object.assign（）方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。注意，Object.assign可以用来处理数组，但是会把数组视为对象。//多个对象合并到某个对象const merge = (target, ...sources) => Object.assign(target, ...sources);...
2020-11-12 11:14:28
153
原创 小程序生命周期
小程序的生命周期onLaunch:监听小程序初始化 ，当完成初始化时，会触发（全局只触发一次）onShow:监听显示onHide:监听隐藏onUpload:监听页面卸载onShareAppMessage:用户点击右上角分享2、注意wx:key=“id” wx:for="{{books}}"的写法列表是object 不重复，数字或者是字符串如果列表本身是数字或者是字符串，可以wx:key="*this"...
2020-11-02 18:10:49
70
原创 element-ui视频上传获取时长
<el-upload class="upload-demo" :action="actionurl" :show-file-list="false" :on-success="handleavatarsuccess" :before-upload=" beforeUpload"> beforeUpload(file, index){ let url = URL.createObjectURL(file.raw) var audioElement = new A.
2020-10-30 15:18:04
1375
2
原创 vue之this.$route.query和this.$route.params的使用与区别
1.this.$route.query的使用A、传参数：this.$router.push({ path: '/monitor', query:{ id:id, }}）B、获取参数：this.$route.query.idD、页面之间用路由跳转传参时，刷新跳转后传参的页面，数据还会显示存在（项目中遇到此问题）2.this.$route.params的使用A、传参数：this.$router.push(
2020-10-30 10:33:56
557
原创 Vuex中Mutations修改状态
读取state，这篇是修改状态。即如何操作Mutations。一.$store.commit( )Vuex提供了commit方法来修改状态1.store.js文件const mutations={ add(state){ state.count++ }, reduce(state){ state.count-- }}例如2.在button上的修改方法<button @click="$store.commit('add')"
2020-10-30 09:46:49
526
原创 el-select数据过多懒加载处理方式
下拉懒加载loadMore下拉懒加载, 当select滚动到底部时, 你再去请求一部分数据, 加入到当前数据中.<template> <el-select v-model="value" placeholder="请选择" filterable multiple v-el-select-loadmore="loadmore" //加载方法 > <el-opt
2020-10-29 16:58:16
974
原创 css动画效果
//2D动画 transform:translate(); /*偏移*/ transform:rotate(); /*旋转角度*/ transform:scale(1,2); /*缩放的倍数：分别表示宽，高*/ transform:skew(xdeg,xdeg); /*倾斜 参数分别为x轴和y轴倾斜的角度*/ transform:matrix(); /*矩阵的效果*/ //3D动画 transfom:rotateX(xdeg); transfo
2020-10-28 15:20:45
94
原创 watch监听的方法
vue中的watch监听，除了监听data中的数据还可以监听 props 、route、route 、route、emit 、computed
2020-10-28 10:23:28
520
原创 字符穿截取，拼接
let imgUrlList = this.dataForm.feedBackImage.split(’|’)将 [“19481_0_00,45444@qq.com,1”, “110_1_10,asd.gm@qq.com,123”, “5974_2_10,a13111@gmail.com,bb”] 变为"19481,110,5974"1 let idList = "";2 let str1 = [];3 let str2 = [];4 for (let i = 0; i < id.lengt
2020-10-23 13:34:50
78
原创 vue store存储commit 和dispatch
vue store存储commit 和dispatchthis.$store.commit('toShowLoginDialog', true);this.$store.dispatch('toShowLoginDialog',false);主要区别是：dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch(‘mutations方法名’,值)commit：同步操作，写法：this.$store.commit(‘mutations方法名’,值)
2020-10-23 11:23:16
188
原创 图片上传回显问题点击可放大图片
<el-form-item label="活动图片" prop="fileList"> <cos-el-upload ref="upload" :action="uploadUrl" :headers="{Authorization:tokenId}" :on-change="uploadChange" :on-remove="uploadRemove" :on-preview="handlePictureC.
2020-10-20 16:14:54
568
原创 VUE对表单进行增减
默认一条表单，后面显示添加的按钮，新增一条后显示减号的按2、代码部分通过v-for显示表单内容按钮的显示隐藏通过表单index控制3、增减方法通过push和splice对表单进行增减
2020-10-15 16:33:32
314
原创 echarts饼状图共用组件
<template> <div style="width: 100%;height:100%;text-align: center;"> <div :id="pieShowId" class="pie" style="width: 100%;height: 100%"></div> </div></template><script>//import NProgress from 'nprogress'
2020-10-15 11:23:40
208
原创 async 和await，promise用法
基本规则1、 async 表示这是一个async函数，await只能用在这个函数里面。2、 await 表示在这里等待promise返回结果了，再继续执行。3、await 后面跟着的应该是一个promise对象（当然，其他返回值也没关系，只是会立即执行，不过那样就没有意义了…）async和promise都是异步方法，区别是async生成的结果是promise对象，async是promise的终结版。await只能在async中使用，await是阻塞的意思，就是暂停，你一起调用2个接口，第一个执行完
2020-10-09 11:48:18
256
原创 this.$set()的用法，踩坑
<div id="app"> <ul> <li v-for="item in obj"> {{ item }} </li> </ul> <button @click = addObj>添加Obj</button> </div>var vm = new Vue({ el: "#app", ...
2020-09-29 16:01:36
788
原创 文件上传
<template> <el-upload class="upload-demo" :limit="limit" :action="action" :accept="accept" :data="data" :multiple="multiple" :show-file-list="showFileList" :on-exceed="handleExceed" :with-credentials="withcred
2020-09-16 09:59:47
128
原创 ref的理解
ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。
2020-09-08 17:15:07
437
原创 Vue 组件间通信有哪几种方式
Vue 组件间通信是面试常考的知识点之一，这题有点类似于开放题，你回答出越多方法当然越加分，表明你对 Vue 掌握的越熟练。Vue 组件间通信只要指以下 3 类通信：父子组件通信、隔代组件通信、兄弟组件通信，下面我们分别介绍每种通信方式且会说明此种方法可适用于哪类组件间通信。（1）props / $emit 适用 父子组件通信这种方法是 Vue 组件的基础，相信大部分同学耳闻能详，所以此处就不举例展开介绍。（2）ref 与 $parent / $children 适用 父子组件通信ref：如果在普
2020-09-07 13:52:23
380
1
原创 表单自定义的校验方法
例如：var Main = {data() {var checkAge = (rule, value, callback) => {if (!value) {return callback(new Error(‘年龄不能为空’));}setTimeout(() => {if (!Number.isInteger(value)) {callback(new Error(‘请输入数字值’));} else {if (value < 18) {callback(new E
2020-09-02 15:19:40
271
原创 父组件向子组件传值步骤
父组件向子组件传值步骤：在这里先定义一下，相对本案例来说：App.vue是父组件，Second-module.vue是子组件。一、首先，值肯定是定义在父组件中的，供所有子组件共享。所以要在父组件的data中定义值：二、其次，父组件要和子组件有契合点：就是在父组件中调用、注册、引用子组件：调用：注册：引用：三、接下来，就可以在父组件和子组件链接的地方（即引用子组件的标签上），把父组件的值绑定给子组件：这里我绑定了两个值，一个是数组，一个是字符串。2018-03-30 10:15:
2020-09-02 11:19:59
1651
原创 vue 递归遍历数据
function changeTree(val) {let arr = [];if (val.length !== 0) {val.forEach(item => {let obj = {};obj.id = item.path;obj.label = item.name;if (item.children.length >= 1) {obj.children = this.changeTree(item.children);}arr.push(obj);});} r
2020-08-28 14:59:26
1901
原创 什么时候需要用Vue.nextTick()和this.$nextTick()
1.你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。2.mounted 不会承诺所有的子组件也都一起
2020-08-26 14:13:16
588
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人