vue
Holly
这个作者很懒,什么都没留下…
展开
-
Cascader 级联选择器编辑之后展开时显示多个层级的问题的三种解决方案
代码:二、强制性暴力操作DOM使用v-if 当级联选择器在对话框el-dialog中使用时直接使用elementUI中自带的属性 destroy-on-close原创 2022-07-08 16:08:27 · 2748 阅读 · 0 评论 -
vue中使用watch监听路由导致多次请求问题解决方法
首先想到的做法就是:直接监听,例:但是这种方法在页面被缓存的情况下,成倍的调用watch里面的方法,多次向后端请求数据,可能会导致溢出有了第一种错误的出现,会想着是否可以将路径存在vuex中统一管理,例:vuex代码 监听路由,将最后路由的结果存进vuex,再使用computed获取这个值:changeRoute,最后再次监听:changeRoute, 结果并没有什么用直接使用watch监听地址栏,和上面的方法相同,依旧是computed获取,watch监听,就不会出现多次请求的情况了原创 2022-07-07 09:42:21 · 3341 阅读 · 1 评论 -
前端vue中treeselect和使用elementUI时el-cascader的某些选项根据状态禁用的实现
基于返回数据在下面这种形式的基础上1、treeselect(注意:重点在:normalizer="my_normalizer")2、el-cascader 注意:他的禁用并不是直接 :disabled="XXX",以下代码是在teamoptions数据内部函数处理,主要是为了在状态为1的数据中添加disabled:true这一项,就可以满足了最后的最后,感谢这位帅哥大佬的帮助ironManYYDS的博客_CSDN博客-领域博主...原创 2022-06-23 16:06:00 · 3333 阅读 · 1 评论 -
vue中treeselect设置成和elementui的size=“mini“属性相同样式
vue中treeselect设置成和elementui的size="mini"属性相同样式原创 2022-06-21 15:39:05 · 1975 阅读 · 0 评论 -
vscode常用插件总结
1、Code Spell Checker检查单词拼写2、Auto Rename Taghtml/xml标签改变,将会成对改变~3、Color Highlight颜色标记4、vscode-icon文件图标5、Turbo Console Log按ctrl+Alt+L可以快速输出console.log6、vetur实现代码高亮..........原创 2022-05-27 10:51:09 · 5472 阅读 · 0 评论 -
Object.keys()和Object.values()的区别和基本用法
目录一、obj对象Object.keys(obj)Object.values(obj)二、内容是字符串Object.keys(str)Object.values(str)总结:keys搞名字,values搞内容,和键值对的key,value相同一、obj对象const obj = { name: { userName: '张三', age: '1' ...原创 2022-05-27 10:19:15 · 539 阅读 · 0 评论 -
vuex基础总结
组件调用state里边的内容时:this.$store.state.XXX调用getters里边的内容时:this.$store.getters.XXX直接通过mutation更改数据,this.$store.commit('app/SET_SIZE', this.size)const mutations = { SET_SIZE : (state,size)=>{state.size = size}}调用actions里边的方法,然后通过mutat原创 2022-03-22 09:34:33 · 520 阅读 · 0 评论 -
vue父子组件之间传值(ref)
父组件:<Student ref="student" />methods:{getName(){ console.log("学生名:",name)}}mounted(){//当自定义事件sName被触发时 this.$refs.student.$on('sName',this.getName)}子组件:<button @click="sen...原创 2022-02-09 10:33:01 · 2422 阅读 · 0 评论 -
elementUI+vue实现分页效果
分析重点:子组件将当前页码传递给父组件,然后父组件接收当前页码父组件将数据总数传递给子组件代码:子组件:父组件:原创 2021-12-23 15:07:02 · 564 阅读 · 0 评论 -
vue3使用teleport实现弹窗效果
目录1、例子:点击出现弹窗2、样式3、弹窗遮罩效果如何实现teleport能够将我们的组件html结构移动到指定位置1、例子:点击出现弹窗 <button @click="isShow = true">点击出现弹窗</button> <div class="showPart" v-if="isShow"> <teleport to="body"> <div class="part">原创 2021-12-20 15:15:57 · 628 阅读 · 0 评论 -
vue2自己创建文件时的选择
原创 2021-12-09 13:47:57 · 195 阅读 · 0 评论 -
兄弟组件间的通信方式(主要介绍两种)
第一种:全局事件总线第二种:vuex第三种:订阅发布原创 2021-12-07 11:18:59 · 3956 阅读 · 0 评论 -
VUE路由
一、准备1、安装路由npm i vue-router2、在main.js文件中引入VueRouter 并应用插件import Vue from 'vue'import App from './App.vue'//引入VueRouterimport VueRouter from 'vue-router'// 引入路由器import router from './router/index'//关闭vue的生产提示Vue.config.productionTi.........原创 2021-12-03 15:14:53 · 226 阅读 · 0 评论 -
vue插槽:默认插槽,具名插槽,作用域插槽
目录1、默认插槽2、具名插槽3、作用域插槽1、默认插槽父组件中:<category> <div>hello</div></category>子组件中:<template> <div> <slot></slot> </div></template>2、具名插槽template可以包裹元素.原创 2021-12-02 10:04:11 · 437 阅读 · 0 评论 -
vue解决跨域的方法------配置代理
方法一在vue.config.js中添加如下配置:devServer:{ proxy:"http://localhost:5000"}缺点:不能配置多个代理,如果请求了前端存在的资源,就会优先匹配,只有前端资源不存在时才会转发给服务器方法二:module.exports = { devServer: { proxy: { '/test': { target: 'http://localhost:8000', .原创 2021-12-01 16:19:03 · 220 阅读 · 0 评论 -
vue子父组件之间的传值
目录1、父组件向子组件传值其他接收方式总结:2、子组件向父组件传递数据找到了两张比较清晰的图片,1、父组件向子组件传值子组件需要用props来接收数据,父组件需要动态绑定想要传递给子组件的数据父组件::chooseAllData="tableData"子组件: props: { chooseAllData:{ default:11111 } },其他接收方式总结:2、子组件向父组件传递数据子组件: <.原创 2021-11-29 10:25:25 · 11643 阅读 · 0 评论 -
手机端ios适配
1、使用element-ui时,select需要点击两次的问题 /*el的select点击两次问题*/ .el-scrollbar .el-scrollbar__bar { opacity: 1 !important; }2、页面不固定,会出现放大效果 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,u原创 2021-10-19 11:18:58 · 61 阅读 · 0 评论 -
weui的使用(多级联动选择器)
1、引入vue.js,weui的js文件和css文件(不过好像看其他文章上说weui的js文件要放到最底层才会起作用,但是我暂时没遇到这个问题) <!-- 引入vue --> <script src="https://www.jq22.com/jquery/vue.min.js"></script> <!-- 引入weui框架及js --> <link rel="stylesheet" href="/static/w原创 2021-10-19 10:57:33 · 1565 阅读 · 1 评论 -
weui实现(单列选择器)
1、插入weui的js,css和vue.js(weui的css和js版本需要对应)<!-- 引入weui框架及js --> <link rel="stylesheet" href="/static/weui/weui.min.css"> <script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script>原创 2021-10-18 15:21:35 · 1159 阅读 · 0 评论 -
weui实现(日期 年-月-日 滚动选择)
引入weui的js,css文件和vue.js1、引入(引入weui的js文件和css文件必须必须是对应的!,不然的话后期显示样式会非常乱!)<link rel="stylesheet" href="/static/weui/weui.min.css"><script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script>2原创 2021-10-18 15:16:36 · 1126 阅读 · 1 评论 -
全局组件,局部组件,插槽的用法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 引入vue ..原创 2021-10-12 15:35:45 · 115 阅读 · 0 评论 -
template标签的用法总结
Template标签用法总结 - Happy work, happy life一、html5中的template标签html中的template标签中的内容在页面中不会显示。但是在后台查看页面DOM结构存在template标签。这是因为template标签天生不可见,它设...http://www.klxxb.com/index.php/archives/23.html...原创 2021-10-12 10:26:39 · 457 阅读 · 0 评论 -
保留一位小数
var f = Math.round(totalPrice * 10) / 10先将所得的总价先乘以10,然后使用Math.round()函数取最接近的整数后,再除以10就可以得到正确的值了。如1.65*10=16.5,取整后为17,再除以10就得到了1.7,保留1位小数又能够四舍五入了,同理保留两位小数也一样先乘以100取整后再除以100就行了。自己用于(BMI):let h = Number(res.h) //身高 let w = Number(res.w) //体重...原创 2021-06-30 15:53:22 · 1640 阅读 · 0 评论 -
vue模糊知识点《二》
14、路由<router-link><router-view>的用法 路由的重定向:{path:'/',redirect:'/home'},path后边的 / 加与不加都是可以的 hash与history,将默认的hash模式改成history模式,const router = new VueRouter({routes,mode :'history'})...原创 2021-08-31 09:10:44 · 48 阅读 · 0 评论 -
vue模糊的知识点《一》
1,v-html可以用来设置值2,v-bind:id可以直接写成:id(语法糖)3,v-if和v-show的区别:参考链接https://www.jianshu.com/p/7af8554d8f084,<a v-on:click="doSomething">习惯性写成@click。v-on 指令,用于监听 DOM 事件5,v-model双向绑定6,splite(' ')可以将字符串按某个字符或者其他分割。返回数组。reverse()该方法会改变原来的数组,而不...原创 2021-08-17 13:56:07 · 56 阅读 · 0 评论 -
脚手架安装保姆级过程
一,安装node.js链接:https://nodejs.org/en/download/查看电脑是多少位的(64/32)因此下载的 版本如下:查看安装是否成功以管理员身份打开cmd,输入:node -v二,安装npm如果想要安装速度快一点的话,可以安装淘宝镜像npm i -g cnpm --registry=https://registry.npm.taobao.org成功之后把npm改成cnpm就可以了如果已经安装了vue-cli1.x或者2.x .原创 2021-08-31 09:33:10 · 73 阅读 · 0 评论