Vue
文章平均质量分 53
即兴小索奇
看到都会回复哈,有任何问题都可留言或私信~感谢每一位小伙伴
展开
-
v-if 和 v-show的区别是什么
v-if 用于条件性地渲染元素,如果表达式的值为 false,则元素将不被渲染到 DOM 中。v-show 也用于条件性地渲染元素,但是不同的是,无论表达式的值是 true 还是 false,元素都会被渲染到 DOM 中,并且通过 CSS 的 display 属性来控制元素的显示或隐藏。原创 2024-04-30 16:07:52 · 19 阅读 · 0 评论 -
小图标还不会设计!
ICON图标制作,太简单啦原创 2024-04-20 23:41:47 · 384 阅读 · 0 评论 -
为啥加问号?可选链(Optional Chaining)的操作符
作为可选链(Optional Chaining)的操作符,其目的是为了安全地访问对象的深层属性,而不会因为对象链中的某个环节不存在(是为了实现可选链,它允许开发者在访问对象属性时不必显式检查每个中间对象是否存在,从而使得代码更加简洁和安全。),如果对象链中的某个环节不存在,那么函数调用将不会执行,并且表达式的结果将是。在JavaScript中,使用问号。将不会尝试访问,并且整个表达式。后面可以跟属性访问(如上例中的。),也可以跟函数调用(例如。,而不是抛出一个错误。原创 2024-04-19 00:22:48 · 206 阅读 · 1 评论 -
箭头函数多个函数体
函数体包含了一个条件判断语句,判断数组中的元素是否为偶数,然后通过。// 输出: [2, 4, 6]下面是一个包含多个函数体语句的箭头函数示例:‘当箭头函数需要多个语句组成函数体时,需要使用花括号。包含了多个语句组成的函数体。方法会筛选出符合条件的元素组成一个新的数组。将多个语句包裹起来,并且需要显式地使用。存储问候语,然后将问候语与传入的。在这个例子中,箭头函数被用作。在这个例子中,箭头函数。,最后输出到控制台。原创 2024-04-17 01:22:07 · 661 阅读 · 0 评论 -
#是啥,v-slot插槽的区别
来定义具名插槽,以便更清晰地表达代码意图,并且能够充分利用 Vue 3.x 提供的新特性。是 Vue 2.x 中的插槽语法,在 Vue 3.x 中仍然兼容,但已经被废弃。用于具名插槽,它允许您为插槽指定名称,并允许您传递具名插槽的内容。是 Vue 2.6+ 和 Vue 3.x 推荐的新的插槽语法。在 Vue 3.x 中,您还可以使用。在 Vue 3.x 中,可以使用。都是用于定义插槽,但是推荐使用。原创 2024-04-15 16:31:37 · 432 阅读 · 0 评论 -
scoped的作用是这些!
如果在 Vue 组件的样式中不使用 scoped 属性,那么该样式将会影响到整个应用程序中的所有组件,而不仅仅是当前组件。这种全局样式可能会导致样式冲突和混乱,特别是在大型应用程序中。scoped 是一个用于样式作用域的特殊属性。当你给一个组件的样式添加了 scoped 属性时,这些样式将只会作用于该组件的 DOM 结构,而不会影响到其它组件。这种方式使得你可以在 Vue 组件中编写样式时更加自信,因为你可以放心地使用通用的类名和样式,而不必担心它们会影响到其它地方的样式。在上面的示例中, 我们给。原创 2024-04-15 10:38:35 · 178 阅读 · 0 评论 -
location.href和 window.location的区别有这些!
则提供了更丰富的 URL 相关功能,包括获取、设置和操作页面 URL 的各个部分。主要用于页面跳转,而。原创 2024-04-13 17:14:20 · 354 阅读 · 0 评论 -
localstorage是什么
是 HTML5 提供的一种客户端存储数据的机制,它可以让你在浏览器中存储键值对,并且在页面关闭后数据依然保留。可以用于存储一些不敏感且不需要在会话之间传递的数据,比如用户的偏好设置、缓存数据等。中存储的数据只在当前会话(session)中有效,不同窗口之间不共享数据。中存储的数据会一直保存在客户端,直到被手动删除或者清除浏览器缓存。中的数据是保存在客户端,因此不适合存储敏感信息,如密码等。中存储的数据在同一浏览器的不同窗口之间是共享的,而。类似的 API,但是。原创 2024-04-13 17:12:20 · 266 阅读 · 0 评论 -
Options API:和compositionAPI分别是什么,有什么区别哇
Options API 和 Composition API 是 Vue.js 中用于编写组件的两种不同的方式。原创 2024-04-13 11:28:24 · 304 阅读 · 0 评论 -
你可能有疑问,为什么对象类型不能用ref呢?
为了避免出现意料之外的问题,并且保持代码的一致性和可读性,我们应该使用。类型实现的,它主要用于包装基本类型的值,并提供了响应式的访问和更新接口。可以用于创建对象类型的响应式数据,但并不建议这样做,因为在处理对象类型数据时,对象进行了特殊处理,使其可以像普通对象一样使用,因此在这个例子中修改。函数创建的响应式数据是基于 Vue 3 的。函数来创建对象类型的响应式数据,而不是使用。对象的属性,结果发现对象的属性修改成功了。对象,而不是一个普通的对象。,以及一个对象类型的响应式数据。对象的属性看起来是有效的。原创 2024-04-13 11:24:38 · 257 阅读 · 0 评论 -
在属性值中使用 JavaScript 表达式进行运算
将属性值声明为 JavaScript 表达式。这样,Vue 就会将属性值解析为 JavaScript 表达式,并且计算其结果,而不是将其作为字符串处理。在 Vue 模板中,属性值通常被解析为字符串。如果你想要在属性值中使用 JavaScript 表达式进行运算,可以使用冒号。<Student name="小索奇" :grade="0.1+0.1"/>这样,Vue 将会计算。原创 2024-04-13 11:13:08 · 230 阅读 · 1 评论 -
小白也理解了v-on
在 Vue 模板中,可以使用 v-on 指令来监听 DOM 事件,语法为 v-on:事件名 或者简写为 @事件名。当事件触发时,Vue 会调用指定的方法或者表达式。v-on 是 Vue.js 中用于绑定事件监听器的指令,它可以在 DOM 元素上监听各种事件,并在事件触发时执行相应的方法。原创 2024-04-13 10:46:51 · 108 阅读 · 0 评论 -
带你开启组件化编程
组件指的是将用户界面拆分成更小、可复用的部分,每个部分都有自己的模板、样式和逻辑。模块化:组件让我们能够将应用拆分成独立的、可复用的模块(样式、结构、交互都能够复用),这样可以让开发变得更有组织、易于维护和可扩展。vm就是大哥,组件就是老弟,老弟必须听从大哥的指挥,老弟也能是小弟的大哥,需要的时候都过来,不需要呆在一结构分明,可以复用。原创 2023-12-01 13:53:19 · 460 阅读 · 0 评论 -
【Vue】绝了!这生命周期流程真...
在每次数据变化触发更新时,Vue 会创建一个新的虚拟 DOM,然后将新的虚拟 DOM 与之前的虚拟 DOM 进行比较,找出差异,然后将这些差异应用于真实 DOM。指向的对象)取决于函数的调用方式而 Vue 在创建组件实例时,会在内部确保生命周期钩子函数的执行上下文是指向组件实例的。生命周期函数(钩子)就是给我们提供了一些特定的时刻,让我们可以在这个周期段内加入自己的代码,做一些需要的事情;原创 2023-11-28 23:20:48 · 1094 阅读 · 6 评论 -
【Vue】自定义指令
hello我是小索奇,定义指令就是自己定义的指令,是对 DOM 元素进行底层操作封装 ,程序化地控制 DOM,拓展额外的功能全局定义Vue.directive(指令名字, definition)指令名:不包括v-前缀,使用时候包括v-,v-指令名definition: 对象,包含指令逻辑// definition 就代表下面的函数,// el 是绑定的 DOM 元素})局部定义new Vue({'focus': {})// 直接写成函数形式,部分细节问题会处理不了el: 指令绑定的DOM元素,可以直接操作。原创 2023-11-22 22:56:15 · 1415 阅读 · 0 评论 -
store下的getter.js什么作用
你可以在获取 store 中的数据时执行一些逻辑,而不仅仅是简单地获取原始的 state 数据。这对于在应用中进行复杂的状态计算或转换非常有用。在 Vue.js 应用中,Vuex 是一种用于集中管理应用状态的状态管理工具。允许你在获取 state 中的数据时进行一些计算或处理。可以用于从 store 中获取派生的状态,类似于计算属性。这个文件通常包含一系列的 getter 函数。在上面的例子中,有三个 getters 分别是。是 store 的一部分,可以在。或在组件中的计算属性中访问。原创 2023-11-19 17:46:38 · 456 阅读 · 0 评论 -
Vue.js 路由时用于提高应用程序性能
标签: 这是Vue.js的过渡效果组件,用于在元素进入或离开DOM时应用过渡效果。在这里,过渡效果的名称为 “fade-transform”,模式为 “out-in”,表示在旧元素离开之后,新元素进入。标签: 这是Vue.js的 组件,用于保留组件状态或避免组件被销毁。标签: 这是Vue.js的路由视图组件,用于根据当前路由渲染匹配的组件。:key=“key” 表示通过给每个路由视图分配一个唯一的 key 值,来确保在切换路由时,Vue.js 知道何时重新渲染组件。这里定义了组件的结构和布局。原创 2023-11-19 17:39:42 · 512 阅读 · 0 评论 -
【Vue】内置指令真的很常用!
hello,我是小索奇,内置指令...v-pre、v-tex v-cloak用于隐藏未编译的Mustache 语法,也就是说在 Vue 实例初始化渲染之前,会先隐藏带有 v-cloak 的元素(coak :n.斗篷、遮盖物、v.遮盖的意思)当 Vue 实例初始化完成,编译结束后,会自动删除 v-cloak 属性,display也就不会限制含有v-cloak的标签了,这样元素就会显示出来。使用 v-cloak 可以避免这个问题,它会先隐藏未编译的内容,等 Vue 初始化结束后再显示出来,这样就可以避免闪烁啦。原创 2023-11-16 08:22:53 · 392 阅读 · 5 评论 -
【Vue】过滤器Filters
只有没有传值的参数才会使用默认值,如果调用hello时没有传入参数,或者传入了undefined,x会自动获取默认值’default value’为什么使用var1呢?过滤器可以对绑定的数据进行格式化后再展示,它本质上是一个可以接收数据、进行处理并返回结果的函数我们可以在插值表达式或。原创 2023-11-13 23:12:14 · 524 阅读 · 0 评论 -
vue中getter.js作用是什么呢
在 Vue.js 中,getter 是 Vuex 提供的一种 API,它是 store 的计算属性。Getter 的功能是根据它们所依赖的 state 变化而变化,对 store 中的状态进行过滤、计算和组合,并返回新的状态。举个例子,假设我们有一个购物网站,store 中存储了商品的数量和价格,我们想要计算所有商品的总价,这时候就可以使用 getter。我们可以创建一个名为 bigSum 的 getter,当调用这个 getter 时,它会返回商品数量和价格的乘积,也就是商品的总价。原创 2023-11-09 21:34:15 · 161 阅读 · 0 评论 -
还不懂Vuex是什么?和组件之间的关系是什么?
与组件之间的关系来说,Vuex 可以将多个组件的共同状态或数据提取出来,用一个全局单例模式管理,这样多个组件就可以共享并使用 Vuex 的数据。简而言之,Vuex 提供了一个公共数据源,所有共享的数据都统一存放在 Store 中,只要 Vuex 中的数据发生变化,对应的组件就会自动更新。每个页面都需要显示一些共享的数据,比如用户登录状态、购物车中的商品数量等等。值得注意的是,Vuex 的状态存储是响应式的,这意味着当 Vue 组件从 store 中读取状态的时候,如果状态发生变化,那么组件会自动更新。原创 2023-11-09 21:24:12 · 131 阅读 · 0 评论 -
【Vue】终结v-model
vimodel.只有没有传值的参数才会使用默认值,如果调用hello时没有传入参数,或者传入了undefined,x会自动获取默认值'default value'我们一输入数字在输入框中默认就变成字符串数字了,v-model.number就是vue默认给我们进行转换,输入的是纯数字~过滤器可以对绑定的数据进行格式化后再展示,它本质上是一个可以接收数据、进行处理并返回结果的函数我们可以在插值表达式或。这里我们在格式化日期的过滤器函数中,利用ES6的默认参数为format设置了一个默认值'YYYY-MM-DD'原创 2023-10-19 08:56:12 · 397 阅读 · 0 评论 -
路由中的meta是什么?
字段是您为路由定义的自定义字段,它可以用来存储路由相关的一些额外信息。您可以把它理解为附加在路由上的标签或属性,这些标签或属性对应的信息可以在路由守卫、组件等地方被访问和利用。有时候,您可能希望为特定的路由添加一些额外的信息或配置,而这些配置在其他地方可能并不适用。是一种为路由附加额外信息的方式,这些信息可以在后续的代码中被引用和利用。// 使用 to.meta 来访问目标路由的 meta 字段。标记某个路由是否需要加载特定的数据。在定义路由的时候,给特定路由添加。为某个路由设置特定的页面标题。原创 2023-10-09 00:11:01 · 1010 阅读 · 0 评论 -
router-link中的to带不带引号有啥区别?
简单来说,不带冒号是给定一个固定的路径,带冒号则是动态地绑定一个路径。是一个变量或者计算属性,其值会被用作导航路径。的值是一个固定的字符串。原创 2023-10-08 23:44:25 · 67 阅读 · 0 评论 -
一文解释mapState的来龙去脉
Vuex 提供的辅助函数之一,将 store 中的状态映射到组件的计算属性中,使得在组件中可以轻松地访问 Vuex store 中的状态值。让我们可以非常方便地将 Vuex store 中的状态映射到组件中,避免了在每个组件中都需要写一遍。(在数组中的字符串)是 Vuex store 中的状态名,从state中读取数据。返回的是一个包含一个函数的对象,所以...把mapState的这些属性全部展开。(在计算属性中的名字)是我们在组件中可以使用的计算属性名。返回的数组中提取出来,并将它作为组件的计算属性。原创 2023-10-05 23:59:34 · 479 阅读 · 0 评论 -
点击router-link时候会发生什么?
会触发Vue Router的导航流程,这个过程包括了路由匹配、权限验证、钩子函数的执行等一系列操作,最终将目标组件渲染到页面中。: Vue Router会将解析得到的目标路由与路由配置中的规则进行匹配,以确定最终前往哪个路由。: 如果一切正常,Vue Router将根据匹配到的目标路由,执行页面的切换操作。: Vue Router会拦截这个点击事件,阻止浏览器默认的页面跳转。),Vue Router会依次执行这些操作,以决定是否允许导航。属性,这个属性指定了目标路由的路径或命名路由。原创 2023-10-03 23:04:48 · 1148 阅读 · 0 评论 -
【Vue】数据监视&输入绑定
hello,我是小索奇,Vue实现数据监测的核心是通过defineProperty()劫持属性的getter& setter,当我们获取data数据时,底层getter & setter来实现的,在属性读取或修改时可以进行额外操作这实际上将数据对象“代理”了一层,形成所谓的“响应式数据”具体一点来说哈,在初始化组件时,Vue会遍历data对象的所有属性,使用Object.defineProperty将它们转换成getter/setter这种代理允许Vue追踪依赖,在属性被访问和修改时通知变化,表单输入绑原创 2023-09-30 12:03:00 · 302 阅读 · 8 评论 -
路由器和路由到底啥区别?
它相当于导航系统,可以定义页面之间的映射关系。而浏览器则扮演路由器的角色,根据 Vue Router 的配置,加载和切换不同页面,来实现导航功能。而 GPS 导航仪根据路由提供的路径,告诉我们每个路口是否需要转弯,该走哪条道,这就是路由器。所以 Vue Router 是前端路由的实现,它和浏览器协同工作,来完成路由这一功能。导航系统会给出从当前位置到目标位置的建议路径,这就是路由。类似地,在网页开发中,我们也有页面之间的导航或路由。可以看出,路由负责路径规划,路由器负责路径执行。原创 2023-09-28 20:53:59 · 292 阅读 · 1 评论 -
【Vue】条件渲染&列表渲染来啦
小索奇全套Vue v-if这个指令根据表达式的真假来决定是否渲染元素例如:2. v-else-if/v-elsev-else-if表示v-if的“else-if”条件,v-else表示最后的“else”条件例如:3. 用key管理可复用元素让Vue通过key值识别元素,提高渲染效率例如:4. v-show基于CSS显示/隐藏元素,只是切换display例如:如果要频繁的更改,使用会更好点,因为它仅是切换隐藏显示,效率更高v-if 和 v-show 在条件渲染时的选择判断如下当需要完全切换显示/隐原创 2023-09-27 20:42:52 · 396 阅读 · 0 评论 -
【Vue】了解这些类和样式绑定就够了!
hello,我是小索奇,精心制作的Vue系列持续发放,涵盖大量的经验和示例,由浅入深进行讲解。本章给大家讲解的是类和样式绑定,前面的章节已经更新完毕,后面的章节持续输出,有任何问题都可以留言或私信哈,一起加油~原创 2023-09-25 13:35:24 · 78 阅读 · 0 评论 -
一个案例搞懂解构
hello,我是小索奇,看到很多人还不懂解构,这里用很简单的例子给大家讲解下哈。的语法从user对象中取出了name和age属性,赋值给同名变量。解构语法可以让我们从对象或数组中提取值,并赋值给变量。两段小代码,如果有不懂的欢迎留言~原创 2023-09-23 23:57:30 · 84 阅读 · 0 评论 -
【异常报错】must call Vue.use(Vuex)
must call Vue.use(Vuex)其实仔细想想也可以发现,import就把整个文件给引入了,而index.js中有创建Store的实例,而在这时我们还没有Vue.use(Store),这样就报错了。把你main.js中的Vue.use(Vuex)写到store中,这里我的store/index.js中,即完美解决。这个错误应该是在创建Vuex中出现的。原创 2023-09-22 23:54:39 · 489 阅读 · 1 评论 -
为什么import store from ‘./store‘和 ‘./store/index‘一样
的文件(可以是JavaScript或TypeScript文件,取决于你的项目配置)。当你只导入目录路径时,默认会查找该目录下的。文件作为入口,所以即使你不写index它也会默认去找到index入口文件。这两种方式会导入相同的内容,因为在一个目录中,通常只会有一个。这种方式假定在当前文件所在目录下有一个名为。这种方式直接指定了要导入的文件路径为。原创 2023-09-22 23:15:48 · 412 阅读 · 0 评论 -
带你掌握开发者必备的WebStorageAPI,客户端案例细讲
localStorage&sessionStorage统称为WebStorage,API相同,掌握一个,即掌握两个,WebStorage 是浏览器提供的一种用于在客户端存储数据的机制。它允许你在用户的浏览器中存储数据,并且该数据在用户关闭浏览器后仍然保留。这意味着即使用户关闭了浏览器,下次打开时仍然可以访问存储的数据,下面以localStorage为例,详细介绍下localStorage哈,后面有简单的综合案例让大家明白这一重点。原创 2023-09-08 23:53:25 · 104 阅读 · 8 评论 -
vuex如何安装、报错、安装版本注意事项
npm i vuex报错,为什么呢?在2022.2.7,Vue3就变成了默认版本,Vue2中,必须要用Vuex的3版本Vue3中,必须要用Vuex的4版本,否则会报错npm i vuex 安装的就是4版本如果我们需要安装3版本,就要用npm i vuex@3vuex4安装命令npm ivuex@next另外拓展一下2014年,首个版本0.x发布2015年,1.x版本发布,采用虚拟DOM2016年,2.x版本发布,性能得到大幅提升2018年,2.6版本发布,原创 2023-09-22 21:59:19 · 430 阅读 · 0 评论 -
【Vue】深究计算和侦听属性的原理
对比侦听属性 & 计算属性计算属性主要适用于:需要对数据进行转换或格式化后再显示需要使用多个数据计算得出一个结果进行显示需要缓存结果,避免每次重复计算浮动面板或列表中需要对每个元素做重复计算侦听属性主要适用于:需要在数据变化时触发副作用,比如调用接口、导航路由等(后期会提到)需要进行异步操作或开销较大的处理(比如使用定时器)需要参数化或复用监听逻辑当值的变化需要改变多个状态时简单来说,如果单纯显示或格式化数据,使hello,我是小索奇,精心制作的Vue系列教程持续更原创 2023-09-22 13:02:37 · 511 阅读 · 8 评论 -
【Vue】上万个字把事件处理讲解的淋漓尽致
hello,我是小索奇,精心制作的Vue系列教程持续更新哈,想要学习&巩固&避坑就一起学习吧~重点内容使用v-on:xxx缩写@xxx绑定事件,其中 xxx 是事件名(回顾:v-bind缩写为冒号:)事件的回调需要配置在methods对象中,最终会在VM上methods中配置的函数,不要用箭头函数,否则 this 就不是VM了,重点强调!methods中配置的函数,都是被 Vue所管理的函数,this 的指向是VM(ViewModel-vue实例对象)或组件实例对象@click="dem原创 2023-09-21 10:43:13 · 150 阅读 · 9 评论 -
【Vue】轻松理解数据代理
Vue数据代理Object定义配置方法引出数据代理,轻松理解数据代理的原理原创 2023-09-20 21:12:04 · 262 阅读 · 2 评论 -
【Vue】MVVM模型还没懂嘛
hello,我是小索奇,精心制作的Vue教程持续更新哈,想要学习&巩固&避坑就一起学习叭~,Vue虽然没有完全遵循MVVM模型,但Vue的设计也收到了它的启发在文档中也会使用VM(ViewModel的缩写)这个变量名表示Vue实例(Vue作者参考了MVVM模型,并非其创建的)这里简单拓展一下:Java中的MVC(模型Model-视图View-控制器Controller-一种架构模式)MVC:M代表Model数据层 , V代表View视图层 , C代表Controller控制层(中介), 用户发送请求,C原创 2023-09-19 13:40:44 · 410 阅读 · 19 评论 -
【Vue】el 和 data短小精湛的细节!
由Vue管理的函数,一定不要写箭头函数,否则 this 就不再是Vue实例了,箭头函数没有this,那么向上"继承",找到全局window,这句话能带你走更长的路~hello,我是小索奇,精心制作的Vue教程持续更新哈,花费了大量的时间和精力,总结拓展了很多疑难点,想要学习&巩固&避坑就一起学习叭~在这里哪种写法都可以,但到后期给伙伴们讲到组件时,data必须使用函数,否则会报错。函数式可以在每个实例中返回新的对象,防止对象被复用时数据互相污染。函数式:data() { return { } }原创 2023-09-18 14:26:15 · 208 阅读 · 4 评论