Vue2
文章平均质量分 77
Vue2相关知识点
扶苏1002
一个热衷于技术的前端博主
展开
-
vue内置组件Transition的详解
会在一个元素或组件进入和离开 DOM 时应用动画。会在一个 v-for 列表中的元素或组件被插入,移动,或移除时应用动画。简单地说,就是当元素发生变化,比如消失、显示时,添加动画让它更自然过渡。它是vue内置组件,不需要引入注册就可以直接使用。通过name可以自定义的过渡类名。注意:里面只能有一个根组件,但使用v-if、v-else、v-else-if切换显示是可以的。如果想对列表中的元素设置过渡,可以使用。原创 2024-04-15 16:31:02 · 972 阅读 · 0 评论 -
分析Vue与VueComponent的关系
datamethodswatchcomputedthisdatamethodswatchcomputedthisVue实例对象。原创 2024-02-03 15:44:54 · 314 阅读 · 0 评论 -
Vue2中的数据代理和数据劫持
通过一个对象代理对另一个对象中属性的操作(读/写)x: 100,y: 500,get() {},set(val) {})是指在访问或修改对象的属性时,对这些操作进行拦截和监视,以便在属性发生变化时能够触发相关的操作。原创 2024-02-03 15:38:50 · 309 阅读 · 0 评论 -
Vue中的异步组件详解
是指通过异步方式加载的组件。当我们的项目达到一定的规模时,对于某些组件来说,我们并不希望一开始全部加载,而是需要的时候进行加载。这样做可以很好的提高用户体验,加快页面的载入速度,为此Vue 提供了异步组件的性能优化方案。对比项普通组件异步组件加载方式在应用启动时一次性加载所有组件按需动态加载组件,只有在实际需要时才加载性能所有组件都会在应用启动时加载,可能导致初始加载时间较只加载必要的组件,减少初始加载时间,提高应用性能可复用性组件可以在不同的页面或场景中复用。原创 2024-02-03 13:17:57 · 1477 阅读 · 0 评论 -
Vue动态组件以及keep-alive的使用
匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值)。缓存:如果缓存的实例数量即将超过指定的那个最大数量,则最久没有被访问的缓存实例将被销毁,以便为新的实例腾出空间。我们这里有两个组件Left和Right,需求:在app根组件中点击按钮可以按需显示组件。要求被切换到的组件都有自己的名字,不论是通过组件的。默认会缓存内部的所有组件实例,但我们可以通过。以上代码中a和b均为两个组件的组件名。属性来限制可被缓存的最大组件实例数。原创 2024-02-03 10:30:52 · 485 阅读 · 0 评论 -
Vue过滤器的基本用法
在这个例子中,filterA 被定义为接收单个参数的过滤器函数,表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB,将 filterA 的结果传递到 filterB 中。这里,filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数,普通字符串 ‘arg1’ 作为第二个参数,表达式 arg2 的值作为第三个参数。当全局过滤器和局部过滤器重名时,会采用局部过滤器。在Vue3中已被删除。原创 2024-02-02 16:17:49 · 257 阅读 · 0 评论 -
Vue组件之间的样式冲突问题
可以给你的组件添加一个全局不重复的类,配合less语法实现内部样式私有。属性,在这个style标签内的所有选择器都会加上。Vue2.x的深度作用选择器正式写法。Vue3.x的深度作用选择器正式写法。这个时候就需要用到样式穿透。深度作用选择器的简写形式。也就是说,当组件加上。组件的样式是不生效的。原创 2024-02-02 16:01:31 · 525 阅读 · 0 评论 -
Vue的调试工具安装
只有在含有Vue的网页中才有如下选项。访问极简插件官网搜索devtools。点击 Chrome 浏览器。原创 2024-02-02 15:45:29 · 433 阅读 · 0 评论 -
Vue2 的12种组件通讯
data() {return {obj: {msg: "Home组件的msg",},},return {},this.obj.msg = "Home组件中msg的值被改变啦";},子组件使用sun组件</div>插槽(Slot)是vue为组件的封装者提供的能力。允许开发者在封装组件时,把不确定的、希望由用户指定的部分定义为插槽。原创 2024-02-02 14:06:46 · 912 阅读 · 0 评论 -
计算属性computed侦听器watch
watch是 vue 中常用的监听器,它主要用于侦听数据的变化,在数据发生变化的时候执行一些操作。Vue官网很明确的建议我们这样使用watch侦听属性:当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。原创 2024-02-02 13:13:28 · 584 阅读 · 0 评论 -
Vue组件的生命周详解
使用 keep-alive 就不会调用 beforeDestroy(组件销毁前钩子)和 destroyed(组件销毁),因为组件没被销毁,被缓存起来了,这个钩子可以看作 beforeDestroy 的替代。在组件第一次渲染时会被调用(created/mounted也会被调用),之后在每次缓存组件被激活时调用。keep-alive是Vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。生命周期强调的是时间段,生命周期函数强调的是时间点。在被 keep-alive 包裹的。原创 2024-02-02 11:57:23 · 966 阅读 · 0 评论 -
vue中的key有什么作用(key原理)
若对数据进行逆序添加、逆序删除等破坏顺序操作,会产生没有必要的真实DOM更新,界面没有问题,但是效率低。如果结构中还包含输入类的DOM(如input输入框):会产生错误DOM更新=>界面有问题。原创 2024-02-02 09:18:21 · 408 阅读 · 0 评论 -
vue修饰符最全
如果不用keyCode修饰符,那我们每次按下键盘都会触发shout,当我们想指定按下某一个键才触发这个shout的时候,这个修饰符就有用了,具体键码查看。在Vue中,修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间去处理这些烦恼的事情,而能有更多的精力专注于程序的逻辑处理。当我们写如下代码的时候,我们会发现如果仅仅使用系统修饰键是无法触发keyup事件的。事件会让我们的网页变卡,因此我们使用这个修饰符的时候,相当于给。另,如果是鼠标事件,那就可以单独使用系统修饰符。原创 2024-02-02 11:17:40 · 979 阅读 · 0 评论 -
Vue插值表达式及常用指令
插值表达式是vue框架提供的一种在html模板中绑定数据的方式,使用。原创 2024-02-01 17:54:39 · 1353 阅读 · 0 评论 -
初识Vue
Vue 是一个用于①构建用户界面的②渐进式③框架。原创 2024-02-01 14:55:09 · 136 阅读 · 0 评论