注意点说明

结构<template>
只能有一个根元素

逻辑<script>
el根实例独有，data是一个函数，其他配置项一样

样式<style>
全局样式（默认）：影响所有组件
局部样式：scoped 下样式，只作用与当前组件

组件的样式冲突scoped

默认情况：写在组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。
1、全局样式：默认组件中的样式会作用到全局
2、局部样式：可以给组件加上scoped属性，可以让样式只作用于当前组件。

scoped原理

1、当前组件内标签都被添加data-v-hash值的属性
2、css选择器都被添加[data-v-hash值]的属性选择器

data是一个函数

一个组件的data选项必须是一个函数。（保证，每个组件实例，维护独立的一份数据对象）

<template>
  <div class="base-count">
    <button @click="count--">-</button>
    <span>{{count}}</span>
    <button @click="count++">+</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      count: 999
    }
  }
}
</script>

<style>
.base-count {
  margin: 20px;
}
</style>