Vueのプロパティを計算する - イベントの修飾子

Vueのプロパティを計算する - イベントの修飾子

1.問題：我々はコンストラクタテンプレートインスタンスとしてアプリを通過し、スコープは、入力テンプレートの範囲の一例ということではありません

はい

2.あなたは、実行し、途中で書き込みメソッドを作成（タイムハンドラに入れメソッド）を満たしていない場合、で計算でメソッドを記述することが可能です

ケース：

文字列の反転出力

<div id="app">
        {{msg.split('').reverse().join('')}}
        <p>{{reserseMsg}}</p>
</div>

new Vue({
            el: '#app',
            data: {
                msg: 'hello Vue.js 周四'
            },
            computed: {
                //计算属性
                reserseMsg() {
                    return this.msg.split('').reverse().join('')
                }
            }
 })
 

インタビューの質問には、メソッド（方法）対属性（計算）を計算します

方法1.イベントハンドラ

（計算された）に（MVVMの考えに沿ったもの）を使用して、グローバル変数のようになりロジックを記述するために2

修飾子は、バブルをキャンセル：

  <div id="app">
        <div class="big" @click='bigHander'>
            <div class="middle" @click='middleHander'>
                <div class="small" @click='smallHander'></div>
            </div>
        </div>
    </div>
    <script>
        // 业务：阻止事件冒泡

        //在事件处理程序中取消冒泡行为要写多次 导致代码重复 
        new Vue({
            el: "#app",
            methods: {
                bigHander(e) {
                    e.stopPropagation()
                    alert('big')
                },
                middleHander(e) {
                    e.stopPropagation()
                    alert('middle')
                },
                smallHander(e) {
                    e.stopPropagation()
                    alert('small')
                }
            }
        })
    </script>

ソリューション：修飾子

フォーマット@eventType。修飾子=「イベントハンドラ」ドキュメントを参照するには

//.stop .prevent .capture .once覚えておきます！

キー修飾子：click.enter @入力によってトリガすることができます