一起学Vuejs（十三）----- 事件

不积跬步，无以至千里；不积小流，无以成江海。

 

Vuejs语言基础

 

事件：

事件监听可以使用 v-on 指令，可以接收一个定义的方法来调用，方法中也可以传入参数。

 

格式：

v-on:事件名="函数名"  或者  v-on:事件名="函数名(参数...)"

 语法糖：

@事件 = "函数名"   或者   @事件名 = "函数名(参数...)"

 

event：函数中的默认形参，代表原生的DOM事件

注意：如果需要使用原生DOM事件，则通过 $event 作为实参传入。

<button @click="show($event)">click show!</button>

 

例子：

<div id="app">
    <button v-on:click="say">Say {{msg}}</button>
    <!-- $event 代表的是原生的DOM事件 -->
    <button @click="warn('www',$event)">Warn</button>
</div>

<script src="./node_modules/vue/dist/vue.js"></script>

<script>
new Vue({
  el: "#app",
  data: {
    msg: "你好，www",
  },
  // 定义事件处理函数
  methods: {
    say: function (event) {
      // event 代表的是DOM的原生事件，vue会自动的而将它传入进来。
      alert(this.msg);
      alert(event.target.innerHTML);
    },
    warn: function (name, event) {
      // 如果说函数有多个参数，而又需要使用原生事件，则需要使用$event作为参数传入
      alert(name + "  " + event.target.tagName);
    },
  },
});
</script>

 

 

博客借鉴：https://www.cnblogs.com/wjw1014/p/13384985.html