vue
SanOrintea
这个作者很懒,什么都没留下…
展开
-
函数 和 函数执行的区分
区别在于一个then的是执行完了的值,一个then的是函数。fn是函数,fn()是执行函数。fn是函数,fn()是执行函数。原创 2022-08-23 15:25:56 · 266 阅读 · 0 评论 -
vue3 按钮hover根据鼠标进入按钮的方位 从不同位置进入按钮按钮hover状态不同 hover根据鼠标位置
vue3 按钮hover根据鼠标进入按钮的方位 从不同位置进入按钮按钮hover状态不同 hover根据鼠标位置原创 2022-08-09 10:27:12 · 1560 阅读 · 0 评论 -
动态绑定css
动态绑定css。原创 2022-08-01 13:20:51 · 779 阅读 · 0 评论 -
uniapp 页面跳转传值 两种方法 url拼接 eventChannel事件回调
uniapp 页面跳转传值 两种方法 url拼接 eventChannel事件回调原创 2022-06-01 13:55:05 · 2297 阅读 · 2 评论 -
el-tab mounted只有第一次能取到prop中的值 mounted和props先后顺序
一个Tab,分页的代码用组件实现,一个组件是一页。在这个组件中进行http请求。入参取prop传进的。第一次点入这个currentPage能正常传,第二次就不行。解决方法:方法1:不应该在mounted中取prop值。应该吧要写在mounted中的东西写在prop值变化监控的watch中方法2:在mounted中加settimeout0延迟...原创 2022-05-23 11:31:04 · 457 阅读 · 0 评论 -
/deep/ >>> ::v-deep
1./deep/在vue3.0之前可使用,例如(复写样式前加/deep/),vue3.0及后使用就会报错/deep/ .el-input {width: 60px;}2. ::v-deep在vue3.0及后使用,替代/deep/::v-deep .el-input {width: 60px;}3. >>>只作用于css,对于less和scss不起作用,如果是less和scss的话需要用到/deep/或::v-deep...原创 2022-04-18 14:35:51 · 188 阅读 · 0 评论 -
vue3从零开始(四)
1.props功能的增加原来props只能传递值和组件,但是一般不用来传递组件,因为在2中会对整个组件做数据劫持,导致额外的性能开销。现在增加了一个markRaw,可以消除组件的响应性,从而能将其传递到想要传递的子组件中。这里我没发现这样做比只在子组件中引用好在哪里,因此先略过。2.emit与v-model语法糖在2中,我浅薄的理解v-model:xxxx是:xxxx的缩写,大概也不对,但是先不管先看3。在3中<ChildComponent v-model="pageTitle" />原创 2022-03-04 16:25:53 · 282 阅读 · 1 评论 -
vue3从零开始(三)
接上文,需求:从后端获取数据+在输入框中输入作者名字筛选出作者的书展示上文:// 子组件:<template> <div>{{list}}</div></template><script>import { ref, onMounted } from 'vue' // 发起接口请求function fetchList() { let res = [ {id:'1',name:'JAVA',author:'s0ne原创 2022-03-04 10:57:30 · 469 阅读 · 0 评论 -
vue3从零开始(二)
今天学vue3中的setup它是vue项目文件的一个函数,写的地方和data,oncreate,methods等同级。好处:业务逻辑代码集中也就是这样:一、在哪使用<script>export default { components: { }, data() { return{ } }, setup(){ return { } }}</script>同时还有单文件组件语法糖<script原创 2022-03-03 17:09:24 · 1040 阅读 · 0 评论 -
uniapp中echart (renderjs)的tooltip.formatter失效
uniapp echart renderjs tooltip formatter 失效原创 2022-02-18 11:09:28 · 2621 阅读 · 1 评论 -
v-for循环绑定
//绑到dataform.use1、dataform.use2、dataform.use3……<div v-for="(item,index) in ['一','二','三','四','五','六']" v-bind:key="index"> <el-checkbox v-model="dataform[`use${index+1}`]">使用{{item}}号分区</el-checkbox></div>...原创 2022-02-11 16:54:36 · 570 阅读 · 0 评论 -
vue3 components 注册组件时候,用箭头函数来异步注册组件失效?
vue2原先写法:<template> <my-list/></template><script>export default { components: { myList: () => import('./composables/list.vue'), },}</script>现在必须要import from vue<template> <my-list/></t原创 2022-02-10 15:38:30 · 601 阅读 · 0 评论 -
vue中的public文件夹的作用,vue实例部署在index.html
1.首先认识public文件夹的index.html其中部署了vue实例2、public文件夹下的内容不会被webpack打包,webpack打包的作用是相当于把多次用到的内容资源帮你分组分好。原创 2022-02-08 11:11:33 · 3335 阅读 · 0 评论 -
vue3从零开始(一)
vue3创建项目原创 2022-02-08 11:08:40 · 334 阅读 · 0 评论 -
vue 自动匹配table导出为excel 组件(内无excel方法)
<template> <el-button @click="exportExcel" type="primary" icon="icon-daochu">导出</el-button></template><script>import {postExcelFile} from '@/utils/public_func'export default { props: { refName: {原创 2022-01-26 09:39:56 · 100 阅读 · 0 评论 -
es6语法... 点点点语法 单层深拷贝,多层浅拷贝
当拷贝[1,2,34,5]这样的数据是深拷贝当拷贝[{a:1}]这样的数据是浅拷贝原创 2022-01-11 17:11:48 · 266 阅读 · 0 评论 -
vue中 watch computed methord使用的优先级
总结vue自官方文档:https://cn.vuejs.org/v2/guide/computed.html原创 2022-01-10 10:17:30 · 428 阅读 · 0 评论 -
实现自定义通用表格组件
今天写了个表格组件,一开始各种V-if判断,是文字还是icon之类的。然后想到一个好办法,组件代码瞬间减少了一堆。传入数据的时候,是数组对象模式。关键在于构造数据的时候把数据想要的样式名记为属性名。直接上组件代码,app上的,用view代替div,看思路: <view class="font-size-12"> <view class="title"> <view v-for="(item, key) in title" :class="key">{{it原创 2021-12-07 17:01:02 · 249 阅读 · 0 评论 -
JS(ES6)如何优雅的把后台JSON数据存到前端
async fetchData (id) { const params = { idNumber:id } // 构造parms const res = await this.$http(xxxxxxxxxxxxxxxxxxxxxxxxx) // 走接口,存到res const {data, success, message} = res.data // 解构出res中的数据,后面用 if (!success) { // 错误情况处理,错了就return出去原创 2021-11-13 11:38:41 · 1380 阅读 · 0 评论 -
用扩展运算符(...)的时候。基础数据类型和引用数据类型
今天遇到一个问题,要求是这样的。俩页面。a页面是新增XXX,b页面里有个下拉框。要求a页面新增的实时在b页面下拉框里能找到。于是利用页面切换的activated(),每次进B页面重新拉一波下拉框的数据。这时候出现了个问题。因为我下拉框是在B页面的子组件的。B页面打开子组件的时候,构造一个对象传过去要用的。这个原理是:下拉框数据在哪?–一个对象—找这个对象的地址–是prop来的—找prop前的地址–访问地址值拉了表以后,如果用 this.selectList = {...this.selec原创 2021-11-11 16:23:13 · 123 阅读 · 0 评论 -
三种全局部署方法实现防抖
//文件:api/http.jsimport axios from 'axios' axios.defaults.timeout = 5000; //响应时间axios.defaults.baseURL = 'http://localhost:3000'; //配置接口地址let reqList = []/** * 阻止重复请求 * @param {array} reqList - 请求缓存列表 * @param {string} ur原创 2021-11-09 17:33:22 · 1959 阅读 · 4 评论 -
全局防止监听事件重复添加
情景:每次echart图都加了个监听,浏览器缩放,改变echart大小。这时候每次重新画图都会发起新的监听。从而导致监听越来越多。window._addEventListener = window.addEventListener//为了接管事件的同时保证出入参不变,复制一份(复制指针地址不同)const func = new Map()window.addEventListener = (a, b, c) => { if (a !== 'resize') return window._ad原创 2021-10-21 13:57:44 · 682 阅读 · 0 评论 -
缩放浏览器后切换路由导致echart不能显示
当打开一个页面时候,页面中有几个echart图,宽高是根据百分比确定的。这时候切到另一个页面,再缩放浏览器,再切回初始页面,会导致echart图显示不出。这是因为vue中路由切换是有内置组件keep-live,保存了当前页面的属性,相当于给这个页面设置了display:none,当切换再切回去时候,保存的图的属性和当前浏览器大小不匹配,就认为这个图没被加载过,它的的宽高都是0了。解决方案:单个解决:在每页中加个生命周期:activated(){xxxxx.resize()}//找到图的dom元素的名字原创 2021-10-21 13:42:55 · 738 阅读 · 1 评论 -
vue elementui 向table中添加新列 视图刷新慢
需求:点击checkbox,向列表中加新的列,再点击,去除新的列问题:checkbox和table的视图是同时刷新的。点击以后table刷新慢,checkbox要等table,再一起绘图。思路:1.解决table慢的问题。优点:根本途径缺点:这需要减少dom元素,换组件啥的,太麻烦2.让checkbox的视图先绘制,再处理table的视图优点:无缺点:没找到官方给的方法(forceUpdate怎么更新单个组件,延时tick和settime不能够管的上视图绘制)不把checkbox值用v-m原创 2021-10-14 15:50:45 · 559 阅读 · 0 评论 -
时间选择器,起始时间结束时间控制
在两个datapickek中加属性:picker-options="startTime"和`:picker-options=“endTime”在datareturn中加 startTime: { disabledDate: time => { if (this.dataForm1.endTime) { return time.getTime() > new Date(this.dataForm1.endTime).getTime原创 2021-10-07 10:45:25 · 353 阅读 · 0 评论 -
popover 和 v-if 的巧用,自动卸载popver内容
首先说需求;popver打开关闭的同时,完成内部东西的卸载与挂载。这个东西首先要从popver的编译说起,pop窗口被编译在网页的app层,里面的东西也就跟着一起在app层了。这就产生了一个非常不正确的状态情况。刚打开界面的时候。popver没被人点过,里面的内容是未被挂载的状态,一旦pop被点开,被挂载了,再关闭pop,这时候依旧是被挂载在app层的。因此,给你一个没有打开的pop的情况的画面,无法判断pop里面的内容是否被挂载。对于用户来说,同样的画面有两种不同的情况,就很不合理。举例:pop外有原创 2021-09-28 15:24:14 · 533 阅读 · 0 评论 -
文件上传改文件名
element ui的文件上传器是uploader,他里面存的文件打印下来的标准格式是;红色:需要传输的内容form绿色:uploader蓝色:uploader【0】黄色:uploader【0】中的文件部分(raw),如果需要改文件名,就是改raw中的name但是这个file类型的保存方式只可读,不可写。于是我们新建一个文件格式重新保存这个文件就可以了,只是保的时候偷偷改一下他的文件名,代码如下:if (this.dataForm.file[0].raw !== undefined) {原创 2021-09-22 09:50:41 · 833 阅读 · 0 评论 -
select中显示的是内值而不是名字+显示值在下拉列表中没有选中
问题1;select中显示的是内值而不是名字是因为html中value没有动态绑定<el-select v-model="xxxxxx[n-1]"> <el-option label="无" :value="255"></el-option> <!-- 这里的 ↑--> <el-option v-for="n in 60" :key="n" :l原创 2021-09-07 16:08:11 · 284 阅读 · 0 评论 -
v-bind:class使用的小技巧和坑
vue有一个动态绑定的小技巧。假如我想实现:isactive值为1的时候,字体是红色。值为0的时候,字体是绿色<template><div class='father' :class="{ change: isactive }">xxxxxx</div></template><script>export default { data() { return { isactive: 1, }; },}原创 2021-08-30 16:57:46 · 241 阅读 · 0 评论 -
多选回显的时候input框内出现多个选择结果,但是下拉框中没有。
当我们查看某条多选框内数据的时候,input框内是我们已经选好的值这个值,但是在多选框内没有我们选好的值。这是因为我们提取后台数据到dataform的时候,提取的是多选的name属性,而不是id。如果只有name则只会显示在input。...原创 2021-08-30 10:01:36 · 342 阅读 · 0 评论 -
vue中数组一样但是 比较过后显示不一样
如果简单地将两个数组 a===b 显示false这时候加上JSON.stringify()即可if(JSON.stringify(a)===JSON.stringify(b)){}原创 2021-08-25 17:01:46 · 524 阅读 · 0 评论 -
vue中 公用组件、mixin、公用函数(.JS)、vuex 区别
先区别最大的,vuex,vuex是状态管理,数据从index进入vuex,被保存下来,要用的时候来取。公共函数(.js),相当于工具,index处理数据到一半的时候,拿出工具来处理数据。mixin是升级版的.js,index和mixin合体,成为了更高级功能的index,从而处理数据。公用组件,index处理数据的时候,把数据交给公共组件,让他代为处理,处理完了给结果就行。...原创 2021-06-22 16:43:36 · 673 阅读 · 0 评论 -
el-autocomplete自动填充后,表单提示‘请输入***/***不可为空’
明明已经点击自动填充了却没被识别到解决方案更改rules,原创 2021-05-31 16:09:58 · 589 阅读 · 0 评论 -
require内无法用动态变量的坑
毕设做的东西需要一个页面里视频分P的功能。视频分p就是把视频的解析路径改一下,然后一直失败。下面解析一下程序首先,把视频设定从数据库拉下来,存到网页变量里。然后把视频播放器解析视频设定,播放1p。点击按钮2,把视频设定变成2p的视频设定。因为要触发网页的刷新检测,所以用$set。但是require一直报找不到‘…/…/vedio/1.mp4’的错。原因如下:第一行,完全静态,可以。第二行,完全动态,不行。虽然变量里的内容和第一行静态的一样。第三行,一半一半,彳亍。require(pa原创 2021-05-18 17:12:49 · 1998 阅读 · 4 评论 -
表单自动填充
<template> <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="姓名"> <el-autocomplete popper-class="my-autocomplete" v-model="form.name" :fetch-suggestions="querySea原创 2021-05-18 11:11:21 · 527 阅读 · 0 评论 -
vue watch 详解
一、watch用来干嘛用来监控某个变量(对象)的值,每次变化都能被监控到。例子1:给一个问题,在回答框内输入答案,每次输入更改都尝试判断是否正确。注意,没有提交按钮。<template> <div> <span>题目为:</span> {{quiz}} <br> <span>请输入:</span> <el-input v-model="ans"></el原创 2021-05-08 17:00:49 · 630 阅读 · 0 评论 -
vuex配置
一、安装npm install vuex --save二、创建文件src下创建文件夹storestore文件夹下创建store.js内容:import Vue from "vue"import Vuex from "vuex"Vue.use(Vuex)export const store =new store({ state:{ }, getters:{ }, mutations:{ }, actions:{原创 2021-04-16 16:00:35 · 364 阅读 · 0 评论 -
vue elementUI部署、vue路由组件注册
一、把elementUI下载进Vue工程1用cmd创建cuecli工程2用编辑器打开vue工程后再终端输入npm i element-ui -S下载element依赖3部署依赖:打开main.js,再其中添加import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);三行二、引入一个新路由组件1在主页面下<a href="#/newcomponent"原创 2021-04-01 17:09:42 · 164 阅读 · 0 评论 -
vue computed、vue watch、组件、父子组件、模板分离、prop传值、emit传值
一、computed 和 methodscomputed 依赖缓存methods每次都重新执行除此以外注意写法上的不同:二、watch监控watch可以提取到每一次变化发生时,变化后的值和变化前的值三、全局组件1vue.componet("组件名",{template:'.......'})2new Vue({ el: '#app' })四、局部组件1new Vue({ el: '#app' })2components:{"组件名",{template:'.......'}}五原创 2021-03-30 18:00:17 · 441 阅读 · 0 评论 -
创建vue,vue变量,v-html,v-bind,v-if,v-show,v-on,v-model
一、创建vue模板https://www.bilibili.com/video/BV1Cz411v76Ecmd→cd→vue create projectname 接着的设置如下:二、调试、预览package内代码区调试按钮三、基础框架html+js+style<div> </div><!-- --><script> export default{ }</script>原创 2021-03-30 14:38:32 · 395 阅读 · 0 评论