vue学习--起步(三)

vue

回顾

继续上一篇内容(扫尾工作)，经过之前的介绍和简短的实践，我们已经能够渐渐的体会到vue的简洁和强大之处，你会发现利用它来开发web应用是一件相当愉悦的事。

组件系统

组件系统是vue中另一个非常重要的概念，它提供了一种抽象，允许我们像搭积木一般，利用各种独立的、可复用的小组件来构建一个大型应用。因为这个特性，我们几乎可以把任意一个web界面抽象成一个组件树。

定义组件

在vue中，组件本质上是一个预先定义好选项的vue实例，定义一个组件非常简便。

// 定义一个名为user的组件
Vue.component('user', {
  template: '<div class="userInfo"><p class="name">Neil</p><p class="job">freelancers</p><p class="hobby">folk art</p></div>'
})

引用组件

引用也是如此

<!-- 引用user组件 -->
<div class="page">
	<user></user>
</div>

嗯？这像不像自定义html标签，或者说是扩展了html标签，而且一点也不违和。事实上vue的作者正是参考了Web 组件规范(远未完成 提前体验)，设计了这样一套组件语法，而且实现了 Slot API 与 is 特性(后期的文章会陆续介绍)。

灵活的改进

也许你会发现，上边的例子太过死板，是的我们完全可以让他变得更好。

// 定义一个名为user的组件
Vue.component('user', {
  props: ['item'],
  template: '<div class="userInfo"><p class="name">{{item.name}}</p><p class="job">{{item.job}}</p><p class="hobby">{{item.hobby}}</p></div>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    item: {
      name: 'Neil',
      job: 'freelancers',
      hobby: 'folk art'
    }
  }
})

<div class="page" id="app-7">
	<user v-bind:item:"item"></user>
</div>
<!-- 引用user组件 -->

经过上边的改造，可以给user传递动态数据，user组件变得可复用。

运行结果：

更进一步

利用v-for指令，我们甚至输出一个用户列表。

// 定义一个名为user的组件
Vue.component('user', {
  props: ['item'],
  template: '<li class="userInfo"><p class="name">{{item.name}}</p><p class="job">{{item.job}}</p><p class="hobby">{{item.hobby}}</p></li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    list:[
      {
        name: 'Neil',
        job: 'freelancers',
        hobby: 'folk art'
      },
      {
        name: 'Judy',
        job: 'writer',
        hobby: 'travel'
      }
    ]
  }
})

<ol class="page" id="app-7">
    <user v-for="item in list" v-bind:item="item"></user>
</ol>
<!-- 引用user组件 -->

运行结果：

组件是可嵌套的、可交互的、它不单单只是自定义了标签而已，我们可以在组件之间进行数据传输，自定义事件系统，以及很好的和构建工具进行集成(如webpack)。可以说组件系统是构建vue应用的基石，灵活的组件系统和其它强大的特性，vue为我们提供了广阔的想象空间去编写一个web应用。