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

不言

リリース： 2018-07-27 13:31:34

オリジナル

1934 人が閲覧しました

この記事では、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>

ログイン後にコピー