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: src/v2/guide/custom-directive.md
+12-12Lines changed: 12 additions & 12 deletions
Original file line number
Diff line number
Diff line change
@@ -24,10 +24,10 @@ new Vue({
24
24
</script>
25
25
{% endraw %}
26
26
27
-
When the page loads, that element gains focus (note: autofocus doesn't work on mobile Safari). In fact, if you haven't clicked on anything else since visiting this page, the input above should be focused now. Now let's build the directive that accomplishes this:
27
+
When the page loads, that element gains focus (note: `autofocus` doesn't work on mobile Safari). In fact, if you haven't clicked on anything else since visiting this page, the input above should be focused now. Now let's build the directive that accomplishes this:
28
28
29
29
```js
30
-
// Register a global custom directive called v-focus
30
+
// Register a global custom directive called `v-focus`
31
31
Vue.directive('focus', {
32
32
// When the bound element is inserted into the DOM...
33
33
inserted:function (el) {
@@ -76,16 +76,16 @@ We'll explore the arguments passed into these hooks (i.e. `el`, `binding`, `vnod
76
76
77
77
Directive hooks are passed these arguments:
78
78
79
-
-**el**: The element the directive is bound to. This can be used to directly manipulate the DOM.
80
-
-**binding**: An object containing the following properties.
81
-
-**name**: The name of the directive, without the `v-` prefix.
82
-
-**value**: The value passed to the directive. For example in `v-my-directive="1 + 1"`, the value would be `2`.
83
-
-**oldValue**: The previous value, only available in `update` and `componentUpdated`. It is available whether or not the value has changed.
84
-
-**expression**: The expression of the binding as a string. For example in `v-my-directive="1 + 1"`, the expression would be `"1 + 1"`.
85
-
-**arg**: The argument passed to the directive, if any. For example in `v-my-directive:foo`, the arg would be `"foo"`.
86
-
-**modifiers**: An object containing modifiers, if any. For example in `v-my-directive.foo.bar`, the modifiers object would be `{ foo: true, bar: true }`.
87
-
-**vnode**: The virtual node produced by Vue's compiler. See the [VNode API](../api/#VNode-Interface) for full details.
88
-
-**oldVnode**: The previous virtual node, only available in the `update` and `componentUpdated` hooks.
79
+
-`el`: The element the directive is bound to. This can be used to directly manipulate the DOM.
80
+
-`binding`: An object containing the following properties.
81
+
-`name`: The name of the directive, without the `v-` prefix.
82
+
-`value`: The value passed to the directive. For example in `v-my-directive="1 + 1"`, the value would be `2`.
83
+
-`oldValue`: The previous value, only available in `update` and `componentUpdated`. It is available whether or not the value has changed.
84
+
-`expression`: The expression of the binding as a string. For example in `v-my-directive="1 + 1"`, the expression would be `"1 + 1"`.
85
+
-`arg`: The argument passed to the directive, if any. For example in `v-my-directive:foo`, the arg would be `"foo"`.
86
+
-`modifiers`: An object containing modifiers, if any. For example in `v-my-directive.foo.bar`, the modifiers object would be `{ foo: true, bar: true }`.
87
+
-`vnode`: The virtual node produced by Vue's compiler. See the [VNode API](../api/#VNode-Interface) for full details.
88
+
-`oldVnode`: The previous virtual node, only available in the `update` and `componentUpdated` hooks.
89
89
90
90
<pclass="tip">Apart from `el`, you should treat these arguments as read-only and never modify them. If you need to share information across hooks, it is recommended to do so through element's [dataset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset).</p>
0 commit comments