在前几集课中，我们使用过 v-on 来绑定响应事件。其实 v-on 还可以简写成 @ 符号，使用 @ 符号代替 v-on ，这样写它的作用是完全一样的，在日常开发中我们也会经常使用 @ 符号来简写 v-on 。

<div v-on:click="handelClick">{{message}}</div>
<div @click="handelClick">{{message}}</div>
<!--这两种写法是完全一样的-->

在上节课的学习中我们提到了 v-bind 绑定属性，还可以省略 v-bind 关键字不写，这也是 v-bind 的简写方式，在这里顺便再给大家提及一下。

<div v-bind:title="message">{{message}}</div>
<div :title="message">{{message}}</div>
<!--这两种写法是完全一样的-->

动态参数

在vue中我们， 我还可以动态的来设置 v-on 事件名称和 v-bind 属性名称，现在我们写死了一个 click 事件和 title 属性，这样显得不够灵活，想要它更灵活我们可以通过一个变量来指定成动态参数。

我们为事件添加一个event变量来指定我们的事件名称，再用attr变量来指定属性名称，在template中用 [ ] 就能使用这个动态属性了。

const App=Vue.createApp({
    data() {
      return {
        message:"hello world",
        event:"click",
        attr:"title"
      }
    },
    methods:{
      handelClick(){
        console.log("点击事件")
      }
    },
    template:`<div @[event]="handelClick" :[attr]="message">{{message}}</div>`
  })
  const vm = App.mount("#app")

然后我们现在只需要修改相对应的变量的就可以动态绑定指定事件和属性了，比如我们希望鼠标进入时执行响应事件，希望把 message 绑定到 class 属性上，我们把 event 修改成mouseenter，attr 修改成 class，然后测试一下也是完全没有问题的

  data() {
      return {
        message:"hello world",
        event:"mouseenter",
        attr:"class"
      }
  }

阻止默认事件

在编写表单的时候，我们时常会在onsubmit 事件中来处理一些数据提交前的操作。在onsubmit中我们往往会使用 e.preventDefault() 方法来阻止默认提交事件。

 methods:{
    handelSubmit(e){
       console.log("阻止默认事件")
       e.preventDefault()
    }
 },

 template:`
    <div>
      <form action="https://www.baidu.com" @submit="handelSubmit">
        <input name="userName"/>
        <button type="submit">提交</button>
      </form>  
    </div>
 `

这些常用的功能 vue为我们提供了一些修饰符，让我们以更简单的方式来完成这些操作。

在事件绑定指令上加上 prevent ，这样就能阻止触发对应的默认事件。

   methods:{
      handelSubmit(e){
        console.log("阻止默认事件")
      }
   },

   template:`
    <div>
      <form action="https://www.baidu.com" @submit.prevent="handelSubmit">
        <input name="userName"/>
        <button type="submit">提交</button>
      </form>  
    </div>`