分类：Vue

2020
10-10

Vue中component标签解决项目组件化操作

一、??录妇?/strong>在vue项目组件化的过程中，遇到了一些问题，什么问题呢？就是在做一个多功能，多可用，多兼容的大组件的时候，发现在这个组件内部，实现了太多的if、for逻辑，包括大量的html元素，虽然说每段功能块都有批注，但是体积还是比较庞大，最近有些需求，需要将页面上的一大块筛选功能剥离开，形成单独的组件，统一数据渲染，统一组件管理，且这些功能无论是样式，或者是从结构来说，差异性都很大，所以考虑了以下几... 继续阅读 >

2020
10-10

解决vue scoped scss 无效的问题

今天遇到scoped内部的scss设置无效，解决办法如下：/deep/<stylescopedlang="scss">.position-el-steps{/deep/.el-step.is-vertical{.el-step__description{margin-top:-20px;}.el-step__line{border-left:2pxdashed#c0c4cc;background-color:transparent;visibility:visible!important;}}}补充知识：【vuescoped样式修改】框架或插件组件样式更改及/deep/警告前言在做vue项目的时候，很多人应该... 继续阅读 >

2020
10-10

基于vue中的scoped坑点解说

今天在覆盖iview组件样式的时候发现一个问题，就是无法覆盖组件原有的样式，最后在github的issue中找到了答案：不要使用scoped属性。于是我查找了下关于scoped的文章。我们假设把这种组件叫做模块私有组件，其他的未加scoped的叫做模块一般组件。通过查看DOM结构发现：vue通过在DOM结构以及css样式上加唯一不重复的标记，以保证唯一，达到样式私有化模块化的目的。代码如下：//valChange.less(使用了嵌套规则)#valueSlide{.bigSl... 继续阅读 >

2020
10-10

VUE : vue-cli中去掉路由中的井号#操作

vue-cli项目中，如果想去掉url地址栏中的“#”我们可以用路由的history模式，这种模式充分利用history.pushStateAPI来完成URL跳转而无须重新加载页面。只需要在路由表中，加入一行代码即可。补充知识：vue打包部署去掉#注意事项示例基于vuecli2.0脚手架生成的项目1.vue项目中config文件下index.js中打包配置：build:{//Templateforindex.htmlindex:path.resolve(__dirname,'../dist/index.html'),//Pathsasse... 继续阅读 >

2020
10-10

Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现

今天我们使用本地缓存localStorage来实现页面刷新了，验证码倒计时还是和刷新时一样，而不是清零，其次我们可以使用localStorage去实现用户信息缓存，记住密码等等关于缓存的功能，在这里就简单演示一下验证码功能。一、功能实现话不多说，直接上代码<template><button@click="getCode()":disabled="!show"><spanv-show="show">发送验证码</span><spanv-show="!show"class="count">{{count}}s</span></button></templa... 继续阅读 >

2020
10-10

vue深度监听(监听对象和数组的改变)与立即执行监听实例

1.vue中监听对象数据属性值的改变，可以使用深度监听data(){return{form:{status:'',cpufrequency:'',systemstacksize:'',scalabilityclass:''}}},watch:{form:{//深度监听handler(val,oldVal){console.log('currentForm',val,oldVal)//但是这两个值打印出来却都是一样的,因为它们的引用指向同一个对象/数组},deep:true}}注意：我们应尽量避免在监听方法中更改... 继续阅读 >

2020
10-10

解决vue中axios设置超时(超过5分钟)没反应的问题

（chrome环境）在做项目的时候，由于做大数据可视化界面，后台接口查询数据往往会比较久（上百万的数据量），导致vue项目axios请求超时timeout设置就比较大。开始设置超时未3分钟时没有问题（这里我设置超时弹窗了），可设置超时未6分钟时，却在五分钟左右弹出请求超时，但明明设置tiemout=6x60x1000。于是通过资料查询，了解到Chrome浏览器，默认请求超时为五分钟，所以导致上诉现象产生，可如何在vue中修改浏览器超时？直接上代... 继续阅读 >

2020
10-10

在vue中axios设置timeout超时的操作

在做vue项目的时候，由于数据量查询比较大，所以前台调用接口数据的时候，往往要等很久，所以需要设置个超时，当超过设置时间就让向页面返回一个状态，让使用者不用一直等。通过官网api查询，对其超时讲解不是很多，但其和Jquery中请求非常类似Jquery请求方式$.ajax({url:'接口地址',type:'get',//请求方式get或postdata:{},//请求所传的参数dataType:'json',//返回的数据格式timeout:4000,//设置时间超时，单位毫秒s... 继续阅读 >

2020
10-10

vue 路由meta 设置导航隐藏与显示功能的示例代码

vue路由meta设置title导航隐藏，具体代码如下所示：router.jsroutes:[{path:'/',name:'HelloWorld',component:HelloWorld,meta:{title:"HelloWorld",要现实的titleshow:true设置导航隐藏显示}}]App.vue<template><divid="app"><router-view></router-view><bottomv-show="this.$route.meta.show"></bottom>this.$route.meta.show显示或隐藏... 继续阅读 >

2020
10-10

Vue 禁用浏览器的前进后退操作

一.禁用前进后退功能在开发vue应用中，如何禁用浏览器的前进后退功能呢？网上搜到的答案基本如下：history.pushState(null,null,document.URL)window.addEventListener('popstate',function(){history.pushState(null,null,document.URL)})但应该放在哪儿？经过尝试，我是如此写的：main.js中，增加popstate监听window.addEventListener('popstate',function(){history.pushState(null,null,document.URL)})router的in... 继续阅读 >

2020
10-10

vue将data恢复到初始状态 && 重新渲染组件实例

1.将data恢复到初始状态Object.assign(this.$data,this.$options.data())//初始化data这里的this.$options.data()作为源对象，this.$data作为目标对象。源对象覆盖并合并目标对象中的内容，即有则覆盖，无则添加。2.重新渲染组件方法一：v-if（可以重置生命周期）虽然能实现重新渲染，但不推荐首选方法二：给组件加key值【推荐】通过修改key的值，就会重新渲染该组件方法三：this.$forceUpdate()迫使Vue实例重新渲染。... 继续阅读 >

2020
10-10

vue中的循环对象属性和属性值用法

v-for除了可以循环数组，还可以循环对象。例子：<template><div><divv-for="(item,i)inobj">{{i}}--{{item}}</div></div></template><script>exportdefault{name:"HelloWorld",data(){return{obj:{age:1,name:"zs",sex:"男"}};}}</script><stylelang="css"scoped></style>结果：补充知识：Vue控制路由滚动行为跳转路由时，要求跳转到指定路由的某个地方，可以使用scrollBehavior方法控制。用法：scrollBehav... 继续阅读 >

2020
10-10

Vue自定义组件双向绑定实现原理及方法详解

前言无论在任何的语言或框架中，我们都提倡代码的复用性。对于Vue来说也是如此，相同的代码逻辑会被封装成组件，除了复用之外，更重要的是统一管理提高开发效率。我真就接手过一个项目，多个页面都会用到的列表，没有去封装列表组件，只要有一点改动，每个页面都得加上。很肯定的说，没有用组件化开发的Vue项目是没有灵魂的。所以如何封装一个优雅且复用性高的组件成为我们必需的技能。Tab自定义组件首先来看一个Tab组件的实现，看... 继续阅读 >

2020
10-10

Vue通过provide inject实现组件通信

provide/inject是Vue.js2.2.0版本后新增的API：provide：Object|()=>Object//一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。inject：Array<string>|{[key:string]:string|Symbol|Object}//一个字符串数组，或一个对象虽然官方文档说，provide和inject主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中，但是在插件/组件库（比如iView，事实上iView的很多组件都在用）。不过建议... 继续阅读 >

2020
10-10

Vue组件通信$attrs、$listeners实现原理解析

前言vue通信手段有很多种，props/emit、vuex、eventbus、provide/inject等。还有一种通信方式，那就是$attrs和$listeners，之前早就听说这两个api，趁着有空来补补。这种方式挺优雅，使用起来也不赖。下面例子都会通过父、子、孙子，三者的关系来说明使用方式。$attrs官方解释：包含了父作用域中不作为prop被识别(且获取)的特性绑定(class和style除外)。当一个组件没有声明任何prop时，这里会包含所有父作用域的绑定(cla... 继续阅读 >

2020
10-10

Vue父组件监听子组件生命周期

比如有父组件Parent和子组件Child，如果父组件监听到子组件挂载mounted就做一些逻辑处理，可以通过以下写法实现：//Parent.vue<Child@mounted="doSomething"/>//Child.vuemounted(){this.$emit("mounted");}以上需要手动通过$emit触发父组件的事件，更简单的方式可以在父组件引用子组件时通过@hook来监听即可，如下所示：//Parent.vue<Child@hook:mounted="doSomething"></Child>doSomething(){console.log('... 继续阅读 >