vue
文章平均质量分 75
一笑而泯
这个作者很懒,什么都没留下…
展开
-
VUE:v-for的使用及源码
一、前言v-for可以说是vue中使用最多的指令之一,不过,你真的了解它吗?v-for不仅仅能用于遍历数组,也不仅仅能用于遍历对象。二、使用先说结论:v-for可以遍历数组、对象、数字以及字符串,以及,在vue3版本新增的对于部署了iterator接口的对象的支持。下面是各种场景的分析,以(item,index) in obj的使用方式为例:<div v-for="(item,index) in obj"></div>1.遍历数组遍历数组时,item是.原创 2020-11-29 19:58:02 · 1380 阅读 · 1 评论 -
Vue开发高级小技巧
1.事件绑定和解绑通常,我们会在mounted中给dom绑定事件,然后在beforeDestroy中解绑。不过,有的时候,绑定和解绑写在两个不同的函数里面会觉得有些麻烦,也不利于维护。其实,可以通过$once+hook将事件绑定和解绑写在一起。原写法: public mounted() { this.targetRef.addEventListener("click", this.add, false); } public beforeDestroy() { this原创 2020-07-25 17:00:25 · 670 阅读 · 0 评论 -
vue3新特性及api介绍(三)
继续之前的内容二、vue3新特性14.customRefcustomRef创建一个自定义依赖项和跟踪触发的ref属性,也就是说,我们可以控制这个属性何时触发对应的监听。要求返回一带有get和set方法的对象。比如这样,我们修改之后延迟2s触发对应的更新。 function useDebouncedRef(value, delay = 2000) { let timeout; return customRef((track, trigger) => {原创 2020-05-10 19:28:57 · 1578 阅读 · 0 评论 -
vue3项目初始化及新特性体验(一)
前段时间刚发布了vue3的beta版本,这几天大概上手体验了一下,感觉有些东西变化还是挺明显的,虽然完全兼容之前的api,不过新版vue肯定是更有优势的,具体优势的体现还需要以后开发中会慢慢体会到。一、初始化项目首先,安装脚手架(已经安装过的可跳过此步骤)npm install -g @vue/cli然后初始化项目,vue create vue3-test选择自定义模式...原创 2020-05-05 22:11:20 · 2594 阅读 · 3 评论 -
vue中nextTick的实现原理及自定义一个nextTick
一、介绍vue中的nextTick(组件实例是$nextTick)方法是比较常见的,一般想延迟执行某个逻辑时可以使用它。之前我们一般是用setTimeout(0)来模拟类似的操作。其实,在浏览器中nextTick是用es6中的Promise实现的。它创建了一个resolve状态的Promise示例,以在下一轮微任务中执行它。在不支持Promise的环境中,优先用setImmediate,如...原创 2020-04-25 22:11:12 · 1098 阅读 · 0 评论 -
关于vue中watch和computed的触发机制说说数组的操作对watch的影响
一、介绍vue中的watch和computed相信大家都不陌生,项目中使用场景非常多。原理就不多说了,已经嚼烂了。在这里说一下一个小小的点。对数组的不同操作,会影响watch的结果,有时项目里这是一个坑。二、示例下面这个代码,是点击之后对list进行一个赋值操作,watch一下list,<template> <div> <div v-...原创 2020-04-25 21:30:45 · 3050 阅读 · 0 评论 -
VUE:自定义指令(directives )选项的用法
自定义指令分为全局指令和局部指令。全局指令可在任意vue组件内生效,局部指令仅在注册了指令的组件内生效。全局指令和局部指令写法几乎相同。全局指令是在main.js内使用Vue.directive注册,局部指令是在组件的directives选项写入。下面介绍一下指令的具体用法。指令,常用于封装一些涉及dom的公共功能,比如表单的自动获取焦点,列表的下拉收缩等。一、指令的钩子函数指...原创 2018-11-18 01:43:56 · 10777 阅读 · 0 评论 -
VUE:混入 (mixins)选项的用法
在vue组件内,如果想将一些公共功能,如组件、方法、钩子函数等复用,混入是一个很好的选择。下面简单介绍一下混入的方式及特点。首先来看看官方文档的介绍:具体的说,你可以将一个对象作为混入的选项,在组件中复用。因为vue实例也是对象,所以你可以将vue实例作为混入选项传递进去。组件中的mixins接收一个数组作为值。<template> <div class...原创 2018-11-07 00:43:55 · 3557 阅读 · 0 评论