You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: source/guide/custom-directive.md
+36-34Lines changed: 36 additions & 34 deletions
Original file line number
Diff line number
Diff line change
@@ -3,13 +3,13 @@ type: guide
3
3
order: 9
4
4
---
5
5
6
-
## The Basics
6
+
## 基础
7
7
8
-
Vue.js allows you to register custom directives, essentially enabling you to teach Vue new tricks on how to map data changes to DOM behavior. You can register a global custom directive with the `Vue.directive(id, definition)` method, passing in a **directive id** followed by a **definition object**. A definition object can provide several hook functions (all optional):
-**bind**: called only once, when the directive is first bound to the element.
11
-
-**update**: called for the first time immediately after `bind` with the initial value, then again whenever the binding value changes. The new value and the previous value are provided as the argument.
12
-
-**unbind**: called only once, when the directive is unbound from the element.
Once registered, you can use it in Vue.js templates like this (you need to add the Vue.js prefix to it):
34
+
一旦注册好自定义指令，你就可以在Vue.js模板中像这样来使用它（你需要提前加上Vue.js）：
35
35
36
36
```html
37
37
<divv-my-directive="someValue"></div>
38
38
```
39
39
40
-
When you only need the `update` function, you can pass in a single function instead of the definition object:
40
+
当你只用到`update`函数，你就可以只传入一个函数，而不用传定义对象：
41
41
42
42
```js
43
43
Vue.directive('my-directive', function (value) {
44
44
// this function will be used as update()
45
45
})
46
46
```
47
47
48
-
All the hook functions will be copied into the actual **directive object**, which you can access inside these functions as their `this` context. The directive object exposes some useful properties:
-**vm**: the context ViewModel that owns this directive.
52
-
-**expression**: the expression of the binding, excluding arguments and filters.
53
-
-**arg**: the argument, if present.
54
-
-**raw**: the raw, unparsed expression.
55
-
-**name**: the name of the directive, without the prefix.
50
+
-**el**: 指令绑定的元素
51
+
-**vm**: 拥有该指令的上下文视图模型
52
+
-**expression**: 绑定的表达式，不包括参数和过滤器
53
+
-**arg**: 当前参数
54
+
-**raw**: 未被解析的原始表达式
55
+
-**name**: 不带前缀的指令名
56
56
57
-
<pclass="tip">You should treat all these properties as read-only and refrain from changing them. You can attach custom properties to the directive object too, but be careful not to accidentally overwrite existing internal ones.</p>
An example of a custom directive using some of these properties:
59
+
下面是自定义指令使用其中一些属性的例子：
60
60
61
61
```html
62
62
<divid="demo"v-demo="LightSlateGray : msg"></div>
@@ -111,9 +111,10 @@ var demo = new Vue({
111
111
})
112
112
</script>
113
113
114
-
## Literal Directives
114
+
## 直接指令
115
115
116
-
If you pass in `isLiteral: true` when creating a custom directive, the attribute value will be taken as a literal string and assigned as that directive's `expression`. The directive will not attempt to setup data observation.
However, in the case that the literal directive contains mustache tags, the behavior is as follows:
136
+
然而，在直接指令含有mustache标签的情形下，指令的行为如下所示：
136
137
137
-
-The directive instance will have a flag `this._isDynamicLiteral`set to `true`;
138
+
-指令实例会有一个标记，`this._isDynamicLiteral`被设为 `true`
138
139
139
-
-If no `update`function is provided, the mustache expression will be evaluated only once and assigned to `this.expression`. No data observation happens.
-If an `update`function is provided, the directive **will** setup data observation for that expression and call `update`when the evaluated result changes.
If your directive expects to write data back to the Vue instance, you need to pass in `twoWay: true`. This option allows the use of `this.set(value)` inside the directive:
Use this wisely though, because in general you want to avoid side-effects in your templates.
187
+
但是要聪明地使用它，因为通常情况下你是想避免它在你的模板中产生副作用。
186
188
187
-
## Deep Observation
189
+
## 深度监视
188
190
189
-
If your custom directive is expected to be used on an Object, and it needs to trigger `update`when a nested property inside the object changes, you need to pass in `deep: true`in your directive definition.
You can optionally provide a priority number for your directive (defaults to 0). A directive with a higher priority will be processed earlier than other directives on the same element. Directives with the same priority will be processed in the order they appear in the element's attribute list, although that order is not guaranteed to be consistent in different browsers.
You can checkout the priorities for some built-in directives in the [API reference](../api/directives.html). Additionally, `v-repeat`, `v-if`and`v-component`are considered "terminal directives" and they always have the highest priority in the compilation process.
0 commit comments