首页 > 代码库 > Vue.js组件开发:从一个简单的例子说起

Vue.js组件开发:从一个简单的例子说起

      <ol>
        <!-- <li v-for="thing in someThings" >
          {{ thing.name }}
        </li> -->
        <thing-liv-for="thing in someThings" v-bind:something="thing"></thing-li>
      </ol>

li列表的功能是显示一件事情的名字,我们以它作为例子来介绍最简单的一个Vue组件:
组件定义:

Vue.component(‘thing-li‘, {
  props: [‘something‘],
  template: ‘<li>{{ something.name }}</li>‘
});
var app = new Vue({
  el: ‘#app‘,
  data: {
    message: ‘Hello‘,
    someThings: [
      { name: ‘oral‘ },
      { name: ‘peanuts‘ }
    ]
  }
});

语法上需要注意的是组件的名字会被当做html标签一样写html文件中,而组件中定义的props的值则需要绑定(v-bind:prop="...")

Vue.js组件开发:从一个简单的例子说起