Vue39 使用VsCode在创建好的脚手架里写自己的单文件组件

文彧

于 2024-07-04 02:42:46 发布

阅读量23

点赞数

文章标签： vscode ide 编辑器

使用VsCode在创建好的脚手架里写自己的单文件组件

MySchool

Vue39 使用VsCode在创建好的脚手架里写自己的单文件组件_vscode

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

<script>
export default {
		name:'MySchool',
		data(){
			return {
				name:'尚硅谷',
				address:'北京昌平'
			}
		},
		methods: {
			showName(){
				alert(this.name)
			}
		},
	}
</script>

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

MyStudent

Vue39 使用VsCode在创建好的脚手架里写自己的单文件组件_vscode_02

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

<script>
export default {
		name:'MyStudent',
		data(){
			return {
				name:'张三',
				age:18
			}
		}
	}
</script>

App

Vue39 使用VsCode在创建好的脚手架里写自己的单文件组件_sed_03

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    
    <MySchool></MySchool>
		<MyStudent></MyStudent>
  </div>
</template>

<script>

import MySchool from './components/MySchool.vue'
import MyStudent from './components/MyStudent.vue'

export default {
  name: 'App',
  components: {
    MySchool,
    MyStudent
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>