Vue入门基础（组件CSS样式）

scoped的做用：使嵌套的样式引用不影响当前的vue

App.vue

<template>
  <div id="app">
    <h1>APP.VUE</h1>
    <!--使用组件-->
    <Users/>
  </div>
</template>

<script>
//注册局部组件
//1 引入组件
import Users from './components/Users.vue'

export default {
  name: 'app',
  components: { //2 注册组件
    Users
  }
}
</script>

<style>
 h1{
  color:red;
} 

</style>

Users.vue

<template >
  <div id="users">
    <h1>USERS.VUE</h1>
    <ol>
        <!-- vue 遍历须要key属性绑定-->
        <li v-for="(val,index) in users" :key="index">
            {{val}} 111
        </li>
    </ol>
  </div>
</template>

<script>
//js 逻辑部分
export default {
  name: 'users',
  data() {
    return {
     users:["sunwuk","zhubj","shawujing"]
    };
  }
}
</script>

<style scoped>
h1{
  color:green;
}
</style>

最终效果

使用scope以前

使用scope以后