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

Posted 2020-09-04

      <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="..."）