将一个组件相关的html结构,css样式,以及交互的JavaScript代码从html文件中剥离出来,合成一个文件,这种文件就是单文件组件,相当于一个组件具有了结构、表现和行为的完整功能,方便组件之间随意组合以及组件的重用,这种文件的扩展名为“.vue”,比如:”breadcrumb.vue”。

    1. // 使用template标签来定义html部分
    2. <template>
    3. <div :class="{crumb:true,hot:isHot}" @click="isHot=!isHot">
    4. 当前位置是:{{ pos }}
    5. </div>
    6. </template>
    7. // javascript要写成模块导出的形式:
    8. <script>
    9. export default{
    10. props:['pos'],
    11. data:function(){
    12. return {
    13. isHot:false
    14. }
    15. }
    16. }
    17. </script>
    18. // 样式中如果有scope关键字,表示这些样式是组件局部的,不会影响其他元素
    19. <style scoped>
    20. .crumb{
    21. width:90%;
    22. line-height:50px;
    23. margin:0px auto;
    24. border-bottom:1px solid #ddd;
    25. }
    26. .hot{
    27. color:red;
    28. font-weight:bold;
    29. text-indent:10px;
    30. }
    31. </style>