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
-`inserted`: called when the bound element has been inserted into its parent node (this only guarantees parent node presence, not necessarily in-document).
-`update`: called whenever the bound element's containing component is updated. The directive's value may or may not have changed. You can skip unnecessary updates by comparing the binding's current and old values (see below on hook arguments).
-**el**: The element the directive is bound to. This can be used to directly manipulate the DOM.
77
-
-**binding**: An object containing the following properties.
78
-
-**name**: The name of the directive, without the `v-`prefix.
79
-
-**value**: The value passed to the directive. For example in `v-my-directive="1 + 1"`, the value would be `2`.
80
-
-**oldValue**: The previous value, only available in `update`and`componentUpdated`. It is available whether or not the value has changed.
81
-
-**expression**: The expression of the binding as a string. For example in `v-my-directive="1 + 1"`, the expression would be `"1 + 1"`.
82
-
-**arg**: The argument passed to the directive, if any. For example in `v-my-directive:foo`, the arg would be `"foo"`.
83
-
-**modifiers**: An object containing modifiers, if any. For example in `v-my-directive.foo.bar`, the modifiers object would be`{ foo: true, bar: true }`.
84
-
-**vnode**: The virtual node produced by Vue's compiler.<!--See the [VNode API]([!!TODO: Add link to the VNode API doc when it exists]) for full details.-->
85
-
-**oldVnode**: The previous virtual node, only available in the `update`and`componentUpdated`hooks.
77
+
-**el**: 指令所绑定的元素，可以用来直接操作 dom 。
78
+
-**binding**: 一个对象，包含以下属性：
79
+
-**name**: 指令名，不包括 `v-`前缀。
80
+
-**value**: 指令的绑定值， 例如： `v-my-directive="1 + 1"`, value 的值是 `2`。
<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>
Vue.directive('color-swatch', function (el, binding) {
147
148
el.style.backgroundColor=binding.value
148
149
})
149
150
```
151
+
## 对象常量
150
152
151
-
## Object Literals
152
-
153
-
If your directive needs multiple values, you can also pass in a JavaScript object literal. Remember, directives can take any valid JavaScript expression.
Copy file name to clipboardExpand all lines: src/guide/mixins.md
+19-19Lines changed: 19 additions & 19 deletions
Original file line number
Diff line number
Diff line change
@@ -4,14 +4,14 @@ type: guide
4
4
order: 17
5
5
---
6
6
7
-
## Basics
7
+
## 基础
8
8
9
-
Mixins are a flexible way to distribute reusable functionalities for Vue components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixin will be "mixed" into the component's own options.
var component =newComponent() // -> "hello from mixin!"
32
32
```
33
33
34
-
## Option Merging
34
+
## 选项合并
35
35
36
-
When a mixin and the component itself contain overlapping options, they will be "merged" using appropriate strategies. For example, hook functions with the same name are merged into an array so that all of them will be called. In addition, mixin hooks will be called **before**the component's own hooks:
Options that expect object values, for example `methods`, `components`and`directives`, will be merged into the same object. The component's options will take priority when there are conflicting keys in these objects:
Note that the same merge strategies are used in `Vue.extend()`.
87
+
注意： `Vue.extend()` 也使用同样的策略进行合并。
88
88
89
-
## Global Mixin
89
+
## 全局混合
90
90
91
-
You can also apply a mixin globally. Use caution! Once you apply a mixin globally, it will affect **every** Vue instance created afterwards. When used properly, this can be used to inject processing logic for custom options:
<pclass="tip">Use global mixins sparsely and carefully, because it affects every single Vue instance created, including third party components. In most cases, you should only use it for custom option handling like demonstrated in the example above. It's also a good idea to ship them as [Plugins](/guide/plugins.html) to avoid duplicate application.</p>
When custom options are merged, they use the default strategy, which simply overwrites the existing value. If you want a custom option to be merged using custom logic, you need to attach a function to `Vue.config.optionMergeStrategies`:
0 commit comments