Vue Component 设置样式

Vue 组件支持单独设置每个组件的样式，只需要在根标签中创建 Style 标签即可。

<script>  
export default {  
  name: 'app',  
  data() {  
    return {  
      message: 'hello world'  
    }  
  }}  
</script>  
  
<template>  
  <div>  
    <p>{{message}}</p>  
  </div>  
</template>  
  
<style scoped>  
  
</style>

其中，style的 scoped 属性标志着该组件的style设置仅作用于该组件内。

使用 SCSS

在标签中添加 lang="scss" 即可添加SCSS支持：