-Food流油-CSDN博客

原创组合式API-setup

setup()函数是在组件使用组合式API的入口。- 可以在选项式API（data、watch…）的组件中使用组合式API，也可以单独使用组合式API。- 通过return一个对象，暴露模版需要使用的响应式属性、计算数据性、方法等…- 在setup()方法中是不能获取this实例的，那也就意味着，setup中不能够访问选项式API暴露的属性，但是选项式API中可以访问setup中的暴露的属性。

2024-09-05 15:21:00 1005

原创 VUE的style和class绑定

我们在操作元素的class列表和内敛样式是数据绑定的常见需求，他们都是attribute，我们可以用v-bind去完成。但是麻烦容易出错，所以在将v-bind用于class和style时，vue.js做了特殊处理，表达式的结果的类型除了字符串还可以是对象和数组。

2024-08-24 16:43:03 440

原创 VUE路由基础讲解

（vue环境）是路由和url地址的一种映射关系；对于单页面应用程序来说，组件与组件之间的跳转规则就是路由；Vue 路由允许我们通过不同的 URL 访问不同的内容(组件)。通过 Vue 可以实现多视图的单页 Web 应用（single page web application，SPA）。

2024-08-10 17:39:58 583

原创前端水印小解

1.明水印：明水印是通过在文本或图像上覆盖另一层图像或文字来实现的。这种水印会明显地出现在页面上，可以用来显示版权信息或其他相关信息。2.暗水印：暗水印是指在文本或图像中隐藏相关信息的一种技术。这种水印不会直接出现在页面上，只有在特殊的程序或工具下才能被检测到。暗水印通常用于保护敏感信息以及追踪网页内容的来源和版本。

2024-07-20 20:00:11 714

原创面试真题—Vue3的 Composition Api 与 Vue2的 Options Api 有什么不同？

• 在逻辑组织和逻辑复用方面， Composition API 是优于 Options API• 因为 Composition API 几乎是函数，会有更好的类型推断。• Composition API 对 tree-shaking 友好，代码也更容易压缩• Composition API 中见不到 this 的使用，减少了 this 指向不明的情况• 如果是小型组件，可以继续使用 Options API ，也是十分友好的。

2024-07-13 17:24:57 323

原创 Vue组件上使用v-model--插槽使用方法--深层组件传值--动态组件

默认情况下，在组件上使用v-model绑定的是，数据改变触发的是；组件使用v-model的原理就是：父组件传值给子组件，并且父组件与传递的值双向绑定，子组件接收传递过来的值，并且通过监听表单控件的input事件触发自定义事件 update:modelValue,并传递当前值作为参数返回父组件；

2024-07-07 18:42:41 1337 1

原创 Vue组件讲解注册及组件传值、组件的自定义事件

在组件标签上自定义一个事件：如果在组件上自定义事件之后，要像prop接收属性一样，通过emits接收(声明)一下此事件；changeCol是父组件的函数，可以通过此函数完成业务逻辑需求；$emit('自定义事件','可选性的传递第二个参数')；第二个参数会直接传递到父组件的methods方法中，所以就像接收普通参数一样使用就可以；注意：如果自定义事件不是一个函数，而是一段js逻辑，可以通过emit的第二个参数传值，但是接收时，直接通过emit()的第二个参数传值，但是接收时，直接通过。

2024-06-29 17:09:40 744

原创 vue⽣命周期

在 Vue 中实例从创建到销毁的过程就是生命周期，即指从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等⼀系列过程。

2024-06-22 16:04:53 567

原创 Vue双向数据绑定是什么?

我们先从单向绑定切⼊单向绑定⾮常简单，就是把Mode绑定到View，当我们⽤ JavaScript 代码更新Model时，View就会⾃动更新双向绑定就很容易联想到了，在单向绑定的基础上，⽤户更新了 View ， Model 的数据也⾃动被更新了，这种情况就是双向绑定举个栗⼦当⽤户填写表单时，View的状态就被更新了，如果此时可以⾃动更新Model的状态，那就相当于我们把Model和View。

2024-06-16 09:37:39 1437

原创带你了解ES6的【Promise】及如何解决回调地狱和【async】【await】的使用

所谓promise，简单来讲他就是一个盒子，里边保存这未来才会结束的一个事件(一般是一个异步操作)。Promise盒子中有三个状态：pending(准备状态)、fulfilled(成功状态)、rejected(失败状态)Promise中可以有两个方法：resolve() 、 reject()，改变三个状态：pending->fulfilled => resolve()pending->rejected => reject()并且，当改变发生之后，状态就会定型，后续通过方法

2024-06-02 17:25:29 2439 1

原创深入浅出 [ Viewport ] 设计原理,带你学会响应式布局

Viewport 是 HTML5 针对移动端开发新增的一个 meta 属性, 它的作用是为同一网页在不同设备的呈现，提供响应式解决方案屏幕尺寸指的是手机屏幕对角线的长度，知道屏幕的宽度（width）和高度（height），通过勾股定理就可以算出对角线的长度：diagonal 就是屏幕对角线的长度，单位是毫米（mm）, 然后再把这个长度换算成 “英寸（inch）”，就是我们平时所说的手机尺寸。1 英寸等于 25.4mm即:比如 iPhone 的尺寸 3.5寸、4寸、4.7寸、5.5寸就是这样计算出来的。

2024-05-25 16:37:38 1269

原创什么是 ‘IntersectionObserber‘---详解及使用方法

`IntersectionObserver`接口，提供了一种异步观察`目标元素与其祖先元素或顶级文档视窗交叉状态`的方法，祖先元素与视窗(`viewport`)被称observer观察者对象在观察元素是否进入视口、祖先元素的时候，不管元素是否进入，都会触发观察者对象的回调函数！示例：1大家可以发现，程序会默认执行一次输出，因为box盒子默认就在视口当中；当你滚动页面，box离开视口以后，还会再执行一次；所以：元素在视口中也会触发观察者对象，不在视口中也会触发观察者对象参数详解回调函数接受两个参数，

2024-05-18 17:20:13 758