一、修饰符

1.阻止默认事件

@事件名.prevent

2.阻止事件冒泡

@事件名.stop

修饰符可以连贯使用

<div id="app">
        <div class="box" @contextmenu.prevent="contextmenu" @click="click">
            <div class="smallbox" @contextmenu.prevent.stop="smallcontext" @click.stop="smallclick"></div>
        </div>
    </div>
    <script>
        new Vue({
            el:"#app",
            methods:{
                contextmenu(){
                    console.log("点击了大盒子右键")
                },
                smallcontext(){
                    console.log("点击了小盒子的右键")
                },
                click(){
                    console.log('大盒子被点击了')
                },
                smallclick(){
                    console.log('小盒子被点击了')
                }
            }
        })
    </script>

3.self

只有点击到标签本身上时才会生效

4.once

指定的事件修饰符只有一次作用

5.其他

keydown键盘按下、keyup键盘抬起

keydown.down 键盘的方向键向下

keydown.up 键盘的方向键向上

keydown.left 键盘的方向键向左

keydown.right 键盘的方向键向右

keydown.keycode 原生的keycode值可以继续使用

二、监听

1.普通监听

watch:{

变量(){

}

}

2.深度监听

watch:{

变量（对象类型）:{

	handler:function(){

		//业务逻辑代码

	},

	deep:true

}

}

<div class="app">
        <input type="text" v-model="user.name">
        <h1>{{str}}</h1>
        <h1>{{newstr}}</h1>
    </div>
    <script>
        var vue = new Vue({
            el:'.app',
            data:{
                val:'',
                user:{
                    name:'小飞',
                    age:18
                }
            },
            methods:{
                
            },
            watch:{
                val:function(){
                    console.log('val变量发生了变化')
                },
                // 深度监听
                user:{
                    handler(){
                        console.log('用户信息改变了')
                    },
                    deep:true
                }
            }
        });
    </script>

三、计算属性

语法格式：

computed:{

新的变量名:function(){

	处理规则...

	return 值

}

}

<div class="app">
        <h1>{{str}}</h1>
        <!-- 使用计算属性得到的变量 -->
        <h1>{{newstr}}</h1>
    </div>
    <script>
        var vue = new Vue({
            el:'.app',
            data:{
                str:'木秀于林，风必摧之。但是，如果你周围都是木，谁会催你。'
            },
            methods:{
                
            },
            //计算属性
            computed:{
                newstr:function(){
                    var arr = this.str.split('')
                    return arr.reverse().join('')
                }
            }
        });
    </script>

注意：

计算属性的变量不需要在data里预定义，但是需要在页面上使用计算属性中的变量，只有使用后计算属性中的业务逻辑代码才会自动执行。