vuejs组件css作用域

关键字是使用scoped，在每一个样式里面添加scoped，具体代码如下：

<template>
  <div id="app">
     <h1>{{title}}</h1>
	 <users></users>
  </div>
</template>

<script>

//局部注册组件
import Users from './components/Users'

export default {
  name: 'App',
  data(){
     return {
	    title:"this is my first vue.js dffgb脚手架！"
	 }
  },
  components:{
     Users
  }
}
</script>

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

<template>
  <div class="users">
     <h1>Hello Users</h1>
     <ul>
	   <li v-for="user in users">
	      {{user}}
	   </li>
	 </ul>
  </div>
</template>

<script>
export default {
  name: 'users',
  data () {
    return {
      users: ["mischen","luke","jack"]
    }
  }
}
</script>


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

可以看出，每个h1标签都负责它自己的标签作用域，页面效果如下：