（RPM）VUE V-の修飾

1、ストップ

機能：バブリングからのイベントを防ぐために
使用するには：

<button v-on:click.stop="show">B</button>

例えば：

<div id="app">
    <div style="width: 100px;height: 100px;background-color: #008000;" v-on:click="show">
        <button v-on:click="show">A</button>
        <button v-on:click.stop="show">B</button>
    </div>          
</div>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        methods:{
            show(){
                console.log("1")
            }
        }
    })
</script>

ボタンは、ストップを追加するために、ストップBボタンを追加しませんでした。
ボタンをクリックすると、コンソールは2 1に表示されます。Bは、コンソールが1つだけ表示され、ボタンをクリックします。

2、予防

機能：デフォルトのイベントを防ぐために
使用するには：

<a href="http://www.baidu.com/" v-on:click.prevent>A</a> 
<!-- 没有表达式-->

<a href="http://www.baidu.com/" v-on:click.prevent="show">B</a>
<!-- 有表达式 -->

例えば：

<div id="app">
        <a href="http://www.baidu.com/" v-on:click.prevent>A</a>
        <br />
        <a href="http://www.baidu.com/" v-on:click.prevent="show">B</a>
    </div>

</div>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        methods:{
            show(){
                console.log("1")
            }
        }
    })
</script>

デフォルトイベントへのリンクはAをクリックし、防止が追加、baidu.comにジャンプすることで、デフォルトのイベントは無効です。

Bは、ジャンプイベントが無効である、Bをクリックし、表現することを防止して追加した後、baidu.comにジャンプしますが、ショーはデフォルトのイベントではありませんので、手動で、コンソールの表示を追加するには1効果的な方法を示すためにも、デフォルトのイベントのリンクです。

3、キャプチャ

機能：使用キャプチャモード（デフォルトのバブルがキャプチャになります）イベントリスナーを追加し
、使用します：

<!-- 父节点使用 -->
<div style="width: 100px;height: 100px;background-color: #008000;" v-on:click.capture="show1">
    <button v-on:click="show2">A</button>
</div>

例えば：

<div id="app">
    <div style="width: 100px;height: 100px;background-color: #008000;" v-on:click.capture="show1">
        <button v-on:click="show2">A</button>
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        methods: {
            show1() {
                console.log("1")
            },
            show2() {
                console.log("2")
            }
        }
    })
</script>

この時点では、キャプチャを追加し、Aをクリックし、親ノードのボタンでは、コンソールは、12が表示されます、今キャプチャするために証明されています。
、バブリングされたcaptrueない場合は、コンソールは21が表示されます。
キャプチャ修飾子キャプチャは親ノードで使用しなければならないことに注意してください。

4、自己

機能：listener要素からのコールバック自体がトリガーを結合する場合にのみイベントがトリガされます。
どのように使用するには：

<div v-on:click.self="show2">

例えば：

<div id="app">
    <div style="width: 100px;height: 100px;background-color: #008000;" v-on:click="show1">
        第一层
        <div v-on:click.self="show2">
            第二层
            <div v-on:click="show3">
                第三层
                <div v-on:click="show4">
                    第四层
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        methods: {
            show1() {console.log("1")},
            show2() {console.log("2")},
            show3() {console.log("3")},
            show4() {console.log("4")}
        }
    })
</script>

私たちは二階に自己のdivを追加し、コンソールは4321の結果になりますときに私たちは4階にクリックしてください（バブリング）、を加え、4階にクリックし、コンソールの表示はなかったと仮定4 31、バブルの第二層はスキップされて第二層を設定し、自己のイベントは、コールするときにのみ、独自の有効となるので、第二の層。

5、{のkeyCode。| keyAlias}

機能：特定のボタンを押す
使用します：

<input type="text"  v-on:keydown.13="show1" /><br/>
<!-- 使用KeyCode 13代表enter键 -->

<input type="text"  v-on:keydown.right="show2" />
<!-- 使用别名，right代表方向键右 -->

例えば：

<div id="app">
    <input type="text"  v-on:keydown.13="show1" /><br/>
    <input type="text"  v-on:keydown.right="show2" />
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        methods: {
            show1(){
                console.log(1)
            },
            show2(){
                console.log(2)
            }
        }
    })
</script>

最初の入力では、押しキーを入力して、コンソール1の出力
第二の入力には、右ボタンコンソール出力2を押してください。

6、ネイティブ

機能：ルート要素のネイティブのイベントリスナコンポーネント。
使用方法および使用例：

<div id="app">
    <mycomponent v-on:click.native="myfn"></mycomponent>
</div>
<script type="text/javascript">
    Vue.component('mycomponent',{
        template:`<a href="#">点我</a>`
    })
    var vm = new Vue({
                el: '#app',
        methods:{
            myfn(){
                console.log(1);
            }
        }
    });
</script>

あなたは、HTML、再利用でコンポーネントを呼び出すときに、カスタム・コンポーネントを作成するために、ネイティブ修飾子の必要性を使用し、。
V-の場合：クリック.nativeなしには、をクリックし、任意のコンテンツのないコンソールは無効です。

7、かつて

機能：唯一のコールバックをトリガします。
使用法：

<mycomponent v-on:click.native.once="myfn"></mycomponent>

例えば：

<div id="app">
    <mycomponent v-on:click.native.once="myfn"></mycomponent>
</div>
<script type="text/javascript">
    Vue.component('mycomponent',{
        template:`<a href="#">点我</a>`
    })
    var vm = new Vue({
        el: '#app',
        methods:{
            myfn(){
                console.log(1);
            }
        }
    });
</script>

複数のクリック、コンソールは結果のみ一度表示されます。

8、左| ミドル| 正しい

機能：イベントマウスの左ボタン、右トリガー。
使用法：

<div v-on:mousedown.left="myfn">AAA</div>
<div v-on:mousedown.middle="myfn">BBB</div>
<div v-on:mousedown.right="myfn">CCC</div>

例えば：

<div id="app">
    <div v-on:mousedown.left="myfn1">AAA</div>
    <div v-on:mousedown.middle="myfn2">BBB</div>
    <div v-on:mousedown.right="myfn3">CCC</div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        methods:{
            myfn1(){console.log(1);},
            myfn2(){console.log(2);},
            myfn3(){console.log(3);}
        }
    });
</script>

左はAAA、コンソール出力1クリック
BBB、コンソール出力2上のマウスの中ボタンクリック
CCC、コンソール出力を右クリックしを3

9、パッシブ

何パッシブはい？
https://blog.csdn.net/tengxy_cloud/article/details/52858742
https://www.cnblogs.com/ziyunfei/p/5545439.html

機能：リスナーモデルを追加します：{真パッシブ}
使用法：

<div v-on:scroll.passive="onScroll">...</div>

パッシブは、私がテストをしなかった、モバイルエンドの最適化フロントエンドのパフォーマンスのために使用しました。

著者：kangaroo_vの
リンク：https://www.jianshu.com/p/0e10fe47bff6
出典：ジェーンの本が
著者によって著作権で保護されています。著者は認可商業転載してください接触、非商用の転載は、ソースを明記してください。