Vue.js 数据绑定教程

数据绑定是 Vue.js 中一个核心概念，它使得视图与数据模型保持同步，简化了前端开发过程。

基础概念

在 Vue.js 中，数据绑定通常通过 v-bind 指令实现。以下是一些基础概念：

• 单向绑定：数据从 Vue 实例流向 DOM。
• 双向绑定：数据在 Vue 实例和 DOM 之间双向流动。

单向绑定

<div id="app">
  <p>{{ message }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
});

双向绑定

<div id="app">
  <input v-model="message">
  <p>{{ message }}</p>
</div>

动态绑定属性

Vue.js 允许动态绑定各种属性，例如 class 和 style。

<div id="app">
  <div :class="{'active': isActive}">Active Class</div>
  <div :style="{ color: activeColor }">Active Color</div>
</div>

new Vue({
  el: '#app',
  data: {
    isActive: true,
    activeColor: 'red'
  }
});

事件绑定

Vue.js 允许你绑定事件处理器到 DOM 元素。

<div id="app">
  <button @click="greet">Greet</button>
</div>

new Vue({
  el: '#app',
  methods: {
    greet: function () {
      alert('Hello!');
    }
  }
});

路由与数据绑定

Vue.js 跟 Vue Router 结合使用时，可以方便地实现路由级别的数据绑定。

<div id="app">
  <router-link to="/home">Home</router-link>
  <router-link to="/about">About</router-link>
  <router-view></router-view>
</div>

new Vue({
  router,
  el: '#app'
});

了解更多关于 Vue.js 路由的信息。

总结

数据绑定是 Vue.js 的一个强大特性，它使得开发动态、响应式的用户界面变得更加容易。

Vue.js Logo