vue 组件基础

1. 单文件组件

vue单文件组件（.vue文件），将模板、逻辑、样式封装在单个文件里

<template>
 <h3> 单组件页面</h3>
</template>
<script>
export default {
  name: 'MyComponent'
}
</script>
<style scoped>
 h3{
  color:red
 }
</style>

2. 加载组件

第一步：新建一个驼峰命名方式或者用“-”连接单词进行命名的.vue组件文件（如MyComponent）

第二步：补充好.vue文件里的三个部分 

第三步：在App.vue文件里，修改<script>中的两个内容，引用和components的内容

引入组件：

import MyComponent from './components/MyComponent.vue';

挂载组件：

components: {
    MyComponent
}

第四步：在模板里加上这个组件

显示组件：

<template>
  <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
  <MyComponent />
</template>