Vue学习日志
凡尘向天
这个作者很懒,什么都没留下…
展开
-
Vue学习(二)
响应式原理defineProperty API(Vue2实现响应式的原理)针对属性监听,不能监听数组,实际上能监听到数组下标变化,但由于性能代价较大被放弃。let getDouble = n=>n*2let obj ={}let count = 1let doubule = getDouble(count)Object.defineProperty(obj,'count',{ get(){ return count } set(val){ count =.原创 2022-02-22 19:18:44 · 197 阅读 · 0 评论 -
vue3学习(一)
数据发生变化后,如何通知页面更新?Angular1:脏检查,在对数据变化的检查上,遵循每次用户交互时都要检查一次数据是否变化,有变化就去更新DOM。这一方法是数据驱动页面早期的实现。后期Angular引入TypeScipt、RxJS等新内容,但是不支持向前兼容导致Angular这个框架国内没有大面积推广。Vue1:响应式,初始化的时候,Watcher监听数据的每个属性,这样数据发生变化的时候,就能精确地知道数据的哪个key变了,去针对性修改对应的DOM。在网页中使用{{}}渲染一个变量,Vue1就.原创 2022-02-17 09:23:43 · 396 阅读 · 0 评论 -
webScoket 长连接 在Vue项目中使用(实现1操作屏3展示屏的分屏效果)
1.在操作屏 设置发送长连接请求// 长连接 方法methods :{sendWebSocket (data) { let sendData = data // 连接后台 var vm = this vm.websocket = new WebSocket('ws://localhost:8010/webSocket') //...原创 2019-12-26 09:40:41 · 1977 阅读 · 0 评论 -
vue 项目中实现懒加载 左侧图片不显示问题
1.首先 需要 引入第三的插件库npm install vue-lazyload --save-dev2.在入口文件``import VueLazyLoad from ‘vue-lazyload’Vue.use(VueLazyLoad)// 如果不设置 loading 那么预加载的时候显示的图片就是它本身data-src 路径下的图片,所以在这我就没设置其它的实属性了3.组件内对背...原创 2019-12-26 11:49:51 · 1080 阅读 · 1 评论 -
解决form表单数据提交时,字符串数组JSON.stringfy()后内部引号转译“//“,
data(){ return{ //表单提交数据 formDate:{ ..., checkList: ['email','SMS'],//通知方式 } }}//在提交的时候,由于后端需要接受的是字符串所以我第一解决思路是add(){ this.formDate.checkList = JSON.stringfy(this.formDate.checkList) // "['email','SMS']" //提交请求 addFrom(this.formDate).t原创 2021-03-27 15:58:28 · 1178 阅读 · 0 评论 -
深拷贝失效
1.使用es6解构赋值可以对对象进行深拷贝。let arr1,arr2arr1=[{'key1':1,'key2':2}];arr2 = [...arr1]arr1=[{'key1':3,'key2':4}];console.log(arr1)console.log(arr2) 2.使用object对象assign方法可以对对象进行深拷贝。let testObj1,testObj2testObj1 = [{'key1':1,'key2':2}];testObj2 = Object.原创 2021-02-09 15:30:05 · 637 阅读 · 0 评论 -
vue refs 动态给元素添加聚焦
1.我使用回车提交数据,但是我在选择下拉菜单后,虽然提交了请求,但是element ui 的元素会处于聚焦状态你的回车会是的下拉框再次下拉下去(可自行去element select 组件 尝试)于是我就想到解决办法,像在下拉change时间后,转移焦点,将焦点转移到输入框。 <el-input ref="input" placeholder="添加日程至“今日日程”,回车即可创建" v-model="formData.planName"原创 2020-11-26 15:42:02 · 4346 阅读 · 0 评论 -
echarts柱状图legend分2行排列
/** 讲legend分成2个,然后排列方式变成水平排列,最后使用* bottom来讲将 2着区分开*/ legend:[{ orient: 'horizontal', itemWidth: 10, itemHeight: 10, left:'2%', bo原创 2020-07-02 11:52:06 · 4000 阅读 · 0 评论 -
css 样式 超过div宽度单行时自动换行,超过多行时省略号显示
word-wrap: break-word;/*自动换行*/ text-overflow: ellipsis;/*超出部分省略号显示*/ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;/*自动换行后,多行显示,设置多少行后不在换行而是省略号显示*/ overflow: hidden;...原创 2020-06-29 16:11:04 · 979 阅读 · 0 评论 -
vue 实现多行文本 超出行数后 省略号,出现查看全文按钮,点击 展示全文
HTML <el-card class="box-card" shadow="hover" v-for="(moodEssayDate,index) in moodEssayDates" :key="moodEssayDate.pk_moodEssay"> <div class="card"> <div class="cardL...原创 2020-04-08 15:05:46 · 3961 阅读 · 0 评论 -
vue解决 this.refs 拿取 v-for下元素undefine问题
1.问题我想从 v-for 底下拿取一个 ref=“articleContent”的div<el-card class="box-card" shadow="hover" v-for="(moodEssayDate,index) in moodEssayDates" :key="moodEssayDate.pk_moodEssay"> <div clas...原创 2020-04-08 13:09:16 · 1897 阅读 · 0 评论 -
vue 解决路由切换 网页音乐播放器继续播放音乐问题(模仿pjax 原理,解决个人网站局部刷新问题)
1.思路vue 缓存 加 局部刷新 ,起到路由切换时,内容发生改变但是不刷新界面,从而实现网页音乐播放器一直播放同一首歌,而不是随着页面刷新停止播放,2 解决步骤vue 实现缓存(keep-alive)首先是路由设置// 在路由的 meta属性中设置keepAlive:trueexport default new Router({ routes: [ {path: ...原创 2020-04-06 00:55:47 · 4338 阅读 · 8 评论 -
Vue +element 用filter 对el-tree树形控件过滤
1.定义一个搜索框 <el-input v-model="filterText" :placeholder="$t('refersetting.HereInputKeyWord')" clearable maxlength="2000" /> // clearable 属性 搜索框后面可以出现个删除图标,一下就能删除搜索框内容2.在data 中 绑定 搜索框v-m...原创 2019-12-26 10:34:27 · 16828 阅读 · 8 评论 -
vue + element 实现 filter对表格数据进行过滤
1.首先定义 一个搜索框 <el-input class="childTable-input" v-model="queryKeyCode" :placeholder="$t('refersetting.Options')" clearable maxlength="2000" />2.在 data中 生命 v-model 绑定的全局变量 data() { ret...原创 2019-12-26 10:18:57 · 8314 阅读 · 1 评论 -
vue+element 多选框选中翻页后多选框取消了选中 问题解决
1.问题当我选中数据时,如下图,当我翻页回来时,如下图2.解决首先找到 你的el-table 加上row-key 然后在你的 el-table-column(type = selection)这一列上 加上 reserve-selection 就可以了,但是 你的row-key 的得是...原创 2019-12-26 08:59:27 · 4517 阅读 · 9 评论 -
Vue 项目 npm run dev时报错 Refused to load the image 'http://localhost:8099/favicon.ico' because it vio
1.我在那到一个同时给我的vue 项目,我用idea打开后用npm install 初始化,这个时候都没问题,但是当我 npm run dev 的 时候,idea的控制台就出现error ,Module build failed: Error: Missing binding C:\Users\Lenovo\Desktop\2\DigitalExperienceHall\node_modules...原创 2019-12-10 17:31:43 · 1719 阅读 · 0 评论