自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(13)
  • 收藏
  • 关注

原创 Vue过渡和动画

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档。

2024-07-13 16:31:11 763

原创 Vue组件—进阶篇

以上就是vue组件进阶篇的所有内容,关于组件的知识点还有很多,如果大家想进一步更深入的了解组件的更多知识,可以去Vue的官网进行更全面的了解。我更希望本篇文章,能给一些刚学习vue的人带来逻辑思路上的灵感,本人也是一名新人,欢迎大家多多指教!

2024-07-06 16:02:56 1043

原创 Vue组件—基础篇

全局注册的组件可以在全局组件或者局部组件中使用局部注册的组件不能被其他组件使用;除非你把局部组件又注册到其他组件中注册号的组件可以像一个普通标签一样,重复使用组件接受与 Vue.createApp 相同的选项,例如 data、computed、watch、methods 以及生命周期钩子等别忘了,最大的根组件就是vue实例,所以在vue实例中的方法和属性,在组件中同样可以使用,它们一模一样。

2024-06-29 17:10:03 805

原创 Vue计算属性和侦听器

计算属性会缓存计算结果,只要依赖属性不发生变化,不管你使用多少次计算属性,除了第一次执行计算以外,之后的结果都是直接从缓存中拿取。watch的用法:把你想要观察的数据变量,写成同名的函数在watch里就可以了,数据变化时,就会触发方法里的逻辑。:计算属性是通过computed属性定义,然后可以在模板中当做一个普通属性去使用;Vue提供了一种更通用的方法来观察和响应Vue实例上的数据变动: 侦听属性:watch;:计算属性会与使用的其他属性产生依赖关系,当其他属性发生改变时,计算属性会跟随一起变化。

2024-06-24 08:01:26 245

原创 Vue指令系统

同时使用 v-if 和 v-for 是不推荐的,因为这样二者的优先级不明显。循环,这里item表示数组中的每个元素, newList表示被渲染的数组,这里通过 {{}}插值的方式,把数组每个元素中的title给展示了出去。如果要同时使用,可以在外层套一个template标签,此标签不会渲染到页面,但却可以被循环,里面的子标签就可以使用循环的index值,来做v-if 的条件判断逻辑了。v-if 有更高的切换开销,而v-show有更高的初始渲染开销,所以,对于频繁切换的效果,推荐使用v-show;

2024-06-15 16:05:07 1028

原创 Promise 、async 、await 简单学会

await就是等待的意思,只可以用在async函数中(用在普通函数中会报错),他一般用来修饰一个Promise对象,等待promise的状态确定之后,等待状态才会结束!给每个参数promise实例添加一个catch方法,当有错误发生时,错误会进入自身的catch方法,并且自身catch方法return的数据,将作为最终结果进入到all方法的then中。如经典的Ajax的success就是回调函数,只有得到一个接口服务器返回的某个信息,我们才能拿这这个信息去做新的请求,循环往复,代码会变得十分的恐怖!

2024-06-02 19:50:13 888

原创 js鼠标拖影效果,

主要逻辑就是,通过一次性计时器的嵌套,来实现延迟触发工具函数,从而实现鼠标拖影效果。

2024-05-25 15:33:11 194

原创 IntersectionObserver一分钟学会,超级简单

给dom元添加进入动画的核心逻辑就是:通过css给指定元素添加过渡属性,然后使用观察对象监听每个元素,给默认在视口中的元素做最终值的处理,给不在视口中的元素做初始值的处理。当图片进入视口以后,使用data-url的图片地址,替换src的图片地址。rootMargin 属性是规定视口的外延值,相当于扩大了视口的范围,用于提早触发观察者回调函数。当threshold的值是1,表示:当被监听元素完全进入视图在触发观察者的回调函数;root属性的值可以是一个祖先级对象,这时,主要的是针对局部的滚动效果。

2024-05-18 16:08:18 1052

原创 CSS3之transform详解及示例(3d变形)

主要还是考验大家对X,Y,Z三个轴的理解,能否在脑海中构思出大致的逻辑。

2024-05-11 15:22:40 691

原创 CSS3之transform详解及示例(2d变形)

本次带大家简单了解了一下transform中的2d变形效果,希望可以给大家带来思路上的灵感。

2024-05-05 09:30:33 572

原创 使用javascript完成轮播图效果,代码简单

这里并没有使用css的动画和过渡,主要还是为了锻炼逻辑思维能力,对于初学js的同学来说,也许能提供一些帮助。

2024-04-27 09:07:55 499 3

原创 js碰壁反弹,小球碰撞,代码超级简单

本次我们要来完成javascript中小球碰撞的效果,代码特别简单,让我们一起来看一下吧!碰壁反弹的逻辑并不复杂,完成这样效果的方法也是多种多样,这里也是给大家提供一个思路。小球移动并不困难,关键是在处理临界值,也就是小球移动到边界的逻辑处理,解决好临界值问题,这样类似的简单小逻辑,也就难不倒你了。

2024-04-20 09:17:06 249

原创 js中运算符的使用

以上就是关于javascript中运算符的一些基本概念和语法,我们可以利用它们帮助我们完成复杂的逻辑运算。

2024-04-14 20:03:20 999

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除