关于vue.js:vue用法

33次阅读

共计 679 个字符,预计需要花费 2 分钟才能阅读完成。

1. 模板语法 - 动静参数

<a v-bind:[attributeName]="url"> ... </a>

这里的 attributeName 会被作为一个 JavaScript 表达式进行动静求值,求得的值将会作为最终的参数来应用。例如,如果你的 Vue 实例有一个 data property attributeName,其值为 “href”,那么这个绑定将等价于 v-bind:href。

<a v-on:[eventName]="doSomething"> ... </a>

在这个示例中,当 eventName 的值为 “focus” 时,v-on:[eventName] 将等价于 v-on:focus。

束缚

1. 动静参数预期会求出一个字符串,异常情况下值为 null。这个非凡的 null 值能够被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个正告。
2. 因为某些字符,如空格和引号,放在 HTML attribute 名里是有效的,变通的方法是应用没有空格或引号的表达式,或用计算属性代替这种简单表达式。

<!-- 这会触发一个编译正告 -->
<a v-bind:['foo' + bar]="value"> ... </a>

3. 在 DOM 中应用模板时 (间接在一个 HTML 文件里撰写模板),还须要防止应用大写字符来命名键名,因为浏览器会把 attribute 名全副强制转为小写:

<!--
在 DOM 中应用模板时这段代码会被转换为 `v-bind:[someattr]`。除非在实例中有一个名为“someattr”的 property,否则代码不会工作。-->
<a v-bind:[someAttr]="value"> ... </a>

正文完
 0