vue.js指令和组件详细介绍及实例

<div id="app">
  <div v-text="message"></div>
</div>

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

// 告诉Vue，我需要一个组件叫做todo-item，它的配置如下，就是包含props和template那个对象
Vue.component('todo-item', {
 props: ['todo'],
 template: '<li>{{ todo.text }}</li>'
}) 
// 实例化一个vue对象，挂载在#app-7这个元素下，并且设定它的属性，groceryList，是一个数组
var app7 = new Vue({
 el: '#app-7',
 data: {
  groceryList: [
   { text: 'Vegetables' },
   { text: 'Cheese' },
   { text: 'Whatever else humans are supposed to eat' }
  ]
 }
})

<div id="app-7">
 <ol>
  <!--因为注册了全局的todo-item组件，所以在挂载范围内我们可以直接使用todo-item标签，来引用这个组件，-->
  <!--组件内部会被 todo-item配置表里的template替换，用来渲染。属性todo也是配置对象里规定的，可以接受的参数。-->
  <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
 </ol>
</div>

{
 props: ['todo'],
 template: '<li>{{ todo.text }}</li>'
}

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

new Vue({
  components: {
    'component-a' : {
       props: ['todo'],
       template: '<li>{{ todo.text }}</li>'，
       components: {
          'component-b' : {
             template: 'i am component b'，
             components: {
                ...
             }
          }
       }
    }
  }
})