vuejs反编译（js反编译工具）



Proudly sponsored by

除了内置指令，Vue.js 也允许注册自定义指令。自定义指令提供一种机制将数据的变化映射为 DOM 行为。

可以用 方法注册一个全局自定义指令，它接收两个参数指令 ID 与定义对象。也可以用组件的 选项注册一个局部自定义指令。

定义对象可以提供几个钩子函数（都是可选的）：

• bind：只调用一次，在指令第一次绑定到元素上时调用。
• update： 在 之后立即以初始值为参数第一次调用，之后每当绑定值变化时调用，参数为新值与旧值。
• unbind：只调用一次，在指令从元素上解绑时调用。

示例

在注册之后，便可以在 Vue.js 模板中这样用（记着添加前缀 ）：

当只需要 函数时，可以传入一个函数替代定义对象：

所有的钩子函数将被复制到实际的指令对象中，钩子内 指向这个指令对象。这个对象暴露了一些有用的属性：

• el: 指令绑定的元素。
• vm: 拥有该指令的上下文 ViewModel。
• expression: 指令的表达式，不包括参数和过滤器。
• arg: 指令的参数。
• name: 指令的名字，不包含前缀。
• modifiers: 一个对象，包含指令的修饰符。
• descriptor: 一个对象，包含指令的解析结果。

示例：

结果

如果指令需要多个值，可以传入一个 JavaScript 对象字面量。记住，指令可以使用任意合法的 JavaScript 表达式：

当指令使用了字面修饰符，它的值将按普通字符串处理并传递给 方法。 方法将只调用一次，因为普通字符串不能响应数据变化。

有时我们想以自定义元素的形式使用指令，而不是以特性的形式。这与 Angular 的 “E” 指令非常相似。元素指令可以看做是一个轻量组件。可以像下面这样注册一个自定义元素指令：

不这样写：

这样写：

元素指令不能接受参数或表达式，但是它可以读取元素的特性从而决定它的行为。

迥异于普通指令，元素指令是终结性的，这意味着，一旦 Vue 遇到一个元素指令，它将跳过该元素及其子元素——只有该元素指令本身可以操作该元素及其子元素。

自定义指令可以接收一个 数组，指定一个特性列表，Vue 编译器将自动提取绑定元素的这些特性。例如：

此 API 也支持动态属性。 会自动保持更新。另外，可以指定一个回调，在值变化时调用：

如果自定义指令用在一个对象上，当对象内部属性变化时要触发 ，则在指令定义对象中指定 。

如果指令想向 Vue 实例写回数据，则在指令定义对象中指定 。该选项允许在指令中使用 :

传入 可以让自定义指令接受内联语句，就像 那样：

明智地使用，因为通常你要在模板中避免副效应。

1.0.19+

Vue 通过递归遍历 DOM 树来编译模块。但是当它遇到 terminal 指令时会停止遍历这个元素的后代元素。这个指令将接管编译这个元素及其后代元素的任务。 和 都是 terminal 指令。

编写自定义 terminal 指令是一个高级话题，需要较好的理解 Vue 的编译流程，但这不是说不可能编写自定义 terminal 指令。用 指定自定义 terminal 指令，可能还需要用 来编译 partial。下面是一个自定义 terminal 指令，它编译它的内容模板并将结果注入到页面的另一个地方：

如果你想编写自定义 terminal 指令，建议你通读内置 terminal 指令的源码，如 和 ，以便更好地了解 Vue 的内部机制。

可以给指令指定一个优先级。如果没有指定，普通指令默认是 ， terminal 指令默认是 。同一个元素上优先级高的指令会比其它指令处理得早一些。优先级一样的指令按照它在元素特性列表中出现的顺序依次处理，但是不能保证这个顺序在不同的浏览器中是一致的。

可以在 API 中查看内置指令的优先级。另外，流程控制指令 和 在编译过程中始终拥有最高的优先级。

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/18818.html