![](https://img-blog.csdnimg.cn/20201020175955827.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
文章平均质量分 68
我在这里存放Vue 相关知识或Vue 面试题。
我不是费圆
不积跬步无以至千里,不积小流无以成江海
展开
-
带【科技感】的Echarts 图表
echarts脚本在线地址 https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js引入echarts 脚本后粘贴代码vue2 代码:<template> <div> <div ref="col-2-row-2" class="col-2-row-2"></div> </div></template><script>expo原创 2024-01-25 14:13:00 · 1544 阅读 · 3 评论 -
vue属性data的处理规则
当这些属性的值发生变化时,Vue会自动更新视图中对应的内容,从而实现数据与视图的双向绑定。这样,当我们在Vue实例中修改了某个属性的值时,Vue会自动检测到并更新相关的视图,从而实现了响应式更新的效果。5. 对于对象或数组类型的属性,在Vue 2.x中需要使用特殊的方法来更新其内容,比如。对象中的属性进行劫持,在属性被访问或修改时,Vue会通知订阅了对应属性的视图更新。在Vue 3.x中,可以直接使用原生操作符进行修改,Vue会自动进行响应式更新。另外,需要注意的是,在Vue 3.x中,可以使用。原创 2023-10-07 09:43:18 · 374 阅读 · 0 评论 -
Vue插槽的高深用法
具体来说,我们可以通过在父组件中使用``标签来定义一个作用域插槽,然后在插槽内容中使用一个包裹在``标签中的属性来访问这个插槽。在Vue中,插槽是通过标签来实现的,它可以在子组件中定义多个插槽,父组件可以根据需要选择具体的插槽。通常,当我们使用插槽时,只能将数据从父组件传递到子组件,但是有时候我们想要在子组件中使用父组件的数据,这时候就可以使用作用域插槽。具名插槽(named slots)是Vue.js中的一种插槽,用于在子组件中定义具有特定名称的插槽,并在父组件中将内容插入到这些具名插槽中。原创 2023-09-01 09:27:54 · 243 阅读 · 0 评论 -
vue树状结构以及设计思路
设计思路:多级数组循环遍历,第一层样式加三角形折叠,第二层在文字前方加 —(横线),第三层加横线,第四层加点。给第二层第三层左侧加左边框,用translateY进行位移就形成了树状样式。原创 2023-08-16 09:50:26 · 297 阅读 · 0 评论 -
JS、Vue鼠标拖拽
通过css定位属性,对鼠标经过位置进行计算,附加给top及left,包含js、vue源码原创 2023-07-13 18:25:12 · 1638 阅读 · 0 评论 -
Vue 自定义轮播
vue 纯手撸自定义轮播图,附带组件设计思路。划分标题、轮播区、指示点三块,在轮播区使用 display: inline-block; 使子元素横向排列,使用动态样式的写法,判断column 的属性值,以此来实现横向或纵向排列。使用计时器控制变量 nowInd 变化,当nowInd 发生改变会影响轮播图上的判断条件,进而控制轮播运动,根据config.column 的值,判断是进行左右移动 还是上下移动,用transition 来动态控制过渡效果的有无。喜欢这篇文章的话可以看看置顶,谢谢原创 2022-10-24 20:49:36 · 2161 阅读 · 2 评论 -
Vue 动态换肤
规划几套样式,通过动态class 或 scss 混入 @include 等方式进行赋值,给最外层的父元素添加全局样式。涉及到跨页面操作,可以将class转化为JSON字符串存在storage 或vuex 里,或者封装进公用组件,把每个页面不同的内容以插槽的形式插入。其它应用场景如:天地图自定义覆盖物,轮播图自定义指示点。原创 2022-10-10 20:57:11 · 1608 阅读 · 3 评论 -
uniapp手指划动事件
使用案例:<view class="text-area" @touchstart="start" @touchend="end"></view>data() { return { startData: { clientX: 0, clientY: 0 } }},methods:{ start(e){ this.startData.clientX=e.changedTouches[0].clientX;...原创 2021-06-30 16:59:15 · 2149 阅读 · 8 评论 -
vue动画轻提示
我习惯手写组件,内存小,加载快。必要时我会引入插件,并剔除多余的文件,希望这个小功能可以帮到你一些。<template> <view class="app"> <view class="box" :class="[Tips.light?'visi':'hidd']"> <text>{{Tips.text}}</text> <img src="../static/img/quxiao.png" alt="" class.原创 2021-03-20 14:45:49 · 706 阅读 · 0 评论 -
vue系列自定义加载页
一个平平无奇的小功能,塞进component文件夹里就可以引用,可以帮你节省10分钟呐,看源码:<template> <div class="loading" :class="[date?'':'vanish']"> <div class="loadOne load"> <div class="circle-loader"> <div class="circle-line"> &原创 2021-01-15 09:16:04 · 457 阅读 · 0 评论 -
vue自定义模态框
随手写的一个小功能,直接就可以拿去用,能为你节省10多分钟share()调用模态框布局: <div class="footer" :class="[popup?'popyes':'popno']"> <p class="top">活动站点与您所选择的站点不同,确认报名吗?</p> <div class="bot"> <p class="bot-lef" @click="cancel">取消</p&原创 2021-01-15 08:56:54 · 628 阅读 · 0 评论 -
乐淘网侧边栏动画
在乐淘网买衣服时无意中发现了侧边栏的动画效果,没禁住诱惑尝试了一下,还挺难,不过做出来了。如有侵权请联系删除“乐淘网”官方线上地址,大额品牌超低折扣! 太懒了没有加图片,但效果是一样的,这里用源生JS写的,思路比较朴实无华:·定义外部变量来判断按钮的点击状态;·当按钮被点击时让侧边栏宽度还原或缩小;·遍历每一个列表项,并调用动画;·改变外部变量的值代码如下:<!DOCTYPE html><html lang="en"><head> <me原创 2020-12-14 00:18:24 · 356 阅读 · 4 评论 -
switch循环与@click
工作稳定,继续发帖。switch循环的用法: switch(this.sum){ case 1: this.msg = "素衣云袖,古道悠悠" break; case 2: this.msg = "摸不到,皆是离愁"; break; } 传入一个参数,开始循环,参数可以是数字或布尔,switch等于是 if 加执行语句的简写,比如上面这段代码,如果用 if 语句来写,那就.原创 2020-11-20 12:00:06 · 573 阅读 · 0 评论 -
Vue语法糖
语法糖(Syntactic sugar),也译为糖衣语法,是由英国计算机科学家彼得·约翰·兰达(Peter J. Landin)发明的一个术语,指计算机语言中添加的某种语法,这种语法对语言的功能并没有影响,但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性,从而减少程序代码出错的机会。 语法糖对程序员来说是友好的,但对机器本身却不怎么好。语法糖越甜,编译成的二进制也就越麻烦,出错的时候也会带来更多的麻烦。程序员要做的不是尽力避免错误,而是聚焦在快速发现并改正错误。真正以快速方式轻易解决错误原创 2020-10-26 19:12:18 · 2348 阅读 · 0 评论 -
浅谈 Hooks
如果你很熟悉 vue 与 react ,兴许你也觉得 vue3.0 抄袭了react,这项react 在不久前发布的新技术,在 vue3.0 中被重新搬上了舞台。也使它重新活跃在了人们的视野中,我技术不深,与大家分享我的见解和猜测。image.pnguseState...原创 2020-10-10 00:15:52 · 36677 阅读 · 21 评论 -
10分钟搞懂 vuex
什么是 vuex?vuex 是一个专门为vue.js应用程序开发的状态管理模式。 这个状态我们可以理解为在data中的属性,需要共享给其他组件使用的部分。 也就是说,是我们需要共享的data,使用vuex进行统一集中式的管理。vuex中,有默认的五种基本的对象:state:存储状态(变量)getters:对数据获取之前的再次编译,可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()mutations:修改状态,并且是同步的。在组件中使用原创 2020-10-09 16:50:10 · 1054 阅读 · 0 评论 -
深入解读Vue修饰符sync
在一些情况下,我们可能会需要对一个 prop (父子组件传递数据的属性) 进行“双向绑定”。 在vue 1.x 中的 .sync 修饰符所提供的功能。当一个子组件改变了一个带 .sync 的prop的值时,这个变化也会同步到父组件中所绑定的值。 这很方便,但也会导致问题,因为它破坏了单向数据流。(数据自上而下流,事件自下而上走) 由于子组件改变 prop 的代码和普通的状体改动代码毫无区别,所以当你光看子组件的代码时,你完全不知道它合适悄悄地改变了父组件的状态。<comp :foo原创 2020-09-23 21:18:29 · 1695 阅读 · 0 评论 -
vue操作dom元素的三种方法
1.原生js操作domconst dom = getElementById(‘box’)2.vue官方方法:refvue中的ref是把当前dom元素 “ 抽离出来 ” ,只要通过 this.$refs就可以获取到< div class=“set” ref=“up”>.set是我们要操作的dom对象,它的ref是 up@click=“Alert”给父元素一个点击事件,接下来我们来编写这个方法methods:{ this.$refs.addAlert.style.dis原创 2020-09-19 09:47:55 · 16508 阅读 · 21 评论 -
什么是token?
什么是token? token就是令牌,前后端进行鉴权的一种有效形式,比传统的 session 鉴权更加方便,简单来说:当用户首次登陆时,网站会给你一张“门卡”,以后你可以凭借门卡直接进入,而无需再次申请。但一段时间之后门卡实效,你需要再到前台充磁,这里的门卡就是 token 那么它的用途有哪些呢? 进行跨域,简单操作,特别适合前后端分离项目。...原创 2020-09-15 23:56:42 · 9745 阅读 · 16 评论 -
Vue双向绑定原理(4改)
Vue双向绑定的原理 双向数据绑定是通过 数据劫持、 结合 、发布订阅,的方式来实现的, 也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变; 使用watch来连接数据与视图,当数据发生变化时,触发通知所有该数据的对象进行更新。这!就是vue的双向绑定原理,你学会了吗?...原创 2020-09-15 23:20:51 · 2345 阅读 · 7 评论 -
5分钟学会vue中的路由守卫
5分钟学会vue中的路由守卫在项目开发中每一次路由的切换或者页面的刷新都需要判断用户是否已经登录,前端可以判断,后端也会进行判断的,我们前端最好也进行判断。vue-router提供了导航钩子:全局前置导航钩子 beforeEach和全局后置导航钩子 afterEach,他们会在路由即将改变前和改变后进行触发。所以判断用户是否登录需要在beforeEach导航钩子中进行判断。导航钩子有3个参数:1、to:即将要进入的目标路由对象;2、from:当前导航即将要离开的路由对象;3、next :调用该方法后原创 2020-09-11 00:31:58 · 3399 阅读 · 18 评论 -
vue路由基础
vue路由基础摘录自 “ 一个前端小小白 ”,请支持原作者1----vue-router内置组件router-link类似于a标签,用于在单页面之间的跳转,默认渲染为a标签to属性,后面跟着用于跳转的路径tag属性,指定渲染成指定的标签(tab=“p”)router-link-active,自动激活的class名称,当·to·属性的值和地址栏路径相同自动激活该属性。linkActiveClass,自定义属性名称,在路由(reouter)的index.js中修改const router =转载 2020-09-05 14:13:28 · 524 阅读 · 0 评论 -
Vue组件封装的过程
Vue组件封装的过程vue组件的定义组件(Component)是Vue.js最强大的功能之一 组件可以扩展HTML元素,封装可重用代码在较高层面上,组件是自定义元素,Vue.js的编译器为他添加特殊功能某些情况下,组件也可以表现用 `js` 特性进行了扩展的原生的HTML元素 所有的Vue组件同时也都是Vue实例,所以可以接受 相同的选项对象(除了一些根级特有的选项),并提供 相同的生命周期钩子函数vue组件的功能能够把页面抽象成多个相对独立的模块实现代码重用,提高开发效率和代码原创 2020-09-09 18:02:16 · 8060 阅读 · 22 评论