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禅师之道 原创，欢迎关注，带你一起长知识！