Vue calculate property - event modifier

Vue calculate property - event modifier

1. Problem: We passed the app as a constructor template instance, the scope is not that an example of the scope of the incoming template

Yes

2. If you write write methods in a way, then run, do not meet the (methods put in time handler), it is possible to write a method in computed in

Case:

String inverted output

<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('')
                }
            }
 })
 

Interview questions computed attribute (computed) vs methods (methods)

1. event handler on methods

2. To write logic to be like global variables to use (in line with mvvm thoughts) on the (computed)

Modifiers canceled bubble :

  <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>

Solution: Modifiers

Format @eventType. Modifier = "event handler" to see the document

//.stop .prevent .capture .once to remember!

Key modifiers: @ click.enter can be triggered by enter