Vue.js每天必学之数据双向绑定(2)

当然,这似乎没有意义,因为我们只需要使用 href="https://www.jb51.net/a/b/c" 而不必使用一个指令。这个例子只是为了演示语法。后面我们将看到修饰符更多的实践用法。

缩写

v- 前缀是一种标识模板中特定的 Vue 特性的视觉暗示。当你需要在一些现有的 HTML 代码中添加动态行为时,这些前缀可以起到很好的区分效果。但你在使用一些常用指令的时候,你会感觉一直这么写实在是啰嗦。而且在构建单页应用(SPA )时,Vue.js 会管理所有的模板,此时 v- 前缀也没那么重要了。因此Vue.js 为两个最常用的指令 v-bind 和 v-on 提供特别的缩写:

v-bind 缩写

<!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> <!-- 完整语法 --> <button v-bind:disabled="someDynamicCondition">Button</button> <!-- 缩写 --> <button :disabled="someDynamicCondition">Button</button>

v-on 缩写

<!-- 完整语法 --> <a v-on:click="doSomething"></a> <!-- 缩写 --> <a @click="doSomething"></a>

它们看起来跟“合法”的 HTML 有点不同,但是它们在所有 Vue.js 支持的浏览器中都能被正确地解析,并且不会出现在最终渲染的标记中。缩写语法完全是可选的,不过随着一步步学习的深入,你会庆幸拥有它们。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzfzfz.html