ホームページ > ウェブフロントエンド > jsチュートリアル > Vue.js での .native 修飾子の使用の詳細な説明

Vue.js での .native 修飾子の使用の詳細な説明

php中世界最好的语言
リリース: 2018-04-27 09:20:34
オリジナル
2729 人が閲覧しました

今回は、Vue.js での .native モディファイアの使用について詳しく説明します。Vue.js で .native モディファイアを使用する際の 注意事項 について、実際のケースを見てみましょう。

修飾子は、半角ピリオド . で指定される特別な接尾辞で、コマンドを特別な方法でバインドする必要があることを示すために使用されます。この記事では Vue.js の .native 修飾子について紹介しますので、興味のある方はぜひご覧ください。

.native 修飾子

.native 修飾子の公式説明は次のとおりです:

場合によっては、コンポーネントのルート要素でネイティブ

event をリッスンしたい場合があります。 v-on 修飾子 .native を使用できます。例:

<my-component v-on:click.native="doTheThing"></my-component>
ログイン後にコピー

簡単に理解すると:

通常の

HTML タグ のイベントをリッスンすると、.native 修飾子を追加しても機能しません。例:

HTML code

<p id="app">
  <a href="#" rel="external nofollow" v-on:click.native="clickFun">click me</a>
</p>
ログイン後にコピー

JavaScriptcode

new Vue({
  el: '#app',
  methods: {
    clickFun: function(){
      console.log("message: success")
    }
  }
})
ログイン後にコピー
Result

コンポーネントのルート要素でイベントをリッスンし、.native 修飾子を追加すると機能します。例:

HTML コード

<p id="app">
  <my-component v-on:click.native="clickFun"></my-component>
</p>
ログイン後にコピー
JavaScript コード

Vue.component('my-component', {
  template: `click me`
})
new Vue({
  el: '#app',
  methods: {
    clickFun: function(){
      console.log("message: success")
    }
  }
})
ログイン後にコピー
Result

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、 の他の関連記事に注目してください。 phpの中国語サイトです!

推奨読書:

WeChat アプレットの画像をモデルの高さに合わせる方法

jQuery を使用してカスタム セレクターを作成する手順の詳細な説明

URL でパラメーターを取得する方法

以上がVue.js での .native 修飾子の使用の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート