.vue文件 -- 单文件组件

纯建

于 2019-05-30 12:00:32 发布

阅读量420

点赞数

博客介绍了Vue单文件组件相关内容，指出template是必须的，script和style可选。一个组件对应一个文件，.vue文件命名推荐大驼峰或 - 的形式。还提到安装Vetur插件可使代码高亮，以及单文件组件的使用步骤，包括创建、导入和注册。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	vue文件包含三个部分
	    1. template      模板：DOM结构
 		2. script        组件的配置项
 		3. style         样式

注意：template是必须有的，script和style可以没有

单文件组件：一个组件就是一个文件

.vue 文件命名要使用大驼峰【推荐】或是 - 的形式
举例：
Father
movie-box
ContentBox MovieBox

要想在编辑器中 .vue 文件代码高亮，安装Vetur插件

单文件组件使用：
1. 先创建.vue文件
2. 想在哪里使用就在哪里导入
import xxx from xxx
3. 在当前组件中注册导入的组件
export default {
components: {
xxx
}
}

【HMR】 热重载： 文件修改，浏览器自动刷新


<style scoped></style>
  scoped 将当前组件的样式设立独立作用域，只在当前组件中有效