Vue基础-3(v-on:元素事件)

v-on为元素绑定事件
事件名不需要写on
指令可以简写为@
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中数据

例1：

<div id="app-3">
  <input type="button" value="v-on 单击指令" v-on:click="doIt" />
  <input type="button" value="v-on 介入指令" v-on:mouseenter="doIt" />
  <input type="button" value="v-on 双击指令" v-on:dblclick="doIt" />
  <input type="button" value="v-on 简写" @dblclick="doIt" />
  <h2 @click="changeFood">{{ food }}</h2>
</div>

var app3 = new Vue({
  el:"#app-3",
  data:{
     food:"酸辣鸡杂"
  },
  methods:{
     doIt:function(){
       alert("doIt");
     },
     changeFood:function(){
       console.log(this.food);
       this.food += "真好吃！"
     }
  },
})

v-on补充：
事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上 .修饰符 可以对事件进行限制
.enter可以限制触发的按键为回车(即输入完后，单击回车，即可触发事件)
事件修饰符有多种

例2：

<div id="app-2">
  <input type="button" @click="doIt('老铁',321)" value="Button"/>
  <input type="text" @keyup.enter="sayHi" />
</div> 

var app2 = new Vue({
  el:"#app-2",
  data:{
     
  },
  methods:{
     doIt:function(p1,p2){
       console.log(p1,p2)
     },
     sayHi:function(){
       alert("吃了没")
     }
  }
})