Vue
文章平均质量分 62
RayShyy
阿巴..阿巴阿巴阿巴...
展开
-
Vue中的mixin(混入)
Vue.js官方解释:混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。如果多个组件有很多相同的功能,那么就可以把这些相同的功能抽离出来写成一个混入对象,如有需要直接引入使用混入即可,引入后混入中在data中定义的数据,methods中定义的方法等都会成为组件中自己的数据和方法,相当于将混入对象中的数据、方法等合并到组件身上,可以减少代码的冗余。原创 2022-11-13 14:16:41 · 1952 阅读 · 0 评论 -
Vue中$forceUpdate强制更新
vue强制更新:你可能还没有留意到数组或对象的变更检测注意事项,或者你可能依赖了一个未被 Vue 的响应式系统追踪的状态,调用this.$forceUpdate()强制更新方法,会更新视图和数据,强制触发vue的update方法。上述两种情况实则更改了数据,页面并没有进行响应更改视图,除了使用this.$set外,使用this.$forceUpdate()强制更新也可以解决上述问题。原创 2022-11-13 10:59:14 · 2127 阅读 · 0 评论 -
Vue中动态绑定style样式写法
style样式中属性的值可以在data中定义,也可以直接写。数组形式写法就是把一组一组的样式放到一起。原创 2022-11-12 20:15:50 · 3399 阅读 · 0 评论 -
Vue中的ref属性
大家在使用原生JS对DOM进行操作时肯定第一步是需要获取DOM元素的,比如通过id获取document.getElementById(“idName"),或者使用jQuery获取 jQuery对象$("#idName”),vue对此也实现了比较方便的获取操作DOM的用法 — ref属性。在子组件中使用ref属性,通过this.$refs.refName获取的是组件的实例对象也就是子组件本身。在普通DOM元素中使用ref属性,通过this.$refs.refName获取的是DOM元素。原创 2022-11-02 10:17:50 · 4030 阅读 · 1 评论 -
Vue中的生命周期
什么是vue生命周期Vue生命周期:每一个vue实例从创建到销毁的过程就是这个vue实例的生命周期。在这个过程中,vue实例经历了从创建到挂载到更新再到销毁等一系列过程。在了解生命周期之前,我们先来看一张vue生命周期图:beforeCreate(创建前)vue被创建后进入的第一个生命周期钩子函数。此时数据代理等还没有开始, vue实例身上还没有data中的数据,methods方法等,此时还无法访问data中的数据、methods中的方法。created(创建后)在进入created中。已原创 2022-10-28 18:18:57 · 1066 阅读 · 0 评论 -
Vue中的自定义指令
大家在开发vue项目时都使用过vue指令,比如v-text、v-show、v-bind等,这些其实都是vue内部自己事先实现好的指令,供我们开发者使用,当然我们也可以自己定义一些指令来满足一些需求,在自定义指令内部主要对DOM元素进行操作,比如v-show指令内部实现就是给DOM元素改变其display属性。//自定义指令 }name:自定义指令名称,通过v-name使vue可以识别;target:自定义指令绑定的数据源;原创 2022-10-26 22:47:09 · 1129 阅读 · 0 评论 -
Vue中的内置指令
v-show:条件渲染指令,和v-if类似,区别是v-if指令是对DOM元素进行移除和插入操作,v-show是DOM元素已经存在,根据v-show的值的真假来改变其身上的display属性控制器显示和隐藏。v-html:和v-text用法一样,不过和v-text区别是v-html可以识别html标签, v-text无法识别,类似于innerHTML。v-cloak:v-cloak没有值,相当于添加一个标记,搭配css使用, Vue实例创建完毕后会将其删除,主要用于网速较慢页面显示异常问题。原创 2022-10-26 22:08:17 · 1241 阅读 · 0 评论 -
Vue中过滤器用法详解
Vue.js官方文档说明:可被用于一些常见的文本格式化。个人理解就是把一些不需要的东西过滤掉,只是对数据进行加工处理然后返回处理后的数据,和计算属性很相似。过滤器的应用场景:平常在开发中,过滤器的应用场景有很多,比如单位转换、文本格式化、时间格式化之类的等。ps:在vue3.0中已废弃filter。原创 2022-10-24 22:51:57 · 9225 阅读 · 0 评论 -
Vue中this.$set()的用法
会对data中定义的数据进行一次加工,会给每一个数据通过Object.defineProperty()添加getter和setter,即使数据层层嵌套也没问题,因为vue底层写了一个递归方法,所以不用担心data中的某个数据没有添加setter和getter;在setter中,会有对数据改变页面响应发生改变的处理;然后将加工后的数据赋给vue实例对象中的_data中;然后会将_data中的每一个数据通过Object.defineProperty()数据代理添加到vue实例对象身上;原创 2022-10-22 22:41:48 · 618 阅读 · 0 评论 -
Vue中动态绑定class样式
绑定的样式个数不确定(可以添加或删除任意一个class),名字也不确定。要绑定的样式个数确定,名字也确定,但是要动态决定是否使用。一个元素绑定多个class,点击添加或删除class。有两个class样式,第一个使用,第二个不使用。样式的类名不确定,需要动态指定。点击一个元素更改其绑定的类名。原创 2022-10-19 14:29:17 · 7338 阅读 · 0 评论 -
Vue中computed和watch的区别
computed的getter在初次读取时执行后,会将结果进行缓存,如果在其他地方再次访问时,当依赖的数据没有发生改变时,会直接拿缓存;了解计算属性和侦听器的开发者都知道,这两者其实都可以来解决很多相同的问题,今天小shy带大家来聊下它们之间的区别都有哪些。watch默认不会立即执行,当配置immediate为true时进入页面会立即执行一次;computed内有异步操作时无效,无法监听数据的变化。当需要在数据变化时执行异步或开销较大的操作时;依赖多个data中的数据做一些复杂操作时。原创 2022-10-18 20:08:30 · 1302 阅读 · 0 评论 -
Vue中的事件修饰符
给button和其父元素添加了相同的点击事件,vue默认存在事件冒泡,即点击button触发其绑定的方法,然后会向外逐层判断是否有绑定相同的点击事件,如果有则会触发,这里button添加stop这个修饰符就是用来阻止事件冒泡行为的。由于vue默认是冒泡,如果点击button触发了其身上的点击事件(e.target是button),之后会向外层查找是否有相同的点击事件,这里div添加了self修饰符,触发点击的目标元素并不是div,则不会触发div上的点击事件。原创 2022-10-17 20:49:39 · 1410 阅读 · 0 评论 -
Vue中watch的详解
2.1 watch基础语法被监听的数据:data中定义的数据;数据改变后的值:该数据改变后的新值;数据改变之前的值:该数据改变之前的值。2.2 watch监听单个简单数据类型在输入框中输入文本后:这里text改变了三次,分别输入1、2、3,得到如上输出。2.3 监听复杂数据类型的某个属性的变化检测某个属性值的时候需要用对象.属性名的写法,用法和简单数据类型一致。2.4 immediate (立即处理 进入页面就触发)2.5 deep 深度监听3. watch简写形式代码如下:..原创 2022-07-08 11:27:40 · 33186 阅读 · 1 评论 -
Vue指令v-show和v-if的区别
在Vue项目的开发中,经常会遇到通过条件判断来显示和隐藏页面的需求,也就是"条件渲染",我们通常会使用v-if 或 v-show来实现,今天主要讲下两者的区别和应用场景。原创 2022-06-30 11:34:43 · 826 阅读 · 0 评论 -
Vue中的计算属性computed
计算属性基础例子结果:Original message: “Hello”Computed reversed message: “olleH”计算属性的缓存(重点)计算属性和methods的对比那么为什么还要多一个计算属性这个东西呢?原因:计算属性会将第一次计算出来的结果进行缓存,如果多次使用,计算属性所依赖计算的数据没有改变,会直接拿缓存,不会再次调用计算属性里的方法(除非依赖的属性发生改变),极大提高了性能。代码演示如下:输出如下:“方法被调用了”“方法被调用了”“方法被调用了”“原创 2022-06-26 22:08:55 · 485 阅读 · 0 评论 -
Vue中的MVVM模型
MVVM:Vue官方文档原文:M: 模型(Model),相当于Vue中data中的数据;V: 视图(View),模板代码,展示给用户的DOM页面;VM: 视图模型(ViewModel),Vue实例,充当View与Model之间通信的桥梁,如下图。DOM Listeners: DOM 监听,当DOM发生一些事件时,可以监听到,并在需要的情况下改变对应的Data。Data Bindings: 数据绑定,将Model的改变实时反映到View中。...原创 2022-06-23 14:23:10 · 603 阅读 · 0 评论