vue学习——v-on实例
v-on
-
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
-
用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
-
在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个
$event属性：v-on:click="handle('ok', $event)"。 -
从 2.4.0 开始，v-on 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰器的。
vue的方法是定义在method里的。
点击方法
<button v-on:click="onClick">点我</button>
缩写
<button @click="onClick">点我</button>
对象语法 (2.4.0+)
<button v-on="{ mousedown: mouseDown, mouseup: mouseUp }">点我咯</button>
阻止默认行为，没有表达式——阻止表单默认提交行为
<form @keyup="onKeyUp" @submit.prevent="onSubmit">
<input type="text">
<button type="submit">提交</button>
</form>
methods:
methods:{
onClick: function(){
console.log("you clicked！")
},
mouseDown: function(){
console.log("you mouseDown！")
},
mouseUp: function(){
console.log("you mouseUp")
},
onEnter: function(){
console.log("onEnter");
},
onOut:function(){
console.log("onOut");
},
onSubmit:function(){
console.log("submited");
},
onKeyUp:function(e){
console.log("keyUp : "+e.keyCode);
},
},
修饰符：
.stop- 调用event.stopPropagation()。.prevent- 调用event.preventDefault()。.capture- 添加事件侦听器时使用capture模式。.self- 只当事件是从侦听器绑定的元素本身触发时才触发回调。.{keyCode | keyAlias}- 只当事件是从特定键触发时才触发回调。.native- 监听组件根元素的原生事件。.once- 只触发一次回调。.left- (2.2.0) 只当点击鼠标左键时触发。.right- (2.2.0) 只当点击鼠标右键时触发。.middle- (2.2.0) 只当点击鼠标中键时触发。.passive- (2.3.0) 以{ passive: true }模式添加侦听器
更多参照：v-on
完整demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>vue学习 v-on</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
<!-- 点击方法 -->
<button v-on:click="onClick">点我</button>
<!-- 缩写 -->
<button @click="onClick">点我</button>
<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: mouseDown, mouseup: mouseUp }">点我咯</button>
<!-- 阻止默认行为，没有表达式 阻止表单默认提交行为 -->
<form @keyup="onKeyUp" @submit.prevent="onSubmit">
<input type="text">
<button type="submit">提交</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script>
var app = new Vue(
{
el: "#app",
data:{
},
methods:{
onClick: function(){
console.log("you clicked！")
},
mouseDown: function(){
console.log("you mouseDown！")
},
mouseUp: function(){
console.log("you mouseUp")
},
onEnter: function(){
console.log("onEnter");
},
onOut:function(){
console.log("onOut");
},
onSubmit:function(){
console.log("submited");
},
onKeyUp:function(e){
console.log("keyUp : "+e.keyCode);
},
},
})
</script>
</body>
</html>
