vue
文章平均质量分 77
CreatorRay
这个作者很懒,什么都没留下…
展开
-
GPT每日面试题—v-model的实现原理
充分利用ChatGPT的优势,帮助我们快速准备前端面试。今日问题:v-model的实现原理?原创 2024-03-25 12:01:26 · 321 阅读 · 0 评论 -
GPT每日面试题—Vue中style的scoped是如何实现样式隔离的
充分利用ChatGPT的优势,帮助我们快速准备前端面试。今日问题:Vue中style的scoped是如何实现样式隔离的。原创 2024-03-12 11:12:47 · 469 阅读 · 0 评论 -
GPT每日面试题—Vue中key的作用
充分利用ChatGPT的优势,帮助我们快速准备前端面试。今日问题:Vue中key的作用?原创 2024-03-11 18:26:18 · 363 阅读 · 0 评论 -
GPT每日面试题—Vue和React的Diff算法区别
充分利用ChatGPT的优势,帮助我们快速准备前端面试。今日问题:Vue和React的Diff算法的区别?原创 2024-02-25 21:30:02 · 378 阅读 · 0 评论 -
GPT每日面试题—Vue2和Vue3的区别
充分利用ChatGPT的优势,帮助我们快速准备前端面试。今日问题:Vue2和Vue3的区别?原创 2024-02-25 21:24:03 · 369 阅读 · 0 评论 -
在使用v-for时,为什么要加key
在Vue中,v-for 是一个强大的指令,用于循环渲染列表数据。然而,当你使用 v-for 渲染列表时,经常会遇到一个重要的问题:为什么一定要为每个循环项指定一个 key 属性?这篇博文将深入探讨这个问题,从底层原理出发,分析为什么 key 是必不可少的。原创 2023-09-29 03:09:34 · 264 阅读 · 0 评论 -
全面了解v-if和v-show的区别
在Vue中,v-if和v-show都是用于控制元素的显示与隐藏的指令。虽然它们看起来有些相似,但它们在实现和使用上有很大的区别。在本篇博文中,我们将深入探讨v-if和v-show的区别,包括它们的底层原理、适用场景以及示例代码。原创 2023-09-25 02:17:06 · 450 阅读 · 0 评论 -
Vue性能优化指南
Vue 是一款流行的JavaScript框架,用于构建现代化的单页面应用程序(SPA)。然而,在构建大规模应用时,Vue的性能可能会成为一个挑战。本篇博文将介绍一系列Vue性能优化技巧,以确保你的应用在性能方面表现出色。我们将讨论从组件级别到整体应用级别的性能优化策略。原创 2023-09-22 18:57:28 · 175 阅读 · 0 评论 -
如何使用插件扩展Vue的功能
Vue 是一款流行的前端 JavaScript 框架,它的核心库提供了许多强大的功能,但有时我们需要额外的功能来满足特定需求。这时,使用插件来扩展 Vue 的功能是一个很好的选择。本文将详细介绍如何使用插件来扩展 Vue 的功能,包括创建、注册和使用插件。原创 2023-09-22 14:16:33 · 332 阅读 · 0 评论 -
使用Composition API和setup语法糖重构Vue组件
Vue3 引入了Composition API。它是一种更灵活的方式来组织和复用组件的逻辑,而不是依赖于传统的选项式API(如data, methods, computed等)。Composition API的核心是一个名为setup的函数,它可以在组件创建之前执行,并返回一个对象,该对象包含了组件所需的所有属性和方法。原创 2023-09-20 15:04:49 · 359 阅读 · 0 评论 -
Vue自定义指令的高级用法
Vue 是一款流行的 JavaScript 框架,广泛用于构建现代化的用户界面。其中一个强大的特性是指令,它们允许你在模板中添加特殊行为和交互效果。在本篇博文中,我们将深入探讨自定义 Vue 指令的高级用法,包括创建全局指令、局部指令、修饰符、参数以及钩子函数等。原创 2023-09-20 11:18:19 · 85 阅读 · 0 评论 -
详解Vue的nextTick
当我们使用Vue来构建Web应用程序时,我们常常需要在DOM更新后执行一些操作,以确保我们的操作不会与Vue的响应式系统发生冲突。为了做到这一点,Vue提供了$nextTick方法(在Vue 2中)和nextTick函数(在Vue 3中)。原创 2023-09-19 23:19:44 · 149 阅读 · 0 评论 -
封装使用Axios进行前后端交互
Axios是一个强大的HTTP客户端,用于在Vue.js应用中进行前后端数据交互。本文将介绍如何在Vue中使用Axios,并通过一个企业应用场景来演示其实际应用。原创 2023-09-19 22:21:13 · 211 阅读 · 0 评论 -
使用VueCli快速搭建项目
本文将介绍如何使用Vue Cli来快速搭建一个 Vue 项目。Vue Cli 是一个官方提供的脚手架工具,可以帮助你轻松创建和管理 Vue 项目,同时也支持最新的 Vue 3 版本。在本文中,我们将从安装 Vue Cli 开始,然后创建一个全新的 Vue 3 项目。原创 2023-09-07 15:01:29 · 102 阅读 · 0 评论 -
Vue的插槽与作用域插槽详解
在Vue中,插槽(Slot)是一个非常强大且灵活的特性,用于在父组件中定义子组件的内容。Vue提供了两种主要类型的插槽:默认插槽(Slot)和作用域插槽(Scoped Slot)。本篇博文将深入介绍这两种插槽类型,从基础到进阶。原创 2023-09-07 10:30:25 · 181 阅读 · 0 评论 -
Vue的动画和过渡效果详解
产品中优雅的交互动画可以吸引更多用户留存使用,对于前端的动画实现要求也越来越高了。在Vue中提供了一些快捷、方便的标签和内置属性来更加优雅的实现动画和过渡效果,今天我们来一起学习一下。原创 2023-09-06 17:10:08 · 141 阅读 · 0 评论 -
Vue自定义指令详解
自定义指令是 Vue.js 中一个强大的特性,它允许你在 DOM 元素上添加自定义行为。本篇文章将深入介绍 Vue 自定义指令的基础知识和进阶用法,包括详细示例和一些著名的开源自定义指令的介绍。原创 2023-09-05 00:14:41 · 147 阅读 · 0 评论 -
Vuex使用详解(基础到进阶通关大全)
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它可以让我们更方便地管理应用程序的数据流,实现组件之间的通信,以及构建复杂的业务逻辑。在本文中,我将以 Vuex 的使用详解为主题,介绍 Vuex 的基本用法和高级用法,以及一些常见的问题和解决方案。本文假设你已经对 Vue.js 有一定的了解。原创 2023-09-04 19:26:29 · 145 阅读 · 0 评论 -
VueRouter使用详解(5000字通关大全)
Vue Router是一个官方的路由管理器,它可以让我们在Vue应用中实现单页面应用(SPA)的效果,即通过改变URL而不刷新页面来显示不同的内容。Vue Router可以让我们定义多个路由,每个路由对应一个组件,当URL匹配到某个路由时,就会渲染对应的组件。Vue Router还提供了很多高级功能,如嵌套路由、动态路由、命名路由、导航守卫、路由元信息等,让我们可以更灵活地控制路由的行为和状态。原创 2023-08-30 01:38:20 · 473 阅读 · 0 评论 -
Vue组件通信方式详解(全面版)
在Vue应用开发中,组件通信是一个重要的话题。不同的组件可能需要在不同的情况下进行数据传递和交互。Vue提供了多种方式来实现组件通信,每种方式都有其适用的场景。本文将详细介绍Vue中实现组件通信的各种方式,并为每种方式提供通俗易懂的代码示例。原创 2023-08-26 18:48:35 · 124 阅读 · 0 评论 -
Vue组件的基本概念与使用
在Vue中,组件是构建用户界面的基本单元之一。它允许开发者将界面拆分为独立、可重用的模块,使代码更加结构化、易于维护。本文将从简单到复杂,全面介绍Vue组件的各种用法、优点、缺点以及注意事项。原创 2023-08-24 23:47:01 · 151 阅读 · 0 评论 -
探索Vue生命周期钩子函数:从创生到销毁
Vue这个引领前端开发潮流的框架,其优雅的响应式数据绑定和组件式开发方式,使得它备受瞩目。然而,Vue的魅力绝不仅限于此,它还赋予开发者一组神奇的生命周期钩子函数,能够在组件的各个成长阶段插入自定义代码。本文将带你进入Vue生命周期钩子函数的奇妙世界,一探它们的妙用、内部机制,同时提供详细的代码示例,助您全方位领略这一重要概念。原创 2023-08-22 23:02:28 · 281 阅读 · 0 评论 -
Vue计算属性vs监听器:基本使用与原理分析
在Vue中,计算属性(Computed Properties)和监听器(Watchers)是两种强大的工具,用于处理数据逻辑和响应式变化。虽然它们在某些情况下可以实现类似的功能,但它们的设计和用法有所不同。本文将深入探讨Vue计算属性与监听器的区别、实现原理以及最佳用例。原创 2023-08-17 22:16:42 · 357 阅读 · 0 评论 -
详解Vue模板语法和指令
Vue是一种流行的JavaScript前端框架,它被广泛应用于构建交互性和响应性的Web应用程序。Vue的核心特性之一就是模板语法和指令,它们为开发者提供了一种简洁而灵活的方式来操作DOM并实现前端应用的逻辑。本文将全面介绍Vue模板语法和指令的使用,包括数据绑定、指令、表达式、过滤器等方面,并通过具体的代码示例来演示它们在实际项目中的应用。原创 2023-08-07 20:37:09 · 106 阅读 · 0 评论 -
详解Vue.js及其核心特性
Vue.js是一款流行的JavaScript前端框架,由尤雨溪(Evan You)于2014年首次发布。它被设计成一种渐进式框架,可以逐步地集成到现有项目中,也可以用于构建全新的单页应用(SPA)。Vue.js以其简洁、灵活、易用和高效的特性受到开发者的喜爱。下面将介绍Vue.js的核心特性,包括数据绑定、组件化、指令、事件处理等。原创 2023-08-06 23:49:49 · 701 阅读 · 0 评论 -
关于Vue中$nextTick的作用及实现原理(Vue进阶)
今天带着大家探索了一下Vue中的一个全局API$nextTick的基本用法和实现原理,牵扯出了很多的知识点,Vue的虚拟DOM、Vue更新DOM的机制、JS的事件循环,跟随Vue的源码和大家共同学习一下。原创 2022-07-16 22:46:18 · 5999 阅读 · 1 评论 -
手写实现Vue内置组件component(Vue进阶)
Vue中存在很多的内置组件,比如component、transition、keep-alive等,它们的使用场景很丰富,今天我们试着剖析一下component的内部原理并手写实现,会涉及虚拟DOM、模板编译、render函数等Vue进阶内容。...原创 2022-07-06 21:26:56 · 1314 阅读 · 0 评论 -
2022春招前端最新面试题分享(九州云)
九州云公司及岗位信息公司: 浙江九州云信息科技有限公司岗位: 前端开发工程师地点: 上海薪资: 15k面试结果: 全部通过, HR已给口头Offer一面(2022/04/08)简短的自我介绍实习中做过的项目JS都有哪些数据类型如何判断一个数据是否是数组, 说出知道的所有方式说一下你理解的EventLoop说一下你理解的闭包, 使用场景说一下你理解的原型和原型链, prototype是做什么的new一个对象时, 经历了什么class中constructor的作用在cla原创 2022-04-09 14:34:57 · 1447 阅读 · 0 评论 -
2022春招前端最新面试题分享(厨芯科技)
厨芯科技面经公司及岗位信息公司: 厨芯科技岗位: 前端开发工程师地点: 北京薪资: 15k-30k面试结果: HR告知我一面通过后, 等了一周跟我说没HC了一面(2022/03/24)自我介绍在实习中遇到过的困难你是如何给其它实习生review代码的, 什么标准实习做的项目主要在负责哪些内容为什么想做前端如何学习前端的JS继承的实现方式, 给出你所有知道的方法JS如何查找原型链如何实现深拷贝, 手写代码实现proto、prototype、constructor三者的关原创 2022-04-08 13:06:51 · 755 阅读 · 0 评论 -
JS手写实现发布订阅设计模式
大部分前端应该对设计模式了解都不多,但是对Vue理解深刻的同学一定都知道发布订阅模式,因为Vue2的响应式就是基于Object.defineProperty + 发布订阅模式实现的。今天我们就用JS简单实现一下发布订阅模式// 观察者 watcherclass Dep { constructor(callback) { this.subs = []; this.callback = callback; } addSub(sub) {原创 2022-03-24 19:26:12 · 1894 阅读 · 0 评论 -
面试官:谈谈Vue实例挂载的过程
Vue2目前已经出现在大众视野中非常久了,甚至Vue3都已经开始投入使用,所有大家对于Vue2的掌握程度要逐步加深,即使你不想面大厂,也要到达源码级的。Vue实例的挂载过程是一个面试中高频出现的考点,今天带着大家根据源码一步步探析!一、思考我们都听过知其然知其所以然这句话。那么不知道大家是否思考过new Vue()这个过程中究竟做了些什么?过程中是如何完成数据的绑定,又是如何将数据渲染到视图的等等。二、分析首先找到Vue的构造函数源码位置: src/core/instance/index.原创 2022-01-05 20:26:21 · 1317 阅读 · 0 评论 -
Vue如何自定义指令
最近在面试的时候多次被问到了Vue如何实现自定义指令的问题,之前没有了解过,也没有相应的使用经验。Vue中为我们提供了非常多的指令,比如V-if, v-show, V-if, v-for等,非常非常多,并且Vue也支持我们自定义指令,来满足自己的业务的需求,达到复用的效果。可以全局注册,也可以局部注册。全局自定义指令有一次面试中,面试官的需求就是,设计一个全局自定义指令v-input, 如果input输入的字符中包括HelloWorld, 就提示成功, 并且禁止继续输入。如果input输入的字符长.原创 2021-11-05 20:57:01 · 555 阅读 · 0 评论 -
Vuex知识点全解析(3)---actions有什么用?
我们已经复习过了state,mutations,getters的相关作用和用法,今天来搞一下actionsactions其实也很简单,我们都知道在想要修改state中的数据,必须要通过mutations,但是mutations是同步的,只能执行同步代码,这显然不能满足所有需求,而actions就是异步的提交mutations,它的作用也是用来修改state的,但是不是直接修改,因为修改state中数据的方法有且只有通过mutations。mutations和actions都是用来修改state的,只.原创 2021-08-08 10:36:55 · 1473 阅读 · 1 评论 -
Vuex知识点全解析(2)---getters有什么用?
经过上期的内容,我们已经知道了为什么要使用Vuex,以及Vuex中state和mutations的作用即用法。这期的内容是gettersgetters其实就可以简单理解为是计算属性computed,它们的作用是相似的,特点是相似的,用法也是相似的。当我们在获取state中的数据时,可能想要加以修饰,比如我在state中保存了一些商品价格,在获取的时候,我想在价格前面加上$等价格修饰符。我们依然以一个简单的示例示范一下getters的用法。在components文件夹下新建一个Part1组件,内容.原创 2021-08-08 09:56:28 · 1055 阅读 · 0 评论 -
Vuex知识点全解析(1)---为什么要使用vuex
即将开始我的实习生活,虽然已经度过了面试的过程,但是学习新知识和复习老知识的脚步永远不能停歇,二面刚刚结束的时候,一面的面试官就跟我说可以提供offer了,然后跟我说了他们公司的目前项目的技术栈是vue2+ts,让我多熟悉一下使用ts编写vue2程序,以及vuex-typescript的写法。先复习一下vuex的使用吧为什么要使用Vuex我们先使用VueCli初始化一个项目,然后清理一下项目目录,把没用的东西都删掉。我们先尝试一下不适用Vuex,来写一个组件间数据传递的内容。在Compon.原创 2021-08-08 00:11:06 · 417 阅读 · 0 评论 -
手写一个简易vue响应式带你了解响应式原理
Vue2.x 响应式原理1.defineProperty的应用在Vue2.X 响应式中使用到了 defineProperty 进行数据劫持,所以我们对它必须有一定的了解,那么我们先来了解它的使用方法把, 这里我们来使用 defineProperty来模拟 Vue 中的 data。<body> <div id="app"></div> <script> // 模拟 Vue的data let data = {转载 2021-07-31 16:37:52 · 511 阅读 · 0 评论 -
在vue+node环境下实现对数据以excel形式导出并下载
首先业务需求,就是在后台管理系统中可以查询当前数据表,现在要加一个功能,可以把当前查询到的数据以excel形式导出,并供管理员下载。需求明确之后,我们就要进行功能的实现,这个需求主要内容在后端接口的编写,前端我们只需要展示一个按钮,绑定一个点击事件即可。因为整个项目都是我自己写,所以后端我用的node的express框架,很简洁。将数据以excel形式导出,应该是有很多轮子可以用的,我使用的是node-xlsx,之前我写微信小程序也用云开发做过类似的需求,也是用的这个插件,还挺好用的。npm in原创 2021-05-20 13:01:07 · 1019 阅读 · 0 评论 -
前端面试刷题day5(每日更新前端面试高频考察点)
码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。每天都提供一道关于前端面试中常见的题目。并且我建立了一个QQ群(425554900),QQ群内提供大量面试题目和答案,包括CSDN每日更新的题目答案。欢迎大家加群交流,打卡,共同进步。今日题目:说一下Vue开发如何针对搜索引擎做SEO优化题解:Vue SEO 几种方案众所周知,Vue SPA 单页面应用对 SEO 不友好,当然也有相应的解决方案。1.1 SSR服务器渲染Vue.js是构建客户端应.原创 2021-03-19 16:47:24 · 349 阅读 · 0 评论 -
『前端优化』—— Vue中避免滥用this去读取data中数据
码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。前言在Vue中,data选项是个好东西,把数据往里一丢,在一个Vue组件中任何一个地方都可以通过this来读取data中数据。但是要避免滥用this去读取data中数据,至于在哪里要避免滥用,如果滥用会导致什么后果,本专栏将会一一揭晓。一、用this读取data中数据的过程在Vue源码中会把data中数据添加getter函数和setter函数,将其转成响应式的。getter函数代码如下所示:function转载 2021-03-02 22:34:26 · 932 阅读 · 0 评论 -
Vue响应式原理
码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。vue实现数据响应式,是通过数据劫持侦测数据变化,发布订阅模式进行依赖收集与视图更新,换句话说是Observe,Watcher以及Compile三者相互配合。Observe实现数据劫持,递归给对象属性,绑定setter和getter函数,属性改变时,通知订阅者Compile解析模板,把模板中变量换成数据,绑定更新函数,添加订阅者,收到通知就执行更新函数Watcher作为Observe和Compile中间.原创 2021-02-13 11:56:25 · 1307 阅读 · 2 评论