vue学习--起步(三)

in Vue教程 with 0 comments, 3457 views

回顾

继续上一篇内容(扫尾工作),经过之前的介绍和简短的实践,我们已经能够渐渐的体会到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应用。


Responses ${replyToWho} / Cancel Reply