【vue】用组件构建(bind)

[Kelichao]

组件构建方式,属性绑定v-bind

v-bind主要用于绑定dom属性

• 如金字塔一样的构建方式，进行功能划分，然后组装

<div id="app-7">
  <ol>
    <!-- 创建这个已组建名称命名的节点 -->
    <!-- 用v-for遍历组件的data.list -->
    <!-- v-bind相当于将list重命名为my，item为为键值名 -->
    <comp1 v-for="item in list" v-bind:my="item"></comp1>
  </ol>
</div>

• 这里需要注意的点是，v-bind:my = "item",这里的绑定就是指绑定数据源名称跟键值名，并不是dom的属性值绑定了

// 定义一个叫comp1的模板组件
// 这样模板就不会在还未初始化的时候显示了
// 当模板用
Vue.component('comp1', {
    // 将数据从父作用域传到子组件,并给数据对象取名
    // props，template中的数据，v-bind中的名字三者需要一致
    props: ['my'],
    // 最终渲染的模板
    template: '<li>{{ my.item }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    list: [
      { item: 'Vegetables' },
      { item: 'Cheese' },
      { item: 'Whatever else humans are supposed to eat' }
    ]
  }
})