VUE-组件篇

vue官网介绍的第一个组件化例子稍微比较难。

1、基础组件介绍

<div id="app-2">
  <ol>
  <todo-item></todo-item>
</ol>
</div>
<script>
// 这一步是注册一个标签，但是并没有处理
Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})
// 这一步是用vue处理所有匹配#app-2的元素
new Vue({
  el: '#app-2',
  data: {
    seen:false
  }
})
</script>

定义如上组件，第一个表示标签名，第二个表示标签体内容。效果如下

2、复杂例子

// 定义组件 组件名称为todo-item，有一个成员属性名为todo，页面模板是一个包含成员属性text的li

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

// 新建一个vue对象，选择器是id为app-7的对象，参数是如下参数
var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其它什么人吃的东西' }
    ]
  }
})

<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>

1、定义组件和vue处理页面是分开的，如上定义的组件是item，这个组件的作用是显示他的todo属性的text内容

2、实例化过程是注册过程后的第二步，他做的是根据选择器内容去处理（把值放入标签内）相应的标签

3、建立html对象，这个对象要符合实例化选择器的规定，v-for是强化指令表示循环，v-bind是绑定指令，todo是这个标签注册时定义的属性，item是for里面定义的指令，v-bind将二者关联最后形成下图