关于指令的使用:
指令 (Directives) 是带有 v- 前缀的特殊 attribute。
指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。
指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
指令可以接收参数,用冒号连接,如:v-bind:href、v-on:click
参数也可是动态的,格式如v-bind[attributeName],所以v-bind:['href']等价于v-bind:href。
动态参数给入的参数值应当是String,如果给入null,可以用来移除绑定。给入其它类型的值都会报警告。
动态参数表达式有语法约束(具体得试试,它说表达式出现空格和引号会无效。。。而用计算属性替代复杂表达式就行。。。感觉还不是很理解)
文档提醒:“在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板),还需要避免使用大写字符来命名键名,因为浏览器会把 attribute 名全部强制转为小写。”
(发现自己没注意过怎么样直接在HTML文件里撰写模板。)
指令可以有修饰符,用点号连接,用于指出一个指令应该以特殊方式绑定。
v-on和v-bind有简写,这个平时开发中经常用,就不多说了。
关于指令的定义:
Vue2.0中,代码复用和抽象的主要形式是组件,但有时候仍然需要对普通DOM元素进行底层操作,此时就需要自定义指令。
定义Vue组件时,directives选项表示该组件实例可用哪些指令。
如果想注册全局指令,可以用Vue.directive方法。
那么不管是全局注册还是局部注册,怎么定义指令内容?
一个指令对象可以提供以下钩子函数:
bind 指令第一次绑定到元素时调用
inserted 被绑定元素插入父节点时调用(此时不一定已被插入dom中,只能保证父节点已存在)
update 所在组件的VNode更新时调用,但是可能发生在其子VNode更新之前。指令的值可能发生了改变,也可能没有。
componentUpdated 指令所在组件的VNode及其子VNode全部更新后调用
unbind 只调用一次,指令与元素解绑时调用
这些钩子函数接收参数: el、binding、vnode、oldVnode。
除el外,其它参数都应该只读,注意不要对它们做改动。
钩子简写:
如果只想在bind和update时触发相同的行为,而不关心其它钩子,可以写成这样:
Vue.directive('指令名', 回调函数)
我自己的思与惑:
什么是指令?
一种长得像dom attribute,但实际上是对VNode做一些处理的Vue语法。
怎么对VNode进行处理?
写一些钩子回调,在Vue提供的一些时刻——我把它按两类来理解——特殊的时刻(bind、inserted、unbind)和更新的时刻(update、componentUpdated)做一些处理逻辑,并且钩子函数会接收到参数,基本上这个VNode、这个VNode所在组件、指令本身的信息都能拿到。
怎么理解这些钩子?比如说一个自定义指令v-mydirective="val"
,当VNode所在组件提供的val值变化,会触发什么钩子?bind?update?两者都会触发?
试验后发现,页面加载后,bind和inserted触发。指令所在组件的任意数据导致组件需要更新dom,会触发update和componentUpdated。
为什么Vue提供的简写是触发bind和update的,并且是忽略其它钩子的?是否可以理解为这些钩子中bind和update会最实用,其它钩子较少用?能不能举一些场景来说明?
暂无法回答
指令v-on和v-bind干的是什么事?假设它们也是自定义指令,那么它们的代码内容大概是??
v-bind大概是在update的时候,对传入钩子的VNode做数据更新,比如有个input虚拟节点,写了v-bind:value=xxx,update钩子里就去更新它的value。
自定义组件上加v-bind指令的话,会做什么操作???我去看了下Vue提供的VNode API,VNode有一条属性context: Component | void; // rendered in this component's scope
,好像可以根据这个判断,如果context不为空,就更新那个component的prop。
v-on就更难猜了,我并不知道Vue怎么处理原生事件和组件的自定义事件。现在只能瞎猜一下,深入了解才能知道Vue内置指令都干了什么。
感觉虽然读了指令相关文档,但是对指令的用法还是不太能get。主要是这个自定义指令,钩子函数给入的参数就是dom元素和VNode,所以想玩指令肯定就得了解VNode,而我不了解VNode。看来,仅仅了解了指令本身那点API,是玩不动指令的。还得搭配上对Vue的更深入的了解。
我猜指令的意义是为了能复用一些dom操作的代码,就像element里的v-loading,许多个不同的组件、不同的VNode如果都需要相同的dom操作,就可以提出来成为指令。