![](https://img-blog.csdnimg.cn/20200901110106372.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue
vue
就叫小黄好了鸭
干!!!
展开
-
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘0‘)
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '0')原创 2022-10-20 14:29:42 · 1768 阅读 · 0 评论 -
新一代状态管理工具 -- Pinia 上手指南
一:Pinia简介和五大优势Pinia是vue生态里Vuex的替代者,一个全新的vue状态管理库。在Vue3成为正式版以后,尤雨溪强势推荐的项目就是Pinia。那先来看看Pinia比Vuex好的地方,也就是Pinia的五大优势。可以对Vue2和Vue3做到很好的支持,也就是老项目也可以使用Pinia。抛弃了Mutations的操作,只有state、getters和actions.极大的简化了状态管理库的使用,让代码编写更加容易直观。不需要嵌套模块,符合Vue3的Composition api原创 2022-03-30 18:33:27 · 26219 阅读 · 14 评论 -
vue源码 - 模板解析(手写简易版)
vue.jsclass Vue { constructor(options) { this.$el = document.querySelector(options.el) this.$data = options.data console.log(options.el); // #app this.compile(this.$el) } compile(node) { con原创 2022-03-28 19:58:51 · 1377 阅读 · 0 评论 -
Vant - checkBox组件 阻止事件冒泡
Vant - checkBox组件 阻止事件冒泡使用 @click.stop.native="()=>{}"<div class="left" v-if="isShowCheckBox"> <van-checkbox v-model="isChecked" checked-color="#00B955" @change="checkBox()" @click.stop.native="()=>{}" ></van-checkbox>&l原创 2022-03-02 11:07:36 · 2063 阅读 · 0 评论 -
ElementUI el-input 只允许输入数字和两位小数
方法一1、页面效果2、FORM表单<el-form-item label="审计价格(元)" prop="auditPrice"> <el-input v-model="form.auditPrice" oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入审计价格" /></el-form-item>3、校验规则 data() { const validate原创 2022-02-08 11:35:18 · 1012 阅读 · 0 评论 -
vant --- DropdownMenu下拉菜单有白边问题
解决代码:<style >.van-dropdown-menu__bar{ box-shadow: unset !important; /* 解决van-dropdownMenu下拉菜单有白边问题 */} </style>例子:原创 2021-12-30 19:19:19 · 803 阅读 · 0 评论 -
VUE --- 将HTML格式转换为纯文本
html代码:<div>{{ToText(item.input)}}</div>js代码:methods:{ ToText(HTML) { var input = HTML; return input.replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi,'').replace(/<[^>]+?>/g,'').replace(原创 2021-12-28 13:03:25 · 1649 阅读 · 0 评论 -
解决el-input输入框使用oninput或onkeyup后,v-model双向绑定失效问题
解决el-input输入框使用oninput或onkeyup后,v-model双向绑定失效问题在输入中文触发oninput后,v-model绑定的值会被设成空字符串,这时候再输入数字,v-model绑定的值不会被赋值,一直为空。解决方法可以用blur手动给绑定的值赋值。<el-input v-model="form.account" clearable placeholder="请输入编号" onkeyup="value=value.replace(/[^0-9]/g,'')" @b原创 2021-12-22 20:31:00 · 3361 阅读 · 5 评论 -
在ElementUI的 MessageBox 弹框 按钮上 进行api接口请求
在ElementUI的 MessageBox 弹框 按钮上 进行api接口请求一.点击按钮,弹出弹框二.点击确认 进行请求(用.then 不用async await ,解决promise获取数据出作用域后undefined的问题)代码 // 转为内部用户 handleToInternalUser(row){ console.log("转为内部用户...",row); this.$confirm('是否确认将该医生从外部用户转换为内部用户','提示',{原创 2021-12-09 20:00:14 · 2087 阅读 · 0 评论 -
axios --- 接口层 添加自定义请求头
在接口层 添加自定义请求头api/myinfo.js ---- 在定义接口的地方utils/channelLogin.js ---- 在调用接口的地方原创 2021-12-08 11:49:21 · 372 阅读 · 0 评论 -
iview + vue table分页勾选记忆
第一步(勾选):已知给 data 项设置特殊 key _checked: true 可以默认选中当前项第二步(取消勾选):第三步(全部勾选):第四步(取消全部勾选):原创 2021-11-10 20:14:46 · 834 阅读 · 0 评论 -
vue + iview 实现 前端分页 + 搜索
第一步:第二步:第三步:第四步(切换页码请求接口的情况):第五步(切换页码不请求接口的情况):第六步:全部代码:<template> <div> <Card> <Input v-model="entryName" placeholder="请输入项目名称..." style="margin-left:20px" clearable></Input> &原创 2021-11-10 19:39:38 · 1222 阅读 · 0 评论 -
iview + table 插入input框 并 实现双向绑定
iview + table 插入input框参考iview官网文档:iview官方文档代码:代码:<template> <div> <Card> <Table ref="table" editable :data="tableData" :columns="columns" stripe></Table> </Card> </div>&l原创 2021-11-10 16:45:38 · 1667 阅读 · 0 评论 -
npm install 没有创建 node_modules 文件夹
npm install 没有创建 node_modules 文件夹npm install没有创建node_modules文件夹,只生成package-lock.json文件方法一:手动删除package-lock.json文件npm cache clean --force安装npm install这时还是没有node_modules文件夹的话方法二:手动删除package-lock.json文件npm install express --save出现node_module原创 2021-09-16 09:47:32 · 2400 阅读 · 0 评论 -
vue中阻止click事件冒泡(防止触发另一个事件)的方法
方法一:使用vue阻止子级元素的click事件冒泡。简单得:可以直接用stop<div @click="test1()"> <span @click.stop="test2()">按钮1</span> <span>按钮2</span> </div>这样点击div里面的按钮1,就不会触发div绑定时间test1()方法。方法二:可以自己写个阻止冒泡事件 然后在发生冒泡的元素中调用这个事件@原创 2021-08-25 18:23:31 · 42255 阅读 · 2 评论 -
序列化请求参数
在前端请求中,或者跳转页面的时候,往往需要在地址后面加一些参数,但是参数多了之后,一个一个拼接很麻烦,所有为大家提供一个方法function serializeData(obj){ let str='?' Object.keys(obj).forEach(function(key){ str+=key+"="+obj[key]+'&' }); var reg=/&$/gi; str=str.replace(reg,""); //清除最后一个&原创 2021-07-19 11:27:26 · 214 阅读 · 0 评论 -
Vue+Element组件el-table添加表头全选文字
html部分: <el-table v-if="showTable" class="inter_table" :data="apiList.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100% !important;" border @selection-change="handleSel原创 2021-07-15 17:18:23 · 1385 阅读 · 0 评论 -
TypeError: this.getOptions is not a function
TypeError: this.getOptions is not a function今天启动公司的项目,然后给项目安装了less-loader模块之后报错,如下图:原因:less-loader安装的版本过高解决方案:1.npm uninstall less-loader2.npm install less-loader@5.0.0...原创 2021-03-05 18:21:13 · 1172 阅读 · 0 评论 -
Vue中使用ref
Vue中使用ref我们虽然在使用vue的时候是不会去操作它的dom的,但是最近,我在做vue项目的时候,遇到了某些情况,不得不去操作它的dom,那么遇到这种情况,我们应该如何去处理呢?我们使用ref去绑定到div中,之后我们通过this.refs(获取到div中所有的引用)下面是具体的例子:<template> <div class="fans-container"> <!-- 1. 为 ECharts 准备一个具备大小(宽高)的画布容器 DOM --&g原创 2020-11-02 09:44:19 · 799 阅读 · 0 评论 -
今天使用vue可视化工具创建vue项目时,一直卡住不动,无法创建的解决办法
今天使用vue可视化工具创建vue项目时,一直卡住不动,无法创建的解决办法:步骤一:根据以下路径找到以下文件(我的node.js是默认安装在了c盘)步骤二:打开此文件,修改useTaobaoRegistry为true,保存关闭,重新创建vue项目,成功!注意:如果你打开后是true,建议改成false再试一试(我的就是改为false后创建成功了)...原创 2020-09-01 12:38:29 · 5666 阅读 · 6 评论 -
cmd中无法识别vue ui命令
cmd无法识别vue ui命令步骤一:在当前cmd窗口下输入命令:vue -h(这是查看vue说明的在项目看有没有ui这个命令)如果你那里面没有这个ui 的话估计是你的vue-cil版本低建议升级下版本步骤二:按下win键点下面的Node.js进去之后输入:npm i -g @vue/cli更新好之后查看版本:vue -V步骤三:重新打开cmd窗口,输入vue ui命令完成!!!...原创 2020-09-01 10:58:04 · 1279 阅读 · 0 评论 -
vue知识点归纳与总结(笔记上部分)
前言当前总结是本人在业余学习与实践过程后的总结与归纳,旨在检验自己的积累,也方便忘记时查阅,同时也希望能帮助那些这方面知识匮乏的同行门。如有不对,或不足的地方,也请各位大神,指出来,学习学习。一 Vue 基础1.模板语法 (1)插值 a.文本 {{}} b.纯HTML v-html ,防止XSS,csrf( (1) 前端过滤 (2) 后台转义(< > <原创 2020-05-30 22:00:17 · 581 阅读 · 2 评论 -
vue成才之路~对vue生命周期的理解
vue的生命周期:vue实例从创建到销毁的过程称之为vue的生命周期首先先看看官网文档的图,上面详细的给出了vue的生命周期:在这个官方文档的图中我们可以清楚地看到 Vue 的整个生命周期和它所提供的钩子函数。钩子函数beforeCreate: 实例创建前:这个阶段实例的data、methods是读不到的created:实例创建后:这个阶段已经完成了数据观测(data observer),属性和方法的运算, watch/event 事件回调。mount挂载阶段还没开始,$el 属性目前不可见,原创 2020-05-28 18:36:32 · 853 阅读 · 3 评论