时间:2021-05-25
Directive
看上去虽然和Angular中的定义类似,Directive 都是对DOM功能的一种拓展,但是 Vue 的 Directive 要弱的多。因为 Vue Component 其实本来就会包含对DOM的操作,所以大多数时候我们写一个通用组件都是一个Component 而不是一个 Directive,而 在 Angular 我们写一个通用的组件一般都是一个 Directive 。
所以我说 Vue 的 Directive 相比于 Angular 要弱的多,也可以说纯粹的多,他就是对 DOM 功能的一个拓展,而不是为了封装和DOM相关的逻辑。有兴趣可以通过对比这两个UI库就能明白:
•Vux https://github.com/airyland/vux
•Angular Bootstrap https://github.com/angular-ui/bootstrap
对比就会发现,其实在 Vue 中我们封装一个通用的组件(其实不管是不是通用)都是一个 Component,但是在 Angular 中却是一个 Directive,因为 Angular 中的 Controller 其实只能创建一个 $scope 作用域。可以简单的认为在 Vue Directive = Angular Directive + Controller。前面讲到过 Vue 很多设计都和Angular2类似,Vue 中的 Directive 基本可以等价于 Angular2 的 Directive,但是千万不要和 Angular 中的 Directive 搞混了。
为了避免误导,所以后面不再拿 Angular Directive 作对比了。
生命周期
生命周期分为三步:
•bind 第一次绑定到DOM元素上的时候触发
•update bind完成之后立刻触发,以后每当参数更新的时候都会触发
•unbind 解除和DOM元素的绑定时触发
API 简洁到哭。。。
其中 update 是最重要的,也就是当 Directive 接收到一个值的更新的时候就会执行对应的代码。update函数接收的参数就是用户通过 Attr 传入的值。
我们下面实现一个简单的 Directive,它的作用是对 Todo List 输入的内容进行校验(表单校验)。Directive 基本结构如下:
然后,我们需要在用户输入的时候进行校验,这里实现一个简单的 minlength 校验,代码如下:
基本逻辑就在在 bind 阶段的时候就绑定事件,然后根据 update 时候传入的 minlength 值来进行判断。
目前看,Directive 应该就是为了实现类似的功能存在的,当然还有很多细枝末节的用法就不再细讲了。Directive 在 Vue 中并不是很重要的一块,大家平时写代码的时候更多还是写 Component。
Filter 和 Mixins 看起来比较简单,略过。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
Vue.js卓越发展的前端技术框架。近些年,相继涌现了令人欣喜的前端开发框架Angular.js、React.js和Vue.js。而Vue.js是一个JavaS
开始更新前端框架Vue.JS的相关博客。功能概述学习了Vue.JS的一些基础知识,现在利用指令、数据绑定这些基础知识开发一个简单的购物车功能。功能要点如下:(1
一、Vue.js简要说明Vue.js(读音/vjuː/,类似于view)是一套构建用户界面的渐进式框架。与前端框架Angular一样,Vue.js在设
一.什么是mpvue框架?mpvue是一个使用Vue.js开发小程序的前端框架。框架基于Vue.js核心(所以建议熟练掌握vue再使用mpvue框架,否则还是建
一、介绍vue.js是目前最火的前端框架,vue.js兼具angular.js和react.js的优点,并剔除它们的缺点,并且提供了很多的周边配套工具如vue-