vue3框架_组件基础

vue3框架_组件基础

一.基础介绍

• 单文件组件

  Vue 单文件组件（又名 *.vue 文件，缩写为 SFC）是一种特殊的文件 格式，它允许将 Vue 组件的模板、逻辑 与 样式封装在单个文件中。

• 加载组件

  1. 引入组件 import MyComponentVue from './components/MyComponent.vue'

  2. 挂载组件 components: { MyComponentVue }

  3. 显示组件 <my-componentVue>

• 组件的组织

  通常一个应用会以一棵嵌套的组件树的形式来组织

scoped属性：这个CSS样式只在当前文件有效，不会作用到全局！

二.实例

app.vue:

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <mycomponent />
</template>

<script>
import mycomponent from './components/mycomponent.vue';

export default {
  name: 'App',
  components:{
    mycomponent
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

mycomponent.vue:

<template>
    <h3>单文件组件</h3>
</template>

<script>
export default {
    name:'mycomponent'
}
</script>

<style scoped>
    h3 {
        color: aquamarine;
    }
</style>