Vue学习（十四）：单文件组件

原创于 2022-04-27 21:11:19 发布 · 186 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #前端 #javascript #vue #vue.js

前端学习同时被 2 个专栏收录

119 篇文章

订阅专栏

Vue.js

25 篇文章

订阅专栏

本文介绍了Vue.js中组件的基本使用方法，包括组件的声明、导入和在模板中的使用。通过示例展示了如何在App.vue中引入并使用HelloWorld组件，以及在main.js中创建Vue实例的过程，阐述了Vue应用的基础架构。

1. vue文件

<template>
	<!--页面模板-->
</template>
<script>
export default {
	//组件
	data() {return {}},
	methods: {},
	computed: {},
	components: {}
}
</script>
<style>
	/*样式定义*/
</style>

2. 基本使用

引入组件
映射成标签
使用组件标签

App.vue

<template>
	<div>
		<HelloWorld></HelloWorld>
	</div>
</template>

<script>
	import HelloWorld from './components/HelloWorld'
	export default {
		name: 'App',
		components: {
			HelloWorld
		}
	}
</script>

main.js

import Vue from 'vue'
import App from './App'

new Vue({
	el: '#app',
	render: h => h(App)
})