Vue传统组件的问题
- 全局组件不能重名
- 定义组件的时候,一个组件中可以有
JS
、有html模板、但是无法定义css样式 JS
高级语法无法施展- 使用字符串定义组件模板十分丑陋,也无语法高亮和代码提示
Vue单文件组件的用法
基本语法规则
- 每个组件都是一个后缀名为
.vue
的文件 - 每个组件内部都可以有
template
、script
、style
三个定义区域 - 可以
style
标签中加入scoped
属性设置样式私有
比如:
<template>
<!-- 模板区域 -->
<div>
<p>Hello World</p>
</div>
</template>
<script>
// 脚本区域
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style scoped>
/* 样式区域 */
</style>
在其它文件中使用单文件组件
只需要导入即可
import App from './App.vue'