Vue の v-on ディレクティブの単純なイベント バインディングのプロパティ分析 (コード付き)

この記事では、Vue の v-on 命令の単純なイベント バインディングの属性分析を紹介します (コード付き)。これは非常に参考になり、困っている友人に役立つことを願っています。

はじめに

前回の記事では、v-on 命令を例としてクリック イベントをバインドすることによって、v-on 命令の使用法を紹介しました。この記事では、v-on バインディング イベントのいくつかの属性の使用法を紹介します。

v-on バインディング命令属性

.stop 属性

は、クリック イベントが上方向に伝播し続けることを防ぎます (簡単に言うと、親ノードおよび親ノードより上のノード イベントがトリガーされることを許可しません)。この例に stop 属性がない場合、親ノードと祖父ノードのイベントがトリガーされ、コンテンツがコンソールに出力されます。サンプル コードとサンプル結果は次のとおりです。 、親ノードと祖父ノードのイベントはトリガーされません、いいえ 対応するイベントの内容をコンソールに出力します。 サンプル コードとサンプル結果は次のとおりです。

1 <template>
 2   <div>
 3     <p class="title1">{{title}}</p>
 4     <div class="div1">
 5       <div v-on:click="clickme0">
 6         {{ msg1}}
 7         <div v-on:click="clickme">
 8           {{msg2}}<br/>
 9           <span v-on:click="clickthis">{{msg3}}</span>
10         </div>
11       </div>
12     </div>
13   </div>
14 
15 </template>
16 
17 <script>
18   export default {
19     name: &#39;v-on&#39;,
20     data() {
21       return {
22         msg1: &#39;我是爷爷节点&#39;,
23         msg2: &#39;我是父节点&#39;,
24         msg3: &#39;测试click属性&#39;,
25         title: &#39;v-on指令学习&#39;
26       }
27     },
28     methods:{
29       clickme0(){
30         console.log("我是爷爷节点");
31       },
32       clickme(){
33         console.log("我是父节点");
34       },
35       clickthis(){
36         console.log("不打印父节点事件内容！")
37       }
38     }
39   }
40 </script>
41 
42 <style scoped>
43   .title1 {
44     text-align: left;
45   }
46   .div1{
47     float: left;
48   }
49 </style>

.prevent 属性

Web ブラウザーは、イベントに関連付けられたデフォルトのアクション (そのようなアクションが存在する場合) を実行しません。Event オブジェクトの cancelable プロパティが fasle である場合、デフォルトのアクションは存在しないか、デフォルトのアクションは阻止できないことに注意してください。どちらの場合も、このプロパティを呼び出しても効果はありません。

タイプ属性が「submit」の場合、ページ from フォーム の簡単な例は次のとおりです

Prevent が指定されていない場合、クリック イベントによって自動的に from form アクションがトリガーされます指定された Web サイトにジャンプするための例 コードと例の結果は次のとおりです。

1 <template>
 2   <div>
 3     <p class="title1">{{title}}</p>
 4     <div class="div1">
 5       <div v-on:click="clickme0">
 6         {{ msg1}}
 7         <div v-on:click="clickme">
 8           {{msg2}}<br/>
 9           <span v-on:click.stop="clickthis">{{msg3}}</span>
10         </div>
11       </div>
12     </div>
13   </div>
14 
15 </template>
16 
17 <script>
18   export default {
19     name: &#39;v-on&#39;,
20     data() {
21       return {
22         msg1: &#39;我是爷爷节点&#39;,
23         msg2: &#39;我是父节点&#39;,
24         msg3: &#39;测试click属性&#39;,
25         title: &#39;v-on指令学习&#39;
26       }
27     },
28     methods:{
29       clickme0(){
30         console.log("我是爷爷节点");
31       },
32       clickme(){
33         console.log("我是父节点");
34       },
35       clickthis(){
36         console.log("不打印父节点事件内容！")
37       }
38     }
39   }
40 </script>
41 
42 <style scoped>
43   .title1 {
44     text-align: left;
45   }
46   .div1{
47     float: left;
48   }
49 </style>

防止が指定されている場合、クリック イベントは指定された Web サイトにジャンプするフォームからのアクションをトリガーしません。結果は次のとおりです:

<template>
     <div>
      <p class="title1">{{title}}</p>
       <div class="div1">
         <form action="http://www.baidu.com" v-on:submit="clickme">
          <button type="submit">{{msg}}</button>
         </form>
         <!--<a href="http://www.baidu.com"   v-on:click.prevent="banclickme">点我去百度</a>-->
       </div>
     </div>
 </template>

<script>
    export default {
         name: &#39;v-on&#39;,
         data() {
           return {
               title: &#39;v-on指令学习&#39;,
             msg: &#39;form表单默认点击打开百度&#39;
           }
         },
       methods:{
           clickme(){
               console.log("页面重新加载了");
             }
         // banclickme(){
         //     console.log("去不了百度吧")
         // }
         }
     }
   </script>

 <style scoped>
    .title1 {
         text-align: left;
       }
  .div1{
              float: left;
            }
</style>

.capture 属性

Add イベント キャプチャ モードは、イベント リスナーが使用されるときに使用されます。つまり、要素自体によってトリガーされたイベントは最初にここで処理され、次に に渡されます。処理対象の内部要素

をクリックしてイベントをトリガーすると、ノードの優先順位に従って、最初にこの修飾子を持つ要素が検索され、次に独自の要素が検索されます。イベントがトリガーされ、最後にイベントがバブルアップします

この例では、最初におじいちゃんノードの印刷がトリガーされ、次に親ノードの印刷がトリガーされ、次に自分のノードの印刷がトリガーされます。曾祖父ノードの印刷をトリガーします。 サンプル コードと結果は次のとおりです:

<template>
     <div>
      <p class="title1">{{title}}</p>
       <div class="div1">
         <form action="http://www.baidu.com" v-on:submit.prevent="clickme">
          <button type="submit">{{msg}}</button>
         </form>
         <!--<a href="http://www.baidu.com"   v-on:click.prevent="banclickme">点我去百度</a>-->
       </div>
     </div>
 </template>

<script>
    export default {
         name: &#39;v-on&#39;,
         data() {
           return {
               title: &#39;v-on指令学习&#39;,
             msg: &#39;form表单默认点击打开百度&#39;
           }
         },
       methods:{
           clickme(){
               console.log("去不了百度吧");
             }
         // banclickme(){
         //     console.log("去不了百度吧")
         // }
         }
     }
   </script>

 <style scoped>
    .title1 {
         text-align: left;
       }
  .div1{
              float: left;
            }
</style>

.self 属性

は、event.target 自体、つまりイベントである場合にのみトリガーされます。平たく言えば、要素自体がクリックされてイベントがトリガーされたとき、または子要素がクリックされてイベントが発生したときにのみイベントがトリガーされます。 この例では、親ノードまたは子ノードがクリックされたときに、要素自体のイベントは出力されません。サンプルコードの結果は次のとおりです。 .once 属性

クリック イベントは 1 回だけトリガーされます。平たく言えば、要素自体のイベントは 1 回だけ使用できます。要素が 2 回目にクリックされた場合、イベントはトリガーされません。

この例では、最初にクリックしたときは子ノードと親ノードが印刷されますが、2 回目にクリックしたときは親ノードとその上のノードが印刷されます。結果は次のとおりです:

<template>
  <div>
    <p class="title1">{{title}}</p>
    <div class="div1" v-on:click="click3">
      {{msg3}}<br/>
      <div class="div1" v-on:click.capture="click2">
        {{msg2}}<br/>
        <div class="div1" v-on:click.capture="click1">
          {{msg1}}<br/>
          <div v-on:click="click0">{{msg}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: &#39;v-on&#39;,
    data() {
      return {
        title: &#39;v-on指令学习&#39;,
        msg: &#39;我是div内部子节点&#39;,
        msg1: &#39;我是div父节点&#39;,
        msg2: &#39;我是div爷爷节点&#39;,
        msg3: &#39;我是div曾祖父节点&#39;
      }
    },
    methods:{
      click0(){
        console.log("打印子节点");
      },
      click1(){
          console.log("打印父节点");
      },
      click2(){
        console.log("打印爷爷节点");
      },
      click3(){
        console.log("打印曾祖父节点");
      }
    }
  }
</script>

<style scoped>
  .title1 {
    text-align: left;
  }
  .div1{
    float: left;
  }
</style>

.passive property

スクロール イベントのデフォルトの動作 (つまり、スクロール動作) は、onScroll の完了を待たずにすぐにトリガーされます。これには、event.preventDefault の場合も含まれます。 ()

関連する推奨事項:

v-on 命令の単純なイベント バインディングの Vue 分析 (コード付き)

以上がVue の v-on ディレクティブの単純なイベント バインディングのプロパティ分析 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。