Vue 中常用的指令缩写 【v-bind缩写为：】【v-on缩写为@】

Vue.js为两个最为常用的指令提供了特别的缩写：

一、强制绑定 → v-bind缩写为 ：

<div id="app">
    <!--完整语法-->
    <a v-bind:href="url">百度</a>
    <img v-bind:src="imgUrl" />
    <!--缩写-->
    <a :href="url">百度</a>
    <img :src="imgUrl" />
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  const vm=new Vue({
    el: '#app',
    data: {
      url: 'http://www.baidu.com'，
      imgUrl:'https://cn.vuejs.org/images/logo.png'
    },
  })
</script>

二、事件监听 → v-on缩写 @

<div id="app">
    <!--完整语法-->
    <a v-on:click="add">添加</a>
    <!--缩写-->
    <a @click="add">添加</a>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#app',
    data: {      
    },
    methods: {
      add () {
        //这里执行添加的方法
        alert('添加成功');
      }
    }
  })
</script>