vue-vue2核心9-组件化编程-单文件组件

最新推荐文章于 2024-05-07 19:36:48 发布

飘然渡沧海

最新推荐文章于 2024-05-07 19:36:48 发布

阅读量99

点赞数

分类专栏： # vue基础文章标签： vue.js vscode javascript

本文链接：https://blog.csdn.net/zhougubei/article/details/121144904

版权

vue基础专栏收录该内容

10 篇文章 1 订阅

订阅专栏

vue-vue2核心9-组件化编程-单文件组件

单文件组件

在创建vue文件时，要在vscode里面下载插件 vetur

在这里插入图片描述

单文件结构分类为

<template>
    

</template>


<script>
// 暴露该方法
export default {
    setup() {
        
    },
}
</script>

<style>

</style>

创建school文件

<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>

APP 汇总文件

<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>

main.js

import App from './App.vue'

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

页面引入

<!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>

飘然渡沧海

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-vue2核心9-组件化编程-单文件组件

vue-vue2核心9-组件化编程-单文件组件单文件组件在创建vue文件时，要在vscode里面下载插件 vetur单文件结构分类为<template> </template><script>// 暴露该方法export default { setup() { },}</script><style></style>创建school文件<temp
复制链接

扫一扫