![](https://img-blog.csdnimg.cn/5b46ddb7fa504e3294a1d3a33c4b3d95.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue2
文章平均质量分 77
Vue是一个用于创建用户界面的开源JavaScript框架,也是一个创建单页应用的Web应用框架
北海屿鹿
越努力,越幸运
展开
-
单文件组件,为什么要使用 SFC
Vue 的单文件组件 (即*.vue文件,英文 Single-File Component,简称SFC) 是一种特殊的文件格式,使我们能够将一个 Vue 组件的模板、逻辑与样式封装在单个文件中。</style>如你所见,Vue 的单文件组件是网页开发中 HTML、CSS 和 JavaScript 三种语言经典组合的自然延伸。<template><script>和<style>原创 2024-05-15 10:33:59 · 991 阅读 · 0 评论 -
Vue数组变更方法和替换方法
1、删除 —— 可以删除任意数量的项,只需要指定2个参数:要删除的第一项的位置和要删除项的项数。2、插入 —— 可以向指定位置插入任意数量的项,只需要提供3个参数:插入起始位置、0(要删除的项数)和要插入的项。如果要插入多个项,可以再传入第四、第五,一直任意多个项。3、替换 —— 可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需要指定3个指定参数:起始位置、要删除的项数和要插入的任意数量项。插入的项数是不必与删除的项数相等。原创 2023-12-20 16:09:47 · 990 阅读 · 0 评论 -
Vue中给对象添加新属性时,界面不刷新怎么办?
标签绑定点击事件,我们预期点击按钮时,数据新增一个属性,界面也 新增一行。中做一次强制更新,99.9% 的情况,是你在某个地方做错了事。实现数据响应式的,直接动态添加新属性仍可以实现数据响应式。不允许在已经创建的实例上动态添加新的响应式属性。应创建一个新的对象,合并原对象和混入对象的属性。点击按钮,发现结果不及预期,数据虽然更新了(添加新属性的时候,却无法触发事件属性的拦截。如果为对象添加少量的新属性,可以直接采用。如果需要为新对象添加大量的新属性,则通过。方法,实现新增属性的响应式。原创 2023-12-08 17:48:48 · 576 阅读 · 0 评论 -
Vue实例挂载的过程发生了什么
源码位置:src\platforms\web\runtime\index.js。方法,但发现本文件中并没有此方法,但仔细可以看到文件下方定义了很多初始化方法。源码位置:src\core\instance\lifecycle.js。源码位置:src\core\instance\render.js。源码位置:src\core\instance\index.js。源码位置:src\core\instance\state.js。源码位置:src\core\instance\init.js。的挂载,因此无法访问到。原创 2023-07-22 10:43:48 · 282 阅读 · 0 评论 -
Vue中组件和插件有什么区别?
组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式,在Vue中每一个.vue文件都可以视为一个组件组件的优势降低整个系统的耦合度,在保持接口不变的情况下,我们可以替换不同的组件快速完成需求,例如输入框,可以替换为日历、时间、范围等组件作具体的实现调试方便,由于整个系统是通过组件组合起来的,在出现问题的时候,可以用排除法直接移除组件,或者根据报错的组件快速定位问题,之所以能够快速定位,是因为每个组件之间低耦合,职责单一,所以逻辑会比分析整个系统要简单。原创 2023-06-30 14:44:07 · 607 阅读 · 0 评论 -
Vue实例挂载的过程
我们都听过知其然知其所以然这句话那么不知道是否思考过new Vue()这个过程中究竟做了些什么?过程中是如何完成数据的绑定,又是如何将数据渲染到视图的等等首先找到vue的构造函数源码位置:src\core\instance\index.js是用户传递过来的配置项,如等常用的方法vue构建函数调用_init方法,但我们发现本文件中并没有此方法,但仔细可以看到文件下方定定义了很多初始化方法首先可以看initMixin方法,发现该方法在Vue原型上定义了_init方法。原创 2023-06-30 10:08:02 · 1099 阅读 · 0 评论 -
Vue常用的修饰符有哪些?分别有什么应用场景?
在程序世界里,修饰符是用于限定类型以及类型成员的声明的一种符号在Vue中,修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间去处理这些烦恼的事情,而能有更多的精力专注于程序的逻辑处理vue。vue中修饰符分为以下五种:表单修饰符事件修饰符鼠标按键修饰符键值修饰符v-bind修饰符原创 2023-06-29 11:17:45 · 383 阅读 · 0 评论 -
Vue.observable的理解
返回的对象可以直接用于渲染函数和计算属性内,并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器。中,则会返回一个可响应的代理,而对源对象直接进行变更仍然是不可响应的。源码位置:src\core\observer\index.js。,但是实现的功能不是太复杂,而使用上面两个又有点繁琐。变更,它和被返回的对象是同一个对象。在非父子组件通信时,可以使用通常的。中,被传入的对象会直接被。翻译过来我们可以理解成。原创 2023-05-22 09:08:43 · 460 阅读 · 0 评论 -
Vue项目如何进行部署?是否有遇到部署服务器后刷新404问题?
是一种网络应用程序或网站的模型,所有用户交互是通过动态重写当前页面,前面我们也看到了,不管我们应用有多少页面,构建物都只会产出一个。前后端分离开发模式下,前后端是独立布署的,前端只需要将最后的构建物上传至目标服务器的。这么做以后,服务器就不再返回 404 错误页面,因为对于所有路径都会返回。产生问题的本质是因为我们的路由是通过JS来执行视图切换的,会被包含在请求中 ,因此对于服务端来说,即使没有配置。是没有相关配置的,所以就会出现 404 的情况。模式我们都知道是用符号#表示的,如。原创 2023-05-16 17:19:15 · 598 阅读 · 1 评论 -
Vue实现淘宝商品放大镜效果
Vue实现淘宝商品放大镜效果,实现原理:两个盒子,通过映射来同步进行移动,达到移动放大镜的效果注意点:遮罩层的面积/盒子的面积 == 大图展示盒子的面积/大图图片的面积,一定要是等比例的才行,严格控制样式遮挡层的移动距离/大图的移动距离=遮挡层的最大移动距离/大图的最大移动距离大图的移动距离=遮挡层的移动距离*大图的最大移动距离/遮挡层的最大移动距离原创 2023-04-12 10:09:54 · 419 阅读 · 1 评论 -
Vue开发技巧总结
通常在组件中使用路由参数,大多数人会做以下事情。在组件中使用 $route 会导致与其相应路由的高度耦合,通过将其限制为某些 URL 来限制组件的灵活性。正确的做法是通过 props 来解耦。将路由的 props 属性设置为 true 后,组件内部可以通过 props 接收 params 参数。还可以通过功能模式返回道具。功能组件是无状态的,它不能被实例化,也没有任何生命周期或方法。创建功能组件也很简单,只需在模板中添加功能声明即可。原创 2023-02-09 14:17:57 · 255 阅读 · 0 评论 -
为什么data属性是一个函数而不是一个对象?
组件、实例和组件定义data的区别vue实例的时候定义data属性既可以是一个对象,也可以是一个函数,组件中定义data属性,只能是一个函数如果为组件data直接定义为一个对象上面讲到组件data必须是一个函数,不知道大家有没有思考过这是为什么呢?在定义好一个组件的时候,vue最终都会通过Vue.extend()构成组件实例这里模仿组件构造函数,定义data属性,采用对象的形式原创 2023-02-01 19:12:48 · 2110 阅读 · 0 评论 -
Vue中的 v-show 和 v-if 的区别
是真正的条件渲染,它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时,并不做操作,直到为真才渲染。切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;的作用效果是相同的(不含v-else),都能控制元素在页面是否显示。等条件需要处理,这里我们也只摘抄源码中处理。具体解析流程这里不展开讲,大致流程如下。不管初始条件是什么,元素总是会被渲染。的时候不会触发组件的生命周期。只是简单的基于css切换。有更高的初始渲染消耗;要复杂的多,因为还有。原创 2023-02-02 01:00:00 · 647 阅读 · 0 评论 -
Vue路由中,history和hash两种模式有什么区别?
浏览器在刷新的时候,会按照路径发送真实的资源请求,如果这个路径是前端通过 history API 设置的 URL,那么在服务端往往不存在这个资源,于是就返回 404 了。因此在线上部署基于 history API 的单页面应用的时候,一定要后端配合支持才行,否则会出现大量的 404。history API 是 H5 提供的新特性,允许开发者直接更改前端路由,即更新浏览器 URL 地址而不重新发起请求。当做视图渲染容器,当切换路由的时候触发视图容器的更新,这其实就是大多数前端框架哈希路由的实现原理。原创 2023-01-19 22:21:38 · 3547 阅读 · 1 评论 -
SSR是什么?Vue中怎么实现?
称其为,意为服务端渲染指由服务侧完成页面的 结构拼接的页面处理技术,发送到浏览器,然后为其绑定状态与事件,成为完全可交互页面的过程先来看看3个阶段的发展史:网页内容在服务端渲染完成,⼀次性传输到浏览器 打开页面查看源码,浏览器拿到的是全部的结构单页应用优秀的用户体验,使其逐渐成为主流,页面内容由渲染出来,这种方式称为客户端渲染 打开页面查看源码,浏览器拿到的仅有宿主元素,并没有内容解决方案,后端渲染出完整的首屏的结构返回,前端拿到的内容包括首屏及完整结构,应用激活后依然按照方式运行 看完前端发展,再看看官原创 2023-01-09 17:32:00 · 5296 阅读 · 0 评论 -
Vue中自定义指令是什么?有哪些应用场景?
开始之前先学习一下指令系统这个词指令系统是计算机硬件的语言系统,也叫机器语言,它是系统程序员看到的计算机的主要属性。因此指令系统表征了计算机的基本功能决定了机器所要求的能力在vue中提供了一套为数据驱动视图更为方便的操作,这些操作被称为指令系统我们看到的v-开头的行内属性,都是指令,不同的指令可以完成或实现不同的功能除了核心功能默认内置的指令 (v-model和v-show),Vue也允许注册自定义指令指令使用的几种方式://会实例化一个指令,但这个指令没有参数`v-xxx`原创 2023-01-09 12:10:01 · 577 阅读 · 0 评论 -
vue-loader做了哪些事情?
使用 vue-loader 的之前, 需要安装一些必要的 loader必需的 loader 包括:vue-loader、vue-style-loader、vue-template-compiler、css-loader。 可能需要的 loader 包含:sass-loader、less-loader、url-loader 等。一个包含 vue-loader 的简单 webpack配置 如下:注意,当使用的 vue-loader 版本为 15.x.x 时, 必须使用 vue-loader 提供的 Vue原创 2023-01-02 19:15:12 · 567 阅读 · 3 评论 -
Vue 页面渲染的流程
在Vue核心中除了响应式原理外,视图渲染也是重中之重。我们都知道每次更新数据,都会走视图渲染的逻辑,而这当中牵扯的逻辑也是十分繁琐。本文主要解析的是初始化视图渲染流程,你将会了解到从挂载组件开始,Vue是如何构建VNode,又是如何将VNode转为真实节点并挂载到页面。初始化调用$mount挂载组件。_render开始构建VNode,核心方法为,一般会创建普通的VNode,遇到组件就创建组件类型的VNode,否则就是未知标签的VNode,构建完成传递给_update。patch阶段根据VNode。原创 2023-01-01 17:21:45 · 5928 阅读 · 2 评论 -
Vue 中 CSS scoped 的原理
在日常的Vue项目开发过程中,为了让项目更好的维护一般都会使用模块化开发的方式进行。也就是每个组件维护独立的template,script,style。主要介绍一下使用为什么在页面渲染完后样式之间并不会造成污染。原创 2022-12-31 10:49:18 · 1886 阅读 · 10 评论 -
Electron + Vue 实现输入法自动刷字数
通过以上思路可以确定关键点在于robotjs库触发键盘模拟点击。所以更加简单的方法就是使用NodeJs, 在NodeJs中引入robotjs库模拟点击,一样可以实现刷字数。不过需要引入keypress来监听键盘输入(其中一种库,还有其它库可以监听)。Electron + Vue 如果有代码细节不清楚,参考Electron + Vue 实现源码。原创 2022-12-26 08:01:21 · 227 阅读 · 1 评论 -
vue项目中使用CDN引入
CDN(内容分发网络)指请求资源的方式,即通过script头去请求对应的脚本资源的一种方式,项目里配置之后不需要通过npm包管理工具去下载配置的包。目的:将引用的外部js、css文件剥离开来,不编译到vendor.js中,而是用资源的形式引用,这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来,达到加速首页展示效果。原创 2022-12-25 21:15:00 · 10246 阅读 · 3 评论 -
vue2.x与vue3.x中自定义指令详解
vue自定义指令(2.x丨3.x)可以帮助我们实现需要操作,比如防抖、节流、懒加载、输入框自动聚焦等等,使用起来非常方便,比如vue自带的v-text、v-html、v-show、v-if等等。局部自定义指令:只在组件内有效全局自定义指令:所有组件都有效bind:只会调用一次,指令 第一次 绑定到元素时会调用inserted:被绑定元素插入父节点时调用。update:元素第一次绑定不会触发,绑定的值发生更新触发,可能发生在其子节点更新之前。原创 2022-12-24 10:08:07 · 1615 阅读 · 4 评论 -
VNode 有哪些属性?
可以看到在Vue内部,对于一个Vnode描述对象的属性大概有二十多个。Vue为了给用于减轻一定的负担,但又不至于太封闭,就创建了渲染函数。可以在用户需要的时候,通过函数创建对应的Vnode即可。原创 2022-12-15 09:14:08 · 1032 阅读 · 0 评论 -
对Vue中keep-alive的理解
在平常开发中,有部分组件没有必要多次初始化,这时,我们需要将组件进行持久化,使组件的状态维持不变,在下一次展示时,也不会进行重新初始化组件。也就是说,keepalive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染,也就是所谓的组件缓存。是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。原创 2022-12-13 09:15:57 · 427 阅读 · 0 评论 -
Vite的原理
基于esbuild与Rollup,依靠浏览器自身ESM编译功能, 实现极致开发体验的新一代构建工具!先介绍一些基础概念:依赖:指开发不会变动的部分(npm包、UI组件库),esbuild进行预构建。源码:浏览器不能直接执行的非js代码(.jsx、.css、.vue等),vite只在浏览器请求相关源码的时候进行转换,以提供ESM源码。开发环境利用浏览器原生的ES Module编译能力,省略费时的编译环节,直给浏览器开发环境源码,dev server只提供轻量服务。原创 2022-12-13 08:59:27 · 346 阅读 · 0 评论 -
Vue中组件间通信的6种方式
它的本质是通过创建一个空的 Vue 实例来作为消息传递的对象,通信的组件引入这个实例,通信的组件通过在这个实例上监听和触发事件,来实现消息的传递。组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互进行直接的引用,所以组件间的相互通信是非常重要的。子组件通过 props 属性来接受父组件的数据,然后父组件在子组件上注册监听事件,子组件通过 emit 触发事件来向父组件发送数据。考虑一种场景,如果A是B组件的父组件,B是C组件的父组件。原创 2022-12-11 21:15:47 · 2878 阅读 · 1 评论 -
对vue的mixin的理解,有什么应用场景?
vuex公共状态管理,在一个组件被引入后,如果该组件改变了vuex里面的数据状态,其他引入vuex数据的组件也会对应修改,所有的vue组件应用的都z是同一份vuex数据。(在js中,有点类似于浅拷贝)组件:在父组件中引入组件,相当于在父组件中给出一片独立的空间供子组件使用,然后根据props来传值,但本质上两者是相对独立的。Mixins:则是在引入组件之后与组件中的对象和方法进行合并,相当于扩展了父组件的对象与方法,可以理解为形成了一个新的组件。,这样就可以提高代码的重用性,使你的代码保持干净和易于维护。原创 2022-12-09 11:59:19 · 929 阅读 · 0 评论 -
【Map 和 WeakMap 的区别】
1.传统对象结构Map本质上是一个键值对的集合。和传统对象结构相比,传统对象只能用字符串作为键名,这在使用上造成了很大的限制。上面带代码中,我们创建了一个对象并将一个节点对象作为它的键名,并进行了代码测试,首先验证了获取到的element节点为一个对象,再确定了经过toString方法转化后的结果,以这个值为键名成功的输出了value值objectData。上面的代码证明了传统对象的键名会通过toString方法转化为字符串类型注意:在我们访问对象成员的时,键名有空格时不能采用点访问,例如data.a原创 2022-12-06 16:01:20 · 641 阅读 · 0 评论 -
Vue组件间通信方式都有哪些?
组件间通信这个词进行拆分都知道组件是最强大的功能之一,中每一个可以视之为一个组件通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的。广义上,任何信息的交通都是通信组件间通信即指组件()通过某种方式来传递信息以达到某个目的举个例子在使用框架中的组件,可能会往组件中传入某些数据,这个本质就形成了组件之间的通信在古代,人们通过驿站、飞鸽传书、烽火报警、符号、语言、眼神、触碰等方式进行信息传递,到了今天,随着科技水平的飞速发展,通信基本完全利用有线或无线电完成,相继出现了有线电话、固定电话、无线原创 2022-12-04 20:38:17 · 118 阅读 · 0 评论 -
【vue生命周期】
Vue实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom->渲染、更新->渲染、卸载等⼀系列过程,称这是Vue的⽣命周期。各个生命周期作用beforeCreate(创建前)组件实例被创建之初,组件的属性生效之前created(创建后)组件实例已经完全创建,属性也绑定,但真实dom还没有生成,$el还不可用beforeMount(挂载前)在挂载开始之前被调用相关的render函数首次被调用mounted(挂载后)update(更新后)...原创 2022-07-29 15:40:33 · 164 阅读 · 0 评论 -
Vuex的学习
关于vuex的基础知识理解原创 2022-06-11 09:07:44 · 181 阅读 · 0 评论 -
【Vue介绍】
Vue.js是一套构建用户界面的渐进式框架。Vue 只关注视图层, 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue.js 使用了基于 HTML 的模板语法,允许声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。引入vue.js<script src="https://cdn.jsdelivr.net/npm/vue@2/.原创 2022-05-10 09:53:21 · 434 阅读 · 0 评论