Vue入门教程 第四篇 （属性、事件）

computed计算属性

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

<div id="app">
  <div>
    name:{{name}}
  </div>
  {{reversedMessage}}
</div>
 
<script>
var vm = new Vue({
  el: '#app',
  data: {
    name: 'Jimmy'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      return this.name+" welcome!"
    }
  }
})
</script>

执行结果：

 

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

watch监听属性

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

范例：

<div id = "computed_props">
    正方形边长 : <input type = "text" v-model = "length">
    正方形周长 : <input type = "text" v-model = "perimeter">
</div>
<p id="info"></p>
<script type = "text/javascript">
    var vm = new Vue({
    el: '#computed_props',
    data: {
        length : 0,
        perimeter:0
    },
    watch : {
        length:function(val) {
            this.length = val;
            this.perimeter = this.length * 4
        },
        perimeter : function (val) {
            this.perimeter = val;
            this.length=this.perimeter/4
        }
    }
    });
</script>

执行结果：

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

v-on事件绑定

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

<div id="app">
  <button v-on:click="showCount1">一号按钮</button>
  <button @click="showCount2">二号按钮</button>
</div>
 
<script>
var app = new Vue({
  el: '#app',
  data: {
    count1: 0,
    count2: 0,
  },
  // 在 `methods` 对象中定义方法
  methods: {
   showCount1(){
       this.count1++;
       alert("一号按钮已经被点击了"+this.count1+"次");
   },
   showCount2(){
       this.count2++;
       alert("二号按钮已经被点击了"+this.count2+"次");
   },
  }
})
</script>

v-on的拓展

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

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

<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

全部的按键别名：

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