Vue 官方文档2.x教程学习笔记 1 基础 1.4 模板语法 1.4.3 缩写-CSDN博客

本文链接：https://blog.csdn.net/weixin_44226181/article/details/128169119

本文介绍Vue 2.x版本中模板语法的缩写形式，包括v-bind和v-on指令的简化写法及其动态参数的使用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue 官方文档2.x教程学习笔记

文章目录

1 基础

1.4 模板语法

1.4.3 缩写

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的 attribute。

当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。

同时，在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。

因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

【v-bind 简写】

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

【v-on 缩写】

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

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="app">
    <!--v-bind 缩写-->
    <!--缩写-->
    <a :href="url">百度一下，你就知道</a><br/>
    <!--动态参数缩写-->
    <a :[attributename]="url">百度两下，你就知道</a><br/>

    <!--v-on 缩写-->
    <!--缩写-->
    <a @click="doSomething">点击有惊喜</a><br/>
    <!--动态参数缩写-->
    <a @[eventname]="doSomething">还有惊喜</a>
</div>



<script src="../js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            attributename: "href",
            eventname: "click",
            url: 'https://www.baidu.com',

        },
        methods: {
            doSomething() {
                window.alert("惊喜")
            }
        }
    })
</script>
</body>
</html>