Vue基础知识三

1、事件处理

（1）基本使用
　　1、使用v-on:xxx或@xxx绑定事件，xxx是事件名；

　　2、事件的回调需要配置在methods对象中，最终会在vm上；

　　3、methods中配置的函数不要用箭头函数，否则this就不是vm了；

　　4、methods 中的配置函数都是被Vue所管理的还是，this的指向是vm或组件实例对象；@click="demo"和@click="demo($event)"效果一样，但是后者可以传参
（2）事件修饰符
prevent——阻止默认事件　　 stop——阻止事件冒泡　　once——事件只触发一次 　　 capture——使用事件的捕获模式　　

self——只有event.target是当前操作的样式时才触发事件　　 passive——事件的默认行为立即执行，无需等待事件回调执行完毕
注意：修饰符可以连写，如@click.prevent.stop
（3）键盘事件
Vue中常用的按键别名：回车enter 　　 删除delete 　　 退出esc　　 空格space 　　 换行tab(特殊——配合keydown使用) 　　 上up 　　 下down 　　 左left　　 右right
系统修饰键(用法特殊)：ctrl、alt、shift、meta(就是win键)
配合keyup使用——在按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发；配合keydown则正常触发事件

2、计算属性computed：要用的属性不存在，通过已有属性计算得来

计算属性实现姓名案例：与methods实现对比，内部有缓存机制(复用)，效率更高，调试方便；如果计算属性要被修改，则必须写set函数去响应修改
简写(只读不改)——只有get
computed{
　　fullName(){
　　　　return this.firstName+'-'+this.lastName
　　}
}

3、监视属性/侦听属性watch

两种写法：new Vue时传入watch配置　　通过vm.$watch监视
深度监视deep——
（1）Vue中的watch默认不监测对象内部值得改变(一层)，配置deep:true可以监测对象内部值得改变(多层)
（2）Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以；使用watch时根据数据的具体结构，决定是否采用深度监视