Vue：（二十七）脚手架之scoped样式

作用：让样式在局部生效，防止冲突

写法：<style scoped>

App.vue

<template>
  <div>
    <h1 class="test">欢迎来到空谷有来人</h1>
    <School />
    <hr>
    <Student />
  </div>
</template>

<script>
  //引入组件
  import School from './components/School.vue'
  import Student from './components/Student.vue'

  export default {
    name: 'App',
    components: {
      School,
      Student,
    },
  }
</script>
<style>
  .test {
    background-color: blueviolet;
  }
</style>

School.vue

<template>
  <div class="demo">
    <h2>学校名称：{{name}}</h2>
    <h2>学校地址：{{address}}</h2>
  </div>
</template>

<script>
  //组件交互相关代码（数据、方法等等）
  export default {
    name: 'SchoolVue',
    data() {
      return {
        name: '西航',
        address: '西安',
      }
    },
  }
</script>

<style scoped>
  .demo {
    background-color: skyblue;
  }
</style>

Student.vue

<template>
  <div class="demo">
    <h2>学生姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
  </div>
</template>

<script>
  //组件交互相关代码（数据、方法等等）
  export default {
    name: 'StudentVue',
    data() {
      return {
        name: '空谷有来人',
        age: 19,
      }
    },
  }
</script>
<style scoped>
  .demo {
    background-color: orange;
  }
</style>

我是空谷有来人，谢谢支持！