Vue计算属性-事件修饰符

Vue计算属性-事件修饰符

1.问题：我们将app作为模板传入实例的构造函数中,那么实例的作用范围是不是就是传入模板范围

​ 是的

2.如果写在methods中写一个方法，然后运行，不太符合（methods中放时间处理程序），所以可以把方法写在computed中

案例：

字符串反向输出

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

面试题 计算属性(computed) vs 方法(methods)

​ 1.事件处理程序放在methods

​ 2.要书写逻辑 要像全局变量一样使用（符合mvvm的思想）放在（computed）

修饰符****取消冒泡：

  <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 按enter就可以触发了