computed计算属性

计算属性（computed）在处理一些复杂逻辑时是很有用的。它的定义方式与methods类似。

 1 

 2   

 3     name:{{name}}
 4   
 5   {{reversedMessage}}
 6 
 7  
 8 

执行结果：

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

watch监听属性

可以通过 watch 来响应数据的变化。

范例：

 1 

 2     正方形边长 : 
 3     正方形周长 : 
 4 
 5 

 6 

执行结果：

当操作边长或周长时，watch都会监控到值的变化从而计算出对应的值。 

v-on事件绑定

v-on可以为元素绑定事件，可以用@简写。

 1 

 2   一号按钮
 3   二号按钮
 4 
 5  
 6 

v-on的拓展

 1 
 2 
 3 
 4 

 5 
 6 
 7 
 8 

 9 
10 
...
11 
12 
...
13 
14 
15 

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

1 
2 
3 

全部的按键别名：

• .enter
• .tab
• .delete (捕获 "删除" 和 "退格" 键)
• .esc
• .space
• .up
• .down
• .left
• .right
• .ctrl
• .alt
• .shift
• .meta