从 0 到 1 轻松理解 Vue 双向绑定、计算属性和侦听器

2024-01-30 00:37:24

对于初学者而言，理解 Vue.js 的核心概念，如双向绑定、计算属性和侦听器，至关重要。本文将通过一个简单的示例，带你从头开始了解这些概念。

双向绑定

双向绑定是 Vue.js 的核心功能，它允许数据在组件模板和组件数据之间自动同步。这意味着当组件数据发生变化时，模板会自动更新，反之亦然。

要启用双向绑定，只需在模板中使用 v-model 指令，如下所示：

<input v-model="message">

在上面的示例中，<input> 元素的 value 属性将与组件数据中的 message 属性绑定。这意味着当用户输入 input 时，message 属性也会更新。反之亦然，当 message 属性在组件数据中更新时，input 的 value 属性也会更新。

计算属性

计算属性是 Vue.js 中的一种特殊属性，它允许你根据其他属性计算一个新的值。计算属性是只读的，并且只会在它们的依赖项发生变化时重新计算。

要创建计算属性，请使用以下语法：

computed: {
  reversedMessage: function() {
    return this.message.split('').reverse().join('');
  }
}

在上面的示例中，reversedMessage 计算属性将返回 message 属性的反转版本。当 message 属性发生变化时，reversedMessage 将自动重新计算。

侦听器

侦听器允许你在数据发生变化时执行某些操作。要创建侦听器，请使用以下语法：

watch: {
  message: function(newValue, oldValue) {
    console.log('Message changed from', oldValue, 'to', newValue);
  }
}

在上面的示例中，当 message 属性发生变化时，侦听器将被触发并记录一条日志消息。

示例

为了更好地理解这些概念，我们创建一个简单的 Vue 组件，它将演示双向绑定、计算属性和侦听器的用法：

var App = new Vue({
  data: {
    message: 'Hello Vue!'
  },
  computed: {
    reversedMessage: function() {
      return this.message.split('').reverse().join('');
    }
  },
  watch: {
    message: function(newValue, oldValue) {
      console.log('Message changed from', oldValue, 'to', newValue);
    }
  }
});