vue常用操作及学习笔记（样式）

scoped属性

当 <style> 标签有scoped 属性时，它的 CSS 只作用于当前组件中的元素

<style>
/* 全局样式 */
</style>

<style scoped>
/* 本地样式 */
</style>

如何让CSS只在当前组件中起作用？
使用css预处理器

// less
<template>
    <div class="myLess">            
    </div>
</template>
<script type="text/javascript">
    export default{
        data () {
            return {
                index:0
            }
        }
    }
</script>
<style type="text/css" lang="less">
    .myLess{            
    }
</style>

// sass
<template>
    <div class="mySass">            
    </div>
</template>
<script type="text/javascript">
    export default{
        data () {
            return {
                index:0
            }
        }
    }
</script>
<style type="text/css" lang="scss">
    .mySass{            
    }
</style>