javascript-vue-指令

一个指令的本质就模板中出现的特殊标记,让处理模板的库知道需要对这里的DOM元素进行处理。

vue的指令概念相比ng要简单的多。vue中的指令只会以带前缀的html特性的形式出现:

<element prefix-directives="[argument:]expression[|filters...]"></element>

简单示例

<div v-text="message"></div>

这里的前缀默认是v-。指令的ID是text,表达式是message。这个指令告诉vue,当vue实例的message属性改变时,更新该div元素的textContent。

内联表达式

<div v-text="'hello'+user.firstName+''+user.lastName"></div>

这里我们是使用了一个表达式,而比仅仅是简单的属性名。vue会自动跟踪表达式中依赖的属性并在这些依赖发生变化的时候出发指令更新。同时,因为有异步批处理更新机制,哪怕多个依赖同时变化,表达式也只触发一次。

明智的使用表达式,并避免你的模板里放过多的逻辑,尤其是有副作用的语句。为了防止在模板内滥用逻辑,vue把内联表达式限制为一条语句。如果需要绑定更复杂的操作,请使用计算属性。

出于安全,在内联表达式中,你只能访问当前上下文中vue实例的属性和方法。

参数

<div v-on="click:clickHandler"></div>

有些指令需要早路径和表达式前加一个参数。在这个例子中click参数代表了我们希望v-on指令监听到的点击事件之后该ViewModel实例的clickHandler方法。

过滤器

过滤器是可以紧跟在指令的路径或表达式之后,在更新DOM之前对值进行进一步处理。过滤器跟在一个管道符(|)之后。

多重指令从句


可以在同一个特性里多次绑定同一个指令。这些绑定用逗号分割,他们在底层被分解为多个指令实例进项绑定。

<div v-on="click:onClick,keyup:onKeyup,keydown:onKeydown"></div>

字面量指令

有些指令不会创建数据绑定——他们的值是一个字符串字面量。比如v-ref指令:

<my-component v-ref="some-string-id"></my-component>

  这里的“some-string-id”并不是一个反应式的表达式——vue不会尝试去观测组件中的对应数据。

有些情况下,也可以使用Mustache风格绑定来是的字面量指令“反应化”:

<div v-show="showMsg" v-transition="{dynamicTransitionld}"></div>

  但是,注意只有v-transition指令具有此特性。Mustache表达式在其他字面量指令中,例如v-ref和v-el,只会被计算一次。他们在编译完成后将不会再相应数据的变化。

空指令

有些指令不需要判断特性的值——这些操作对某个元素处理且仅处理一次。比如v-pre指令:

<div v-pre>
  <!--内部模块将不会被编译-->
</div>

  

原文地址:https://www.cnblogs.com/yaxinwang/p/6407297.html