这是我参与11月更文挑战的第8天，活动详情查看：2021最后一次更文挑战
v-on
在v-on后面可以绑定点击click事件
实现计数器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{ shu }}</div>
<button v-on:click="shu=shu+1">+1</button>
</div>
<script>
new Vue({
el: '#app',
data: {
shu:0
}
})
</script>
</body>
</html>
复制代码v-on 调用方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<div></div>
<button v-on:click="s()">按钮</button>
</div>
<script>
new Vue({
el: '#app',
data: {
s:function(){
alert('ohh');
}
}
})
</script>
</body>
</html>
复制代码读取data里的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{ a }}</div>
<button v-on:click="s">+1</button>
</div>
<script>
new Vue({
el: '#app',
data: {
a:0
},
methods:{
//自定义方法
s:function(event){
this.a+=1;
alert('+1='+this.a);
}
}
})
</script>
</body>
</html>
复制代码方法参数的使用方式
v-on:click="a+=1"@click="add"调用Vue对象的内容作为参数@click="add2(x1,x2)"方法跟上参数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{ a1 }}</div>
<button v-on:click="a1+=1">+1</button>
<div>{{ a2 }}</div>
<button @click="add">+1</button>
<div>{{ a3 }}</div>
<button @click="add2(a1,a2)">和</button>
</div>
<script>
new Vue({
el: '#app',
data: {
a1:0,
a2:0,
a3:0
},
methods:{
add:function(){
this.a2+=1;
},
add2:function(b1,b2){
this.a3=b1+b2;
}
}
})
</script>
</body>
</html>
复制代码事件修饰符
Vue.js为v-on指令提供了事件修饰符来处理DOM事件细节
阻止单击事件冒泡
<a v-on:click.stop="doThis"></a>
提交事件不再重载页面
<form v-on:submit.prevent="onSubmit"></form>
修饰符可以串联
<a v-on:click.stop.prevent="doThat"></a>
只有修饰符
<form v-on:submit.prevent></from>
添加事件监听器时使用事件捕获模式
<div v-on:click.capture="doThis">..</div>
只当事件在该元素本身（而不是子元素）触发时触发回调
<div v-on:click.self="doThat">..</div>
click 事件只能点击一次
<a v-on:click.once="doThis"></a>
按键修饰符
Vue允许在监听键盘事件时为v-on添加按键修饰符。
使用keyCode
只在keyCode是13时调用
<input v-on:keyup.13="submit">
使用按键别名
<input v-on:keyup.enter="submit">
缩写
<input @keyup.enter="submit">
全部的按键别名包括：.enter、.tab、.delete（捕获“删除”和“退格”键）、.esc、.space、.up、.down、.left、.right、.ctrl、.alt、.shift、.meta。
近期评论