Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：
一、v-bind 缩写
<!-- 完整语法 --> <a v-bind:href="url">单击我试试</a> <br/> <!-- 缩写 --> <a :href="url">单击我试试</a> <br/> <!-- 动态参数的缩写 (2.6.0+) --> <a :[key]="url">单击我试试</a> <br/>
二、v-on 缩写
<!-- 完整语法 --> <a v-on:click="doSomething">再单击试试</a> <br/> <!-- 缩写 --> <a @click="doSomething">再单击试试</a> <br/> <!-- 动态参数的缩写 (2.6.0+) --> <a @[event]="doSomething">再单击试试</a> <br/>
三、全部代码如下
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>VUE简单示范</title> <script type="text/javascript" src="../js/vue.js" charset="utf-8"></script> </head> <body> <div id='app-12'> <!-- 完整语法 --> <a v-bind:href="url">单击我试试</a> <br/> <!-- 缩写 --> <a :href="url">单击我试试</a> <br/> <!-- 动态参数的缩写 (2.6.0+) --> <a :[key]="url">单击我试试</a> <br/> <!-- 完整语法 --> <a v-on:click="doSomething">再单击试试</a> <br/> <!-- 缩写 --> <a @click="doSomething">再单击试试</a> <br/> <!-- 动态参数的缩写 (2.6.0+) --> <a @[event]="doSomething">再单击试试</a> <br/> </div> <script> var myData = { url: 'http://www.baidu.com', msg: 'Hello there' , key: 'href', event: 'dblclick'} var vm1 = new Vue({ el: '#app-12', data: myData, methods: { doSomething:function(){ console.log('再单击试试，照做了'); } } }) </script> </body> </html>
本文参考：
https://cn.vuejs.org/v2/guide/syntax.html#%E7%BC%A9%E5%86%99