vueday2

vue.js计算属性与侦听

一、Vue计算属性

1、为什么要用计算属性？

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护

2、概念：首先它是一种属性，其次它有“计算”这个特殊性质。每次取得它的值得时候，它并不像普通属性那样直接返回结果，而是经过一系列的计算之后再返回结果。同时只要在它的当中里引用了 data 中的某个属性，当这个属性发生变化时，计算属性仿佛可以嗅探到这个变化，并自动重新执行。

3、语法：

computed:{

需要返回的数据:function(){

return  处理操作;

}

}

4、使用例子

//改造把数据转大写并且截取的例子，使用计算属性
computed:{
    demoText:function(){
        return this.text.toUpperCase().substr(0,4);
    }
}

//上述例子也可以用方法实现
methods:{
    textfun(){
        return this.text.toUpperCase().substr(0,4);
    }
}

5、计算属性和方法的区别：

1. 计算属性是基于它们的依赖进行缓存的，计算属性只有在它的相关依赖发生改变时才会重新求值。
2. 方法绑定数据只要被调用，方法将总会再次执行函数。
   计算属性相对于方法在处理特定场合下节省资源性能。

二、侦听/监听 watch

1、作用：可以监听模型数据，当模型数据改变的时候就会触发。watch初始化的时候不会运行,只有数据被改变之后才会运行。

2、语法：

watch:{
监听的data数据(newval,oldval){
	console.log(newval+"---"+oldval)
}
}
//newval新数据,oldval旧数据

3、什么时候使用watch？

当需要在数据变化时执行异步或开销较大的操作时，watch这个方式是最有用的。

4、计算属性与侦听器的区别：

1. 当watch监听的值发生改变就会被调用，watch可以在数据变化时做一些异步处理或者开销大的操作
2. 计算属性是计算依赖的值，当依赖的值发生改变才会触发。

Vue.js事件对象与事件修饰符

一、事件对象

1、作用：记录事件相关的信息

2、语法：

<div @click='fn($event)'></div>
<!--$event为事件对象。-->

二、事件修饰符

1、概念：v-on指令提供了事件修饰符来处理DOM事件细节。

2、语法：@click.修饰符=“fn()”

3、按键修饰符：.up、.down、.ctrl、.enter、.space等等

4、事件修饰符：

• prevent修饰符：阻止事件的默认行为(submit提交表单)
• stop修饰符：阻止事件冒泡
• capture修饰符：阻止事件捕获
• self：只会触发自己范围内的事件，不包含子元素。
• once：只会触发一次

注意：修饰符可以串联使用