@@ -5,10 +5,10 @@ order: 9
55
66## 基础
77
8- Vue.js允许你注册自定义指令,实质上是让你教Vue一些新技巧:怎样将数据的变化映射成DOM的行为。你可以使用` Vue.directive(id, definition) ` 的方法传入** 指令名称 ** 和** 定义对象** 来注册一个全局自定义指令。定义对象要能提供一些钩子函数(全都可选):
8+ Vue.js允许你注册自定义指令,实质上是让你教Vue一些新技巧:怎样将数据的变化映射成DOM的行为。你可以使用` Vue.directive(id, definition) ` 的方法传入** 指令id ** 和** 定义对象** 来注册一个全局自定义指令,经由一个指令id来完成一个定义的对象 。定义对象要能提供一些钩子函数(全都可选):
99
1010- ** bind** :仅调用一次,当指令第一次绑定元素的时候。
11- - ** update** : 第一次调用是在 bind之后 ,用的是初始值;以后每当绑定的值发生变化就会被调用,新值与旧值作为参数。
11+ - ** update** : 第一次是紧跟在bind之后调用 ,用的是初始值;以后每当绑定的值发生变化就会被调用,新值与旧值作为参数。
1212- ** unbind** :仅调用一次,当指令解绑元素的时候。
1313
1414** Example**
@@ -45,18 +45,18 @@ Vue.directive('my-directive', function (value) {
4545})
4646```
4747
48- 所有的钩子函数会被复制到实际的** 指令对象** 中,而指令对象就是访问这些函数时的 ` this ` 上下文环境。指令对象有一些有用的公开属性 :
48+ 所有的钩子函数会被复制到实际的** 指令对象** 中,通过它,可以如同 ` this ` 上下文环境一样访问这些函数的内部功能。指令对象有一些有用的公开设定 :
4949
5050- ** el** : 指令绑定的元素
51- - ** vm** : 拥有该指令的上下文视图模型
51+ - ** vm** : 拥有该指令的视图模型上下文
5252- ** expression** : 绑定的表达式,不包括参数和过滤器
5353- ** arg** : 当前参数
5454- ** raw** : 未被解析的原始表达式
5555- ** name** : 不带前缀的指令名
5656
57- <p class =" tip " > 你应该把所有的这些属性看成是只读的 ,并且限制它们发生改变。你也可以给指令对象附加自定义的属性,但是注意不要重写已有的内部属性。
57+ <p class =" tip " > 你应该把所有的这些设定看成是只读的 ,并且限制它们发生改变。你也可以给指令对象附加自定义的属性,但是注意不要重写已有的内部属性。
5858
59- 下面是自定义指令使用其中一些属性的例子 :
59+ 下面是自定义指令使用其中一些设定的例子 :
6060
6161``` html
6262<div id =" demo" v-demo =" LightSlateGray : msg" ></div >
@@ -132,9 +132,9 @@ Vue.directive('demo', function (value) {
132132```
133133
134134
135- ## 直接指令
135+ ## 字面指令
136136
137- 如果在创建自定义指令的时候传入 ` isLiteral: true ` ,那么属性值就会被看成直接字符串 ,并被指定为该指令的` 表达式 ` 。指令不会试图建立数据监视。
137+ 如果在创建自定义指令的时候传入 ` isLiteral: true ` ,那么特性值就会被看成直接字符串 ,并被指定为该指令的` 表达式 ` 。指令不会试图建立数据监视。
138138
139139Example:
140140
@@ -151,9 +151,9 @@ Vue.directive('literal-dir', {
151151})
152152```
153153
154- ### 动态直接量
154+ ### 动态字面
155155
156- 然而,在直接指令含有mustache标签的情形下 ,指令的行为如下所示:
156+ 然而,在字面指令含有mustache标签的情形下 ,指令的行为如下所示:
157157
158158- 指令实例会有一个标记,` this._isDynamicLiteral ` 被设为 ` true `
159159
@@ -208,7 +208,7 @@ Vue.directive('my-directive', {
208208
209209## 深度监视
210210
211- 如果你希望在一个 ` Object ` 上使用自定义指令,并且当对象的内嵌属性发生变化时触发指令的 ` update ` 函数,那么你就要在指令的定义中传入 ` deep: true ` 。
211+ 如果你希望在一个 ` Object ` 上使用自定义指令,并且当对象的内嵌特性发生变化时触发指令的 ` update ` 函数,那么你就要在指令的定义中传入 ` deep: true ` 。
212212
213213``` html
214214<div v-my-directive =" obj" ></div >
@@ -226,13 +226,13 @@ Vue.directive('my-directive', {
226226
227227## 指令优先级
228228
229- 你可以选择给指令提供一个优先级数(默认是0)。同一个元素上优先级越高的指令会比其他的指令处理得早一些。优先级一样的指令会按照其在元素属性列表中出现的顺序依次处理 ,但是不能保证这个顺序在不同的浏览器中是一致的。
229+ 你可以选择给指令提供一个优先级数(默认是0)。同一个元素上优先级越高的指令会比其他的指令处理得早一些。优先级一样的指令会按照其在元素特性列表中出现的顺序依次处理 ,但是不能保证这个顺序在不同的浏览器中是一致的。
230230
231231你可以去[ API reference] ( ../api/directives.html ) 看一些内置指令的优先级。另外,逻辑控制指令` v-repeat ` , ` v-if ` 被视为“终端指令”,它们在编译过程中始终拥有最高的优先级。
232232
233233## 元素指令
234234
235- 有时候,我们可能想要我们的指令被用于自定义元素的form中,而不是作为一个属性 。这与Angular的` E ` 类指令的概念非常相似。元素指令向一个成熟的组件(本向导随后将解释它),提供一个轻量化的选择。你可以注册一个自定义的元素指令,像这样:
235+ 有时候,我们可能想要我们的指令被用于一个表单的自定义元素,而不是作为一个特性 。这与Angular的` E ` 类指令的概念非常相似。元素指令向一个成熟的组件(本向导随后将解释它),提供一个轻量化的选择。你可以注册一个自定义的元素指令,像这样:
236236
237237``` js
238238Vue .elementDirective (' my-directive' , {
@@ -255,8 +255,8 @@ Vue.elementDirective('my-directive', {
255255<my-directive ></my-directive >
256256```
257257
258- 元素指令不能接受参数或表达式,但是它可以读取元素的属性 ,来决定它的行为。
258+ 元素指令不能接受参数或表达式,但是它可以读取元素的特性 ,来决定它的行为。
259259
260- 与通常的指令有个很大的不同,元素指令是** 终端** 式的,这意味着,一旦Vue遇到一个元素指令,它将导致元素及它的子元素独立 - 只有元素指令可以操作该元素及其子元素 。
260+ 与通常的指令有个很大的不同,元素指令是** 终端** 式的,这意味着,一旦Vue遇到一个元素指令,它将导致元素及它的子元素独立 - 即只有元素指令可以操作该元素及其子元素 。
261261
262262下面,我们来看怎样写一个[ 自定义过滤器] ( ../guide/custom-filter.html ) 。
0 commit comments