vue(2)事件绑定

我会带着你远行 2022-10-02 11:44 315阅读 0赞 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>vue</title>
  6.     <style type="text/css">
  7.         div{ 
  8.             width: 200px;
  9.             cursor:pointer;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <script type="text/javascript" src="vue.min.js"></script>
  16.     <div id="div1">
  17.         <div>点击了{ { clickNumber}}次</div>
  18.         <button v-on:click="count">点击1</button><!--点击-->
  19.         <button @click="count">点击2</button>
  20.     </div>
  21.     <script type="text/javascript">
  22.         new Vue({ 
  23.             el:"#div1",
  24.             data:{ 
  25.                 clickNumber:0,
  26.             },
  27.             methods:{ 
  28.                 count:function(){ 
  29.                     this.clickNumber++;
  30.                 }
  31.             }
  32.         });
  33.     </script>
  35.     <div id="content">
  36.         <!--冒泡.stop  .prevent  .capture  .self  .once-->
  37.         <div id="grandFather" v-on:click="doc" style="background-color: red">
  38.             grandFather
  39.             <div id="father" v-on:click.once="doc" style="background-color: pink">
  40.                 father
  41.                 <div id="me" v-on:click="doc" style="background-color: yellow">
  42.                     me
  43.                     <div id="son" v-on:click="doc" style="background-color: green">
  44.                         son
  45.                     </div>
  46.                 </div>
  47.             </div>
  48.         </div>
  49.     </div>
  51.     <script type="text/javascript">
  52.         var content = new Vue({ 
  53.             el:"#content",
  54.             data:{ 
  55.                 id:'',
  56.             },
  57.             methods:{ 
  58.                 doc:function(){ 
  59.                     this.id = event.currentTarget.id;
  60.                     alert(this.id);
  61.                 }
  62.             }
  63.         });
  64.     </script>
  66.     <div id="div2">
  67.         <a href="http://12306.com" @click="jump">正常的链接</a><br>
  68.         <a href="http://12306.com" @click.prevent="jump">prevent jum()之后的链接</a><br>
  69.         <a href="http://12306.com" @click.prevent>纯prevent之后的链接</a><br>
  70.         <br><br>
  71.         <form @submit="jump" action="http://12306.com">
  72.             <button type="submit">正常的form</button>
  73.         </form>
  74.         <form @submit.prevent="jump" action="http://12306.com">
  75.             <button type="submit">preventjump()之后的form</button>
  76.         </form>
  77.         <form @submit.prevent action="http://12306.com">
  78.             <button type="submit">纯prevent知否的form</button>
  79.         </form>
  80.     </div>
  81.     <script type="text/javascript">
  82.         new Vue({ 
  83.             el:"#div2",
  84.             data:{ 
  86.             },
  87.             methods:{ 
  88.                 jump:function(){ 
  89.                     alert("jump()函数被调用");
  90.                 }
  91.             }
  92.         });
  93.     </script>
  94. </body>
  95. </html>

在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，315人围观）

还没有评论，来说两句吧...

相关阅读