vue2.0 v-bind的用法

最新推荐文章于 2025-10-20 18:16:11 发布

原创最新推荐文章于 2025-10-20 18:16:11 发布 · 3.2k 阅读

1 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

23 篇文章

订阅专栏

本文通过一个简单的Vue.js示例展示了如何使用组件化的方式组织应用，有效地将复杂的应用分割成更小、更易于管理的部分。文章重点介绍了如何定义和使用自定义组件，以及如何通过属性(props)在父子组件间传递数据。

<div id="app-7">
  <ol>
    <!-- 现在我们为每个todo-item提供待办项对象    -->
    <!-- 待办项对象是变量，即其内容可以是动态的 -->
    <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
  </ol>
</div>

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { text: '蔬菜' },
      { text: '奶酪' },
      { text: '随便其他什么人吃的东西' }
    ]
  }
})

这只是一个假设的例子，但是我们已经设法将应用分割成了两个更小的单元，子单元通过 props 接口实现了与父单元很好的解耦。我们现在可以进一步为我们的 todo-item 组件实现更复杂的模板和逻辑的改进，而不会影响到父单元。