Vue.js(二)

上一篇地址:https://www.cnblogs.com/autumn-starrysky/p/11741230.html

五、组件化应用构建

  组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树:

  这一块是我目前看到的Vue的比较核心的部分,所以单独列出来进行整理。

  在 Vue 里,一个组件本质上是一个拥有预定义选项的一个 Vue 实例。首先在 Vue 中注册组件:

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})

var app = new Vue(...)

  现在我们可以用它构建另一个组件模板:

<ol>
  <!-- 创建一个 todo-item 组件的实例 -->
  <todo-item></todo-item>
</ol>

  但是这样会为每个待办项渲染同样的文本,这看起来并不炫酷。我们应该能从父作用域将数据传到子组件才对。

  这就需要引入 props

<div id="app-7">
  <ol>
    <!--
      现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量,即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”,稍后再
      作详细解释。
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其它什么人吃的东西' }
    ]
  }
})

(看过前面的就知道这里依旧是图片哈哈哈,我还不知道怎么把我写的html传进来)

  我的理解:首先定义了Vue新组件 todo-item ,然后自定义一个 props:['todo'] 特性,通过 v-bind 将 todo 绑定在 v-for 中的 item上,通过 v-for来循环调用并显示 groceryList 中的元素。

posted @ 2019-10-26 14:43  秋夜星空  阅读(109)  评论(0编辑  收藏  举报