当使用 Vue cli 时，每一个组件，变成了单文件组件。在这个组件中，我们可以对它的逻辑、模版、样式进行定义，在定义样式的时候，可以分为：全局样式、局部样式。

子组件文件（xxx.vue）：

<template>
  <li class="item" @click="handleDelete">{{content}}</li>
</template>

<script>
export default {
  props: ['content', 'index'],
  methods: {
  	handleDelete () {
  		this.$emit('delete',this.index);
  	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.item{color:green;}
</style>

item 类的样式，不会影响到父组件中item 类的样式。其中 <style> 标签中的“scoped” 说明了该style的作用域仅为该组件（文件）内。 当删除scoped 时，该样式就对其他组件也生效（不推荐！）。