Vue
Neeky Zeng
这个作者很懒,什么都没留下…
展开
-
详述Vue自定义指令
在 Vue 中我们除了可以使用核心功能默认内置的指令 (v-model和v-show)之外,Vue 同样也允许我们注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,我们仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。先来举个简单的聚焦输入框的例子,如下:当页面加载时,该 input 元素将获得焦点。事实上,只要你在打开这个...原创 2019-11-05 14:35:16 · 297 阅读 · 0 评论 -
Vue自定义混入mixin的使用
Vue提供了一种非常灵活的开发方式:混入 (mixin) ,它用来分发 Vue 组件中的可复用功能,一个混入对象可以包含任意组件选项,例如:created、methods、data、directives等等。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。Vue提供的混入对象mixin,类似于一个公共的组件,其他任何组件都可以使用它。我们可以直接把它当成一个公共方法来...原创 2019-11-05 10:34:36 · 783 阅读 · 0 评论 -
最常使用的Vue标签 教你 v-slot 插槽的作用与使用
在Vue的官方文档中,关于v-slot插槽的使用,介绍的不是非常清晰明确,插槽这个东西其实很好理解,当我们定义了一个Vue组件后,我们是不能在调用组件时在里面再定义其它的dom结构的:<submit-button> <div>Save</div></submit-button>上述这种结构是不合法的,如果submit-button组...原创 2019-11-04 15:42:40 · 734 阅读 · 0 评论 -
Vue源码:计算属性的实现原理
在Vue中有一个计算属性,只要在它的函数里引用了 data 中的某个属性,当这个属性发生变化时,函数就可以嗅探到这个变化,并自动重新执行。Vue 怎么知道计算属性在函数中引用了哪个 data 属性?这个函数又是怎么知道 data 属性变了,而且只关心它内部引用的那个属性,别的都不管?以下是官方的描述:由于涉及 Vue 的响应式绑定的原理,如果你对此不熟,最好先看看Vue源码:双向...原创 2019-10-29 16:09:51 · 2359 阅读 · 0 评论 -
Vue源码:双向绑定的实现原理
本篇博客供个人学习记录,暂时附上代码,后期进行整理。代码粘贴下来存储为html文件可直接查看效果。几种实现双向绑定的做法双向绑定可以简单的理解为:在单向绑定的基础上给可输入元素(input、textarea)添加onchange、oninput事件,来动态修改model和 view。目前几种主流的mvc(vm)框架都实现了单向数据绑定,实现数据绑定的做法有大致如下几种:发布者-...原创 2019-10-25 15:41:25 · 508 阅读 · 0 评论