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之後