VUE指令-事件绑定v-on
2017-12-27 00:48
639 查看
可以用
事件，并在触发时运行一些 JavaScript 代码。
v-on:event
<!DOCTYPE html>
<html style="height: 100%;">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../lib/vue.v2.5.12.js" ></script>
<title>v-on</title>
</head>
<body style="height: 100%;">
<style>
.style0{
font-size: 25px;
color: green;
}
.style1{
background: gold;
}
</style>
<!--
VUE指令v-on事件绑定指令
REF: http://www.runoob.com/vue2/vue-events.html https://cn.vuejs.org/v2/guide/events.html
-->
<div id="appVue">
<!-- 格式v-on:keycode="方法(参数)" -->
<div style="height: 150px;background: #CCC;margin: 5px;">
<div style="font-size: 20px;">
v3.v-on:keycode="方法(参数)"</div>
<hr />
<div>
<div>
<input v-on:keyup.up="commit" style="font-size: 20px;">KeyCode</input>
</div>
</div>
</div>
<!-- 格式v-on:click="方法(参数)" -->
<div style="height: 150px;background: #CCC;margin: 5px;">
<div style="font-size: 20px;">
v2.v-on:click="方法(参数)"</div>
<hr />
<div>
<div>
<button v-on:click="mod('v-on事件',$event)" style="font-size: 20px;">onClick</button>
</div>
</div>
</div>
<!-- 格式v-on:click="方法" -->
<div style="height: 150px;background: #CCC;margin: 5px;">
<div style="font-size: 20px;">
v1.格式v-on:click="方法"</div>
<hr />
<div>
<div>
<button v-on:click="add" style="font-size: 20px;">onClick</button>
</div>
</div>
</div>
<!-- 格式v-on:click="表达式" -->
<div style="height: 150px;background: #CCC;margin: 5px;">
<div style="font-size: 20px;">
v0.v-on:click="表达式"</div>
<hr />
<div>
<div>
<button v-on:click="count ++" style="font-size: 20px;">onClick</button>
<p>{{count}}</p>
</div>
</div>
</div>
</div>
<script>
new Vue({
el: "#appVue",
data: {
count:999
},
methods:{
add:function(){
console.log("onClick")
},
mod:function(var0,var1){
console.log(var0);
console.log(var1);
},
commit:function(){
console.log("commit");
}
}
}
)
</script>
</body>
</html>
REF:
http://www.runoob.com/vue2/vue-events.html
https://cn.vuejs.org/v2/guide/events.html
v-on指令监听 DOM
事件，并在触发时运行一些 JavaScript 代码。
v-on:event
| <!-- 格式v-on:keycode="方法(参数)" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v3.v-on:keycode="方法(参数)"</div> <hr /> <div> <div> <input v-on:keyup.up="commit" style="font-size: 20px;">KeyCode</input> </div> </div> </div> <!-- 格式v-on:click="方法(参数)" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v2.v-on:click="方法(参数)"</div> <hr /> <div> <div> <button v-on:click="mod('v-on事件',$event)" style="font-size: 20px;">onClick</button> </div> </div> </div> <!-- 格式v-on:click="方法" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v1.格式v-on:click="方法"</div> <hr /> <div> <div> <button v-on:click="add" style="font-size: 20px;">onClick</button> </div> </div> </div> <!-- 格式v-on:click="表达式" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v0.v-on:click="表达式"</div> <hr /> <div> <div> <button v-on:click="count ++" style="font-size: 20px;">onClick</button> <p>{{count}}</p> </div> </div> </div> |
<html style="height: 100%;">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../lib/vue.v2.5.12.js" ></script>
<title>v-on</title>
</head>
<body style="height: 100%;">
<style>
.style0{
font-size: 25px;
color: green;
}
.style1{
background: gold;
}
</style>
<!--
VUE指令v-on事件绑定指令
REF: http://www.runoob.com/vue2/vue-events.html https://cn.vuejs.org/v2/guide/events.html
-->
<div id="appVue">
<!-- 格式v-on:keycode="方法(参数)" -->
<div style="height: 150px;background: #CCC;margin: 5px;">
<div style="font-size: 20px;">
v3.v-on:keycode="方法(参数)"</div>
<hr />
<div>
<div>
<input v-on:keyup.up="commit" style="font-size: 20px;">KeyCode</input>
</div>
</div>
</div>
<!-- 格式v-on:click="方法(参数)" -->
<div style="height: 150px;background: #CCC;margin: 5px;">
<div style="font-size: 20px;">
v2.v-on:click="方法(参数)"</div>
<hr />
<div>
<div>
<button v-on:click="mod('v-on事件',$event)" style="font-size: 20px;">onClick</button>
</div>
</div>
</div>
<!-- 格式v-on:click="方法" -->
<div style="height: 150px;background: #CCC;margin: 5px;">
<div style="font-size: 20px;">
v1.格式v-on:click="方法"</div>
<hr />
<div>
<div>
<button v-on:click="add" style="font-size: 20px;">onClick</button>
</div>
</div>
</div>
<!-- 格式v-on:click="表达式" -->
<div style="height: 150px;background: #CCC;margin: 5px;">
<div style="font-size: 20px;">
v0.v-on:click="表达式"</div>
<hr />
<div>
<div>
<button v-on:click="count ++" style="font-size: 20px;">onClick</button>
<p>{{count}}</p>
</div>
</div>
</div>
</div>
<script>
new Vue({
el: "#appVue",
data: {
count:999
},
methods:{
add:function(){
console.log("onClick")
},
mod:function(var0,var1){
console.log(var0);
console.log(var1);
},
commit:function(){
console.log("commit");
}
}
}
)
</script>
</body>
</html>
REF:
http://www.runoob.com/vue2/vue-events.html
https://cn.vuejs.org/v2/guide/events.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- VUE指令-事件绑定v-on
- Vue.js之事件的绑定(v-on: 或者 @ )
- Vue之v-on绑定监听子组件传来的事件
- vue中v-on绑定自定事件
- 浅谈Vue.js 组件中的v-on绑定自定义事件理解
- Vue.js之事件的绑定(v-on: 或者 @ )
- 对Vue.js之事件的绑定(v-on: 或者 @ )详解
- 5.4.vue入门基础学习笔记-基础指令介绍(事件绑定v-on)
- vue.js绑定事件监听器示例【基于v-on事件绑定】
- Vue.js 组件中的v-on绑定自定义事件理解
- vue.js绑定事件监听器(v-on)
- Vue1.0学习总结(1)———指令、事件、绑定属性、模板、过滤器
- 对vue中v-on绑定自定事件的实例讲解
- 记VUE的v-on:textInput无法执行事件的BUG
- on()的多事件绑定
- ☀【jQuery事件绑定】one / bind / live / delegate / on
- jQuery事件绑定.on()简要概述及应用
- jQuery事件绑定.on()简要概述及应用
- 关于js动态生成元素，注册(绑定)的事件失效的解决(on)
- jQuery事件绑定on、off 和one，取代bind, live, delegate