vue计算属性computed、事件、监听器watch的使用讲解

下面我将详细讲解“vue计算属性computed、事件、监听器watch的使用讲解”的完整攻略，让你更加深入理解vue中这三个重要的概念。

计算属性computed

computed可以理解为计算属性，它可以根据已经存在的数据computed属性（即model中data中的属性）进行计算得到一个新的值，这个新的值可以使用在模板中。computed具有缓存的特性，当computed所依赖的data值发生改变时，computed才会重新计算，否则使用上次计算的结果。

下面是一个computed的示例：

<div id="app">
  <p>原始值：{{message}}</p>
  <p>computed计算值：{{reverseMessage}}</p>
</div>

var app = new Vue({
  el: "#app",
  data: {
    message: "Hello Vue.js"
  },
  // 计算属性和methods类似，一样可以使用函数的形式来定义
  computed: {
    reverseMessage: function() {
      return this.message.split('').reverse().join('');
    }
  }
})

在上面的示例里，computed中定义了reverseMessage属性，它通过计算message翻转后得到一个新的值，而这个值可以在模板中使用。

事件

在Vue中，可以通过v-on指令来监听DOM事件，比如click、mouseover等事件。其中，v-on可以简写成@，即@eventName。

下面是一个事件的示例：

<div id="app">
  <p>{{message}}</p>
  <button v-on:click="changeMessage">改变message的值</button>
</div>

var app = new Vue({
  el: "#app",
  data: {
    message: "Hello Vue.js"
  },
  methods: {
    changeMessage: function() {
      this.message = "Hello World"
    }
  }
})

在上面的示例里，我们通过在button上绑定click事件，并在methods中定义changeMessage方法来改变message的值。

监听器watch

在Vue中，通过watch属性可以监听某个data值的变化，并在它发生变化时执行某些操作，这个操作可以是一个函数，也可以是一个方法。

下面是一个watch的示例：

<div id="app">
  <p>原始值：{{message}}</p>
  <p>watch监听值：{{result}}</p>
</div>

var app = new Vue({
  el: "#app",
  data: {
    message: "Hello Vue.js",
    result: ''
  },
  watch: {
    message: function(val) {
      this.result = val.split('').reverse().join('')
    }
  }
})

在上面的示例里，我们通过在watch中监听message的变化，在变化时执行一个方法来计算翻转后的值，然后把这个值赋给一个新的属性result来显示到页面上。