No.62 Vue---组件基础

一、组件基础

1.1 单文件组件

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

1.创建一个组件

<template>
    <h3>zujian</h3>
</template>

<script>
    export default{
        data(){
    return{
      myzujian:"hahh",
    }
  }
    }
</script>
<!-- scoped:如果在style中添加此屬性，就代表當前樣式只在當前組件中生效 -->
<style scoped>
    h3{
        color: aqua;
    }
</style>

　　

 

2.加载组件，在主文件   APP.vue 中

 

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  <MyZuJian1/>    <!--顯示組件-->
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import MyZuJian1 from './components/HelloWorld.vue'  //引入組件

export default {
  name: 'App',
  components: {
    HelloWorld,
    MyZuJian1     //掛載組件
  }
}
</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>
 

　　

3.组件的组织

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