【Vue 组件化编程】19.单文件组件

最新推荐文章于 2024-10-18 17:49:11 发布

我有满天星辰

最新推荐文章于 2024-10-18 17:49:11 发布

阅读量121

点赞数

分类专栏： # 【Vue教程】文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/beiluol/article/details/128378709

版权

【Vue教程】专栏收录该内容

23 篇文章 2 订阅

订阅专栏

一个.vue 文件的组成(3 个部分)

1. 模板页面

页面模板

2. JS 模块对象

<script> export default {
    data() {
      return {}
    }, 
    methods: {
      }, 
	computed: {
 	 }, 
	components: {
    
  }
}
</script>

3. 样式

2. 基本使用

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

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>练习一下单文件组件的语法</title>
	</head>
	<body>
		<!-- 准备一个容器 -->
		<div id="root"></div>
		<!-- <script type="text/javascript" src="../js/vue.js"></script> -->
		<!-- <script type="text/javascript" src="./main.js"></script> -->
	</body>
</html>

main.js

import App from './App.vue'

new Vue({
	el:'#root',
	template:`<App></App>`,
	components:{App},
})

App.vue

<template>
	<div>
		<School></School>
		<Student></Student>
	</div>
</template>

<script>
	//引入组件
	import School from './School.vue'
	import Student from './Student.vue'

	export default {
		name:'App',
		components:{
			School,
			Student
		}
	}
</script>

School.vue

<template>
	<div class="demo">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
		<button @click="showName">点我提示学校名</button>	
	</div>
</template>

<script>
	 export default {
		name:'School',
		data(){
			return {
				name:'学校',
				address:'深圳'
			}
		},
		methods: {
			showName(){
				alert(this.name)
			}
		},
	}
</script>

<style>
	.demo{
		background-color: orange;
	}
</style>

Student.vue

<template>
	<div>
		<h2>学生姓名：{{name}}</h2>
		<h2>学生年龄：{{age}}</h2>
	</div>
</template>

<script>
	 export default {
		name:'Student',
		data(){
			return {
				name:'测试1',
				age:18
			}
		}
	}
</script>