jsチュートリアル

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

不言

Jul 27, 2018 pm 01:31 PM

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 サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

JavaScriptの文字列文字を交換しますMar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します：内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します最も直接的な方法は、置換（）メソッドを使用することです。 str = str.replace（ "find"、 "置換"）; この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace（/fi

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか？Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか？Mar 18, 2025 pm 03:14 PM

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか？Mar 18, 2025 pm 03:16 PM

この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。

jQueryマトリックス効果Mar 10, 2025 am 12:52 AM

マトリックスの映画効果をあなたのページにもたらしましょう！これは、有名な映画「The Matrix」に基づいたクールなJQueryプラグインです。プラグインは、映画の古典的な緑色のキャラクター効果をシミュレートし、画像を選択するだけで、プラグインはそれを数値文字で満たされたマトリックススタイルの画像に変換します。来て、それを試してみてください、それはとても面白いです！それがどのように機能するかプラグインは画像をキャンバスにロードし、ピクセルと色の値を読み取ります。 data = ctx.getimagedata（x、y、settings.greasize、settings.greasize）.data プラグインは、写真の長方形の領域を巧みに読み取り、jQueryを使用して各領域の平均色を計算します。次に、使用します

シンプルなjQueryスライダーを構築する方法Mar 11, 2025 am 12:19 AM

この記事では、jQueryライブラリを使用してシンプルな画像カルーセルを作成するように導きます。 jQuery上に構築されたBXSLiderライブラリを使用し、カルーセルをセットアップするために多くの構成オプションを提供します。今日、絵のカルーセルはウェブサイトで必須の機能になっています - 1つの写真は千の言葉よりも優れています！画像カルーセルを使用することを決定した後、次の質問はそれを作成する方法です。まず、高品質の高解像度の写真を収集する必要があります。次に、HTMLとJavaScriptコードを使用して画像カルーセルを作成する必要があります。ウェブ上には、さまざまな方法でカルーセルを作成するのに役立つ多くのライブラリがあります。オープンソースBXSLiderライブラリを使用します。 BXSLiderライブラリはレスポンシブデザインをサポートしているため、このライブラリで構築されたカルーセルは任意のものに適合させることができます

JavaScriptによる構造マークアップの強化Mar 10, 2025 am 12:18 AM

キーポイントJavaScriptを使用した構造的なタグ付けの強化は、ファイルサイズを削減しながら、Webページコンテンツのアクセシビリティと保守性を大幅に向上させることができます。 JavaScriptを効果的に使用して、Cite属性を使用して参照リンクを自動的にブロック参照に挿入するなど、HTML要素に機能を動的に追加できます。 JavaScriptを構造化されたタグと統合することで、ページの更新を必要としないタブパネルなどの動的なユーザーインターフェイスを作成できます。 JavaScriptの強化がWebページの基本的な機能を妨げないようにすることが重要です。高度なJavaScriptテクノロジーを使用できます（