ホームページ > 記事 > ウェブフロントエンド > Vue.js での .native 修飾子の使用の詳細な説明
今回は、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の中国語サイトです! 推奨読書:
jQuery を使用してカスタム セレクターを作成する手順の詳細な説明
以上がVue.js での .native 修飾子の使用の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。