46.vue样式的写法

School.vue

<template>
  <div class="demo">
    <!-- 使用过滤器mySlice匹配字符串 -->
    <h2 class="title">学生姓名:{{ name }}</h2>
    <h2 class="sex">学生性别:{{ sex }}</h2>
    <h2 class="go">123</h2>
  </div>
</template>

<script>
//对外暴露组件
export default {
  name: "MyStudent", //组件名
  data() {
    //组件数据
    return {
      name: "疾风剑豪",
      sex: "男",
    };
  },
};
</script>

<style lang="less" scoped>
/* scoped设置此样式只管本组件 */
.demo {
  background-color: orange;
  .sex {
    color: aqua;
  }
}
</style>

<style scoped>
.go {
  color: brown;
}
</style>

School.vue

<template>
  <div class="demo">
    <h2 class="title">学校姓名:{{ name }}</h2>
    <h2>学生性别:{{ address }}</h2>
  </div>
</template>

<script>
//对外暴露组件
export default {
  name: "MySchool", //组件名
  data() {
    //组件数据
    return {
      name: "广职院",
      address: "佛山",
    };
  },
};
</script>

<style scoped>
.demo {
  background-color: blue;
  margin-top: 100px;
}
</style>

App.vue

<template>
  <div>
    <school></school>
    <student></student>
  </div>
</template>

<script>
import Student from "./components/Student.vue";
import School from "./components/School.vue";
//创建App组件
export default {
  name: "App", //组件名称
  components: {
    //组件的子组件
    Student,
    School,
  },
};
</script>

<style>
.title {
  color: red;
}
</style>

main.js

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');