vuejs中如何绑定事件

绑定监视

vue.js事件监听通v-on指令配置在HTML上。实际上所有的vue.js事件处理方法和表达式都严格绑定在当前视图的viewmodel上。

优点：

1）通过查看HTML模板便能轻松定住Javascript代码对应的方法。

2）无须在js中手动绑定事件，viewmodel和DOM完全解耦，更易于测试。

3）当一个ViewModel被 销毁时，所有的事件处理器都会自动被删除。

如何绑定事件

事件处理器限制为一个js语句
 <button v-on:click="counter += 1">增加 1</button>

内联方式
<div id="demo">
<button v-on:click="greet">Greet</button>
</div>
methods配置
<script>
...
methods: {
    greet: function (event) {
      //event即原生DOM事件的传入
      // `this` 在方法里指当前 Vue 实例
      alert('Welcome to VUEJS by FYZZ!')
      // `event` 是原生 DOM 事件
      if (event) {
          alert(event.target.tagName)
      }
    }
  }
  ...
</script>

<button v-on:click="say('hi')">Say hi</button>
//methods配置
<script>
methods:{
	say:function (msg){
		alert(msg);
	}
}
</script>
//$events应用
如果在内联语句处理器中需要访问原生DOM事件时，则可以用一个特殊变量$event将其传入方法中。
<button @click="say('hello!',$event)">hello</button>
<script>
	methods:{
		say:function(msg,event){
			//现在我们可以访问原生事件对象
			event.preventDefault()
		}
	}
</script>

如何使用vue.js中的事件修饰符

DOM原生事件需要处理冒泡，捕获，取消默认事件等特殊场景。 可以用修饰符来完成（.）

<a v-on:click:stop.prevent="doThat"> </a>

//只有修饰符而不绑定事件
<form v-on:submit.prevent></form>

<!--@click.stop 停止事件冒泡 / 阻止单击事件继续传播 -->
<div style="width: 100px; height: 100px; background: blue" @click.stop="doThis"></div>


<h3>阻止事件的默认行为</h3>
<a href="http://www.baidu.com" rel="external nofollow" @click.prevent="test7">去百度</a>
<form v-on:submit.prevent="onSubmit"></form>


<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 添加事件监听器时使用事件捕获模式 -->

<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

.stop （取消冒泡） .prevent （取消默认事件） .capture （捕获阶段执行） .self （只有event.target 就是当前元素才执行） .once （只执行一次，执行完就销毁） .passive （滚动事件允许默认行为和scroll不阻塞执行）

vuejs中 按键修饰符

监听键盘事件经常需要检测keyCode.

<input v-on:keyup.13="submit".../>

.enter （回车触发）(keycode:13) .tab （tab键盘触发）(keycode:9) .delete (捕获“删除”和“退格”键)(keycode:8,46) .esc （esc键触发）(keycode:27) .space （空格键触发）(keycode:32) .up （向上的键触发）(keycode:38) .down（向上的键触发）(keycode:40) .left（向左的键触发）(keycode:37) .right（向右键触发）(keycode:39) .ctrl（ctrl键触发） .alt（alt键触发） .shift（shift键触发） .meta（window键触发） .left（鼠标左键触发） .right（鼠标右键触发） .middle（鼠标中键触发）

<input type="text" @keyup="doThis"> <!--原始写法-->
<input type="text" @keyup.13="doThis"> <!--13就是enter键的keyCode码-->
<input type="text" @keyup.enter="doThis"/>  <!--直接写名字-->

如何在vue.js中自定义事件

vm实例事件

触发

$dispatch （派发事件）$broadcast（广播事件）$emit （用来触发事件）

监听

$on $once（只触发一次）

删除
$off(event,callback)

每个 Vue 实例都实现了事件接口 (Events interface)，即

1）使用 $on(eventName,callback) 监听事件 (用来监听实例上的自定义事件)
event:该参数可以是一个事件名称
callback:该回调函数会在执行$emit\$broadcast\$dispatch后解发。

2)使用 $emit(eventName,args) 触发事件

实例：

//子组件（child.vue）
<template>
    <button @click="eat">按钮</button>
</template>

<script>
export default {
  created() {
    this.$on("do", function(fruit) {
      console.log("子组件接收自己触发的事件");
    });
  },
  methods: {
    eat() {
      console.log("子组件触发事件");
      this.$emit("do", "test");
    }
  }
};
</script>

//父组件（parent.vue）
<template>
  <div id="app">
    <h3>{{name}}</h3>
    <!-- 子组件 -->
    <child @do='eat'/>
  </div>
</template>

<script>
import child from "./components/child";

export default {
  name: "app",
  data() {
    return {
      name: ""
    };
  },
  methods: {
    eat(fruit) {
      console.log("父组件接收事件");
      this.name = fruit;
    }
  },
  components: { child }
};
</script>

父组件一般使用props传递数据给子组件，子组件怎么跟父组件通信呢？这时，Vue的自定义事件就派上用场了。

Vue 的事件系统分离自浏览器的EventTarget API。尽管它们的运行类似，但是 $on 和 $emit 不是addEventListener 和 dispatchEvent 的别名 。

本文由 IT禅师之道 原创，欢迎关注，带你一起长知识！