@clickヴュー、イベント修飾する@ click.stopと@ click.prevent、修飾キー@ keyup.enter

1、@click聞く結合：

V-ON（などからkeyup、同様の使用量などの他、例えば、聞くためにクリックしてください）：クリック=「楽しさ」
  @ =「楽しい」をクリックしてください
  @「楽しい（パラメータ）」=をクリックしてください

  <クリック= @ボタン" TEST1 " > test1の</ button>の
  <ボタンをクリックします= @ " TEST2（ 'ABC'）" > TEST2 </ button>の
  <クリック= @ボタン" Test3は（ 'ABCD'、$イベント）" > TEST3 </ button>の
 
  方法：{ 
      TEST1（イブ）{ // test1のは、パラメータはありません、デフォルトの配信イベント$ 
        アラート（eve.target.innerHTML）   // TEST1 
      }、
      TEST2（MSG）{ // test1の機能は、渡されたパラメータを持っていますこのパラメータ 
        警告（MSG）   // ABC 
      }、
      Test3は（MSG、イベント）{ // パラメータはあなたがenevtに取得したい場合、あなたは$イベントに関数を記述する必要がありますが、
        警告（MSG + ' --- ' + イベント .target.textContent）   // ABCD --- TEST3 
      } 
   }

 

2、@のclick.stopと@ click.prevent

@ Click.stopバブリングからのイベントを防ぎます

< 事業部は、上記のIDを述べ= "アプリケーション" > 
        < div要素：クリックして、V-ON = "ドードー" > 
            < ボタンV-ON：クリックして= "doThis" >停止クリックイベントが広がり続け、</ ボタン> 
        </ DIV > 
</ DIV > 

    < スクリプト> 
        VAR のApp =  新しい新しいヴュー（{ 
            EL：" #app " 、
            データ：{ 
                名：" Vue.js " 
            }、
            メソッド：{ 
                doThis：関数（）{ 
                    アラート（" noclick " ）; 
                }、
                ドド：関数（）{ 
                    アラート（" ドド" ）; 
                } 
            } 
        }）; 
    </ スクリプト> 
//最初の"noclick"をポップアップ表示され、ポップアップ"ドド" 。

< 本部上記ID言及= "アプリケーション" > 
        < divのV-ONを：クリック= "ドードー" > 
            < ボタンV-ON：click.stop = "doThisは" >クリックイベントが広がり続け停止</ ボタン> 
        </ DIV > 
    </ DIV > 

    < スクリプト> 
        VAR のApp =  新しい新しいヴュー（{ 
            EL：" #app " 、
            データ：{ 
                名：" Vue.js " 
            }、 
            メソッド：{
                doThis： 関数（）{ 
                    アラート（" noclick " ）。
                }、
                ドド：関数（）{ 
                    アラート（" ドド" ）。
                } 
            } 
        }）。</ スクリプト> //只弹出「noclick」
    

 

@ Click.prevent、イベントのデフォルトの動作を妨げます

< HREF = "http://www.baidu.com" @ click.prevent = "TEST4" > Baiduは、</ A >    //タグジャンプを防ぐことで行っのみ機能TEST4 < フォーム   アクション= "/ XXX"    submit.prevent @ =「TEST5」>    //するだけの機能を実行するために、フォームの送信を防ぐTEST5 < INPUT タイプの=「提出」値=「登録」> </ フォーム>



         

 

3、修飾キー

@ keyup.enter

//按下入力时、执行方法TEST7 

< 入力タイプ= "テキスト" @ keyup.enter = "TEST7" > 

方法：{ 

      TEST7（イベント）{ 
        にconsole.log（event.keyCode）
        アラート（event.target.value）
      } 

}