<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
<div id="box" >
{{count}}
<button @click="handleAdd1($event,1,2,3)">add-1-函數表達式</button>
<button @click="handleAdd2">add-2-函數名</button> 傳遞的是參數
<button @click="count++">add-3-表達式</button> 傳遞事件
<input type="text" @input="handleInput"/>
<ul @click.self="handleUlClick">
<li @click.stop="handleLiClick">1111</li>
<li @click="handleLiClick">2222</li>
<li @click.once="handleLiClick">3333</li>
</ul>
<a href="http://www.baidu.com" @click.prevent>跳轉</a>
<input type="text" @keyup.enter.ctrl="handleKeyup"/>
<input type="text" @keyup.65="handleKeyup"/>
<!-- .esc , .up .down .left .right ,.space .ctrl .shift .delete -->
</div>
<script type="text/javascript">
new Vue({
el:"#box",
data:{
count:1
},
methods:{
handleAdd1(evt,a,b,c){
console.log(evt,a,b,c)
this.count++
},
handleAdd2(evt){
this.count++
console.log(evt.target)
},
handleInput(evt){
console.log("input",evt.target.value)
},
handleLiClick(evt){
console.log("li")
// evt.stopPropagation()
},
handleUlClick(){
console.log("ul")
},
handleKeyup(evt){
// console.log("keyup",evt.keyCode)
// if(evt.keyCode===13){
console.log("li add ",evt.target.value)
// }
}
}
})
</script>
</body>
</html>
<button @click="handleAdd1($event,1,2,3)">add-1-函數表達式</button>//如果都想傳，￥event傳遞事件，必須寫成￥event，后面接參數
<button @click="handleAdd2">add-2-函數名</button> 傳遞的是參數
<button @click="count++">add-3-表達式</button> 傳遞事件
