1 语法:
1.1 使用v-on指令注册事件
<标签 v-on:事件句柄="表达式或者事件处理函数"></标签>
1.2 简写方式
<标签 @事件句柄="表达式或者事件处理函数"></标签>
2. 注意事项:
事件处理函数作为事件句柄的值不需要调用.
<div id="app">
<h1>结果</h1>
{{num}}
<h1>表达式的写法</h1>
<button v-on:click="num++">按钮</button><br/>
<button @click="num++">按钮</button><br/>
<h1>事件处理函数</h1>
<button v-on:click="myclick">按钮</button><br/>
<button @click="myclick">按钮</button><br/>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
num:0
},
methods:{
myclick:function(){
app.num++;
console.log(this);
}
}
});
</script>内联事件处理函数
1 语法:
1.1 使用v-on指令注册事件
<标签 v-on:事件句柄="内联函数(实际参数)"></标签>
1.2 简写方式
<标签 @事件句柄="内联函数(实际参数)"></标签>
2. 注意事项:
2.1 内联事件处理函数需要调用才能够执行并且可以传入实际参数给函数
<div id="app">
<button v-on:click="say('hello')">hello</button><br/>
<button @click="say('hi')">hi</button><br/>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
},
methods:{
say:function(message){
console.log(this);
}
}
});
</script>事件处理函数中的this
事件处理函数和内联事件处理函数都在事件发生时被Vue实例调用执行.
所以this代表当前Vue实例
用法:
this代表当前Vue实例. 所以在事件处理函数中可以通过this访问data中的数据和其他 方法.
<div id="app">
<h1>{{num}}</h1>
<button @click="myclick">点我1</button>
<button @click="myclick()">点我2</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
num:1
},
methods:{
myclick:function () {
this.num++;
}
}
});
</script>事件对象
Vue事件对象就是JavaScript中原生的事件对象
1 事件处理函数接收自动接收事件处理函数
当事件发生时,浏览器会自动将事件对象传递给事件处理函数中.
2 内联事件处理函数需要通过$event将事件对象传递给事件处理函数.
3. 注意事项:
$event是一个固定的名字不能够被修改
<div id="app">
<button @click="myclick1">按钮1</button>
<button @click="myclick2('你好',$event)">按钮2</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {},
methods:{
myclick1:function (event) {
console.log(event.target);
},
myclick2:function (message,event) {
console.log(message,event.target);
}
}
});
</script>事件修饰符
1. 语法:
1.1 使用v-on指令注册事件
<标签 v-on:事件句柄.修饰符="表达式或者事件处理函数"></标签>
1.2 简写方式
<标签 @事件句柄.修饰符="表达式或者事件处理函数"></标签>
2 事件修饰符
当事件发生时, 可以阻止事件冒泡以及默认事件等操作.
常见的事件修饰符:
.prevent :阻止事件默认行为
3. 按键修饰符
通过按键修饰符来指定什么按键才出发事件处理函数.
常见的事件修饰符:
.keyup.enter: 按下回车键时触发事件处理函数.
<div id="app">
<a href="http://www.baidu.com" @click.prevent="myclick1">点我</a>
<input type="text" @keyup.enter="mykey">
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {},
methods:{
myclick1:function (event) {
alert("手真贱...");
},
mykey:function (event) {
console.log("准备提交表单了.....");
},
}
});
</script>标签：事件处理,Vue,函数,标签,app,事件 来源： https://blog.csdn.net/qq_36194388/article/details/119342008
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。