![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue技巧
zx&it
这个作者很懒,什么都没留下…
展开
-
vue中使用aos.js动画库
AOS.js页面滚动动画库CSS3演示效果。原创 2022-12-19 10:33:50 · 1946 阅读 · 1 评论 -
vue 系列 实现防抖节流 (防止暴力点击)
防抖节流原创 2022-12-08 13:16:46 · 2918 阅读 · 0 评论 -
el-input框输入数字千分位保留两位小数显示,传给后端转为正常数字。
el-input框输入数字千分位保留两位小数显示,传给后端转为正常数字。转载 2022-11-14 10:36:51 · 3430 阅读 · 1 评论 -
input框限制输入数字,并限制输入小数后2两位。
思路:1、使用input输入事件;2、使用正则表达式结合replace替换输入的非数字。原创 2022-09-30 18:07:25 · 4478 阅读 · 0 评论 -
通过定义自定义指令v-dialogDrag,实现元素(弹框)拖拽移动。
1.创建dialogDrag.js文件,通过可见区域进行逻辑处理。代码如下:(可直接复制使用)import Vue from 'vue'; //引入vue// 指令v-dialogDrag: 弹窗拖拽Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header');原创 2022-03-10 16:11:26 · 2230 阅读 · 0 评论 -
vue3.x模板引用(通过ref获取dom节点)
在vue2.x中:<div ref="dom"></div>this.$refs.dom即可获取到div的dom节点但在vue3.x中不能通过this.$refs获取。正确获取的方式如下:<div ref="dom"></div>setup(){const dom = ref(null);onMounted(()=>{console.log(dom.va...原创 2022-01-04 17:37:18 · 985 阅读 · 0 评论 -
vue3.x常用的watch监听方式
方式一:监听单个基本数据类型(ref),(ref定义的基本类型使用watch监听时候不需要.value) watch(sum, (newVal, oldValue) => { console.log(newVal, oldValue); });方式二:监多个基本数据类型(ref) watch([sum, tips], (newVal, oldValue) => { console.log(newVal, oldValue);// [12...原创 2022-01-04 16:48:41 · 2496 阅读 · 0 评论 -
vue中swiper,vue-awesome-swiper实现轮播;鼠标移入暂停,移除播放;点击暂停按钮暂停,再点击播放。
因为swiper和vue-awesome-swiper的版本较多,如果使用最新的版本,或者两者版本差距较大,就容易掉进很多的坑里面,各种报错。切记,版本一致,建议使用@3.X版本。首先,安装swiper和vue-awesome-swipernpm install swiper@3 vue-awesome-swiper@3 --save然后,按需引入项目文件 import { swiper,swiperSlide } from "vue-awesome-swiper";原创 2021-10-11 22:08:05 · 5473 阅读 · 0 评论 -
当在vue项目中使用滚动监听时,页面跳转后,报错Uncaught TypeError: Cannot read property ‘offsetTop‘ of undefined at VueComp
vue生命周期钩子函数mounted,beforeDestroyoffsetTop of undefined这个错误,是因为我在mounted页面加载的时,通过addEventListener给window添加了scroll滚动事件。当页面跳转后,没有自动销毁scroll的监听事件,所以会报错,但不影响功能。要避免这样的报错,我们就需要手动在beforeDestroy销毁阶段来销毁这个滚动监听事件就不会报错了。如下代码: mounted() { //加载阶段创建scr..原创 2021-09-16 18:12:21 · 1658 阅读 · 0 评论 -
vue组件间相互传值
一般vue的组件之间的传值分为:父组件传子组件,子组件传父组件,任意组件之间传值。1.父组件传子组件:(父组件通过v-bind(可以缩写为 :)发送,子组件通过props接收)//父组件中引入子组件B<B v-bind:msg="msg"></B>import B from './B.vue'data(){ return{ msg:'父组件给给子组件B的值' }},components:{ B}//子组件B,通过原创 2021-09-12 21:26:42 · 1472 阅读 · 0 评论 -
vue的动态组件和<keep-alive>的使用
1.动态组件<component>可以实现动态组件的切换显示隐藏,但会销毁原组价,进入销毁阶段;<keep-alive>在切换时可以保持原组件不被销毁,被暂时缓存,再切换回原组件,不用在加载,可以提高性能。2.<component>必须配合is属性使用,is的值就是引入需要加载的组件。<keep-alive>的使用非常简单,之间用<keep-alive>包裹<component>即可实现效果。demo代码:<!--&原创 2021-09-09 22:52:25 · 701 阅读 · 0 评论 -
watch监听器的常见用法(vue2)
一,简单数据类型的用法:监听data中一个简单数据的变化:如:(常用在input输入框的change,输入删除值变化的情况。比如:当输入框文本变化时,发送请求用户名是否占用的情况)data(){ return { msg:'123' }},watch:{ msg(newVal,oldVal){ console.log(newVal); console.log(oldVal); }},二,复杂数据类型的数据原创 2021-09-09 22:12:27 · 1023 阅读 · 0 评论 -
vue2自定义指令方式
当vue自带的指定不能满足我们开发需求时,我们可以根据自己的需求,定义自定义的指令。自定义指令一般分为组件私有自定义指令和项目全局自定义指令。它们的定义方式类似于filters过滤器的的定义。一:私有自定义指令:(只能在定义的组件内使用)在组件中的directives中定义一个指令,通过bing和update函数实现该指令需要表达的逻辑。如需求,需要给将<p>自定义指令</p>中的文本颜色设置为red。我们可以定义一个v-color指令:<p v-co原创 2021-09-06 22:16:01 · 2419 阅读 · 1 评论