指令

关于指令的使用:

      指令 (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 只调用一次,指令与元素解绑时调用

      这些钩子函数接收参数: elbindingvnodeoldVnode
      除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操作,就可以提出来成为指令。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,377评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,390评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,967评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,344评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,441评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,492评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,497评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,274评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,732评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,008评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,184评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,837评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,520评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,156评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,407评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,056评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,074评论 2 352

推荐阅读更多精彩内容