将一个组件相关的html结构,css样式,以及交互的JavaScript代码从html文件中剥离出来,合成一个文件,这种文件就是单文件组件,相当于一个组件具有了结构、表现和行为的完整功能,方便组件之间随意组合以及组件的重用,这种文件的扩展名为“.vue”,比如:"breadcrumb.vue"。
// 使用template标签来定义html部分
<template>
<div :class="{crumb:true,hot:isHot}" @click="isHot=!isHot">
当前位置是:{{ pos }}
</div>
</template>
// javascript要写成模块导出的形式:
<script>
export default{
props:['pos'],
data:function(){
return {
isHot:false
}
}
}
</script>
// 样式中如果有scope关键字,表示这些样式是组件局部的,不会影响其他元素
<style scoped>
.crumb{
width:90%;
line-height:50px;
margin:0px auto;
border-bottom:1px solid #ddd;
}
.hot{
color:red;
font-weight:bold;
text-indent:10px;
}
</style>