挑战百日学习计划(小程序开发)-第7天(v-on)

最新推荐文章于 2023-06-22 07:17:24 发布

zkelm.com

最新推荐文章于 2023-06-22 07:17:24 发布

阅读量514

点赞数 2

分类专栏： Vue 小程序文章标签： vue

本文链接：https://blog.csdn.net/zkelm/article/details/105861276

版权

小程序同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

Vue

20 篇文章 0 订阅

订阅专栏

每天进步1%。争取把知识点进行一个消化理解通透。为了能学会（小程序开发 www.zkelm.com)，并顺利发展自己的公司，决心学习前端开发技术。恶补知识点。争取在100天内能实现技术的质变！

今天的知识点：vue v-on 的事件绑定：绑定的对象有 submit click

<div id="app" v-on:submit="divfun">
	<form action="" v-on:submit="formfun">
		<button v-on:click.stop="mybtn">点击我试试！</button>
	</form>
			
</div>
<script>
   new Vue({
          el:"#app",
          data:{
          },
          methods:{
           mybtn:function(event){
               alert('点击事件！')
               },
            formfun:function(){
                alert('已经触发表单时间:FORM');
              },
            divfun:function(){
               alert('已经div事件:FORM');
               }     
           }
   })
</script>

运行结果：
在这里插入图片描述

知识重点：冒泡事件！

阻止冒泡的方法：v-on:click.stop=“btnfun”

常用的事件绑定修饰功能：

1.stop：阻止冒泡
 2.prevent：阻止页面重载
 3.capture：添加事件侦听器时使用事件捕获模式
 4.self：只有事件在该元素本身（而不是子元素）触发时触发回调
 5.<a v-on:click.once="dithis"></a>:事件只能点击一次
 6.<input type="text" v-on:keyup.13="submint">   
   keyup.13  = 就是键盘的按键代码