Vuejs實踐--事件綁定

Vue中的事件綁定一般通過v-on指令來綁定事件：

事件綁定

v-on：事件綁定的表達式的值可以是js語句，也可以是在methods選項中定義好的方法名(有參數的時候當然需要傳參),

在vue事件中，如果要用到事件對象e，要將e作爲形參傳入函數，並且在執行該函數的時候，傳入實參$event,該參數包含事件的一些信息：如事件源（事件發生在誰身上），事件類型等

HTML部分

<div id="container">
		<!-- js表達式 -->
		<span>{{initNum}}</span>
		<button @click="initNum++">點我加一</button>
		<!-- 函數名 -->
		<span>{{initNum}}</span>
		<button @click="addTen(10,$event)">點我加十</button>
		<!-- 函數名 -->
		<span>{{initNum}}</span>
		<button @click="addTwo">點我加二</button>
		<a href="www.baidu.com" @click="goto('禁止打開',$event)" >百度一下</a>
	</div>

Javascript部分

var myApp = new Vue({
			el:"#container",
			data:{
				userName:"張三",
				initNum:10,
			},
			methods:{
				addTen:function(plus,event){
					this.initNum+=plus;//this表示的是當前的Vue實例
					console.log(event.preventDefault());
					window.alert(this.initNum)
				},
				addTwo:function(){
					this.initNum+=2;
					console.log(event)
				},
				goto:function(message,event){
					event.preventDefault();
					window.alert(message);
					console.log(event)
				}
			}
		})

事件修飾符
當然，事件也有自己的修飾符，這裏不不再一一舉例（有很多），但是基本用法要清楚：

就是在@事件名後加一個點"."跟上修飾符即可，例如@click.stop 阻止事件冒泡，向上傳播;.prevent:阻止默認行爲.如點擊a標籤的鏈接，會打開目標界面的默認行爲；@click.once事件只執行一次等等，此外還有一些鍵盤事件的修飾符（還是事件），並且修飾符可以疊加。

鍵盤事件

語法：@keydown.(鍵位的keyCode或鍵位別名) = callback

例如：@keydown.13 或者@keydown.enter（別名，回車事件）；@keydown.38或者@keydown.up（別名，按方向鍵上--事件）；
 自定義鍵盤事件
全局：Vue.config.keyCodes ={別名：對應的keycode }，然後就可以在鍵盤事件中按相應的鍵，就會有反應了。