今天是2022年6月30日,是我学习vue的第十一天
今天也是2022年上半年的最后一天
单文件组件
一个vue文件的组成部分
<!-- 第一部分：页面模板 -->
<template>
</template>
<!-- 第二部分：js模块对象 -->
<script>
// 组件交互代码（数据、方法等）
export default {
}
</script>
<!-- 第三部分：组件的样式 -->
<style>
/* */
</style>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单文件组件</title>
</head>
<body>
<div id="root">
<App></App>
</div>
<script src="../../vue_basic/js/vue.js"></script>
<script src="./main.js"></script>
<script>
Vue.config.productionTip = false
</script>
</body>
</html>
main.js
import App from './App.vue'
// 创建Vue实例
new Vue({
el: '#root',
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>
<style>
</style>
School.vue
<template>
<div class="demo">
<h2>学校名称：{{ schoolName }}</h2>
<h2>学校地址：{{ address }}</h2>
<button @click="showName">点我提示学校名</button>
</div>
</template>
<script>
export default {
name: "School",
data() {
return {
schoolName: "尚硅谷",
address: "北京",
};
},
methods: {
showName() {
console.log(this.schoolName);
},
},
};
// export default school
</script>
<style>
.demo {
background-color: pink;
}
</style>
Student.vue
<template>
<div class="demo">
<h2>学生姓名：{{ name }}</h2>
<h2>学生年龄：{{ age }}</h2>
<button @click="showName">点我提示学生姓名</button>
</div>
</template>
<script>
export default {
name: "Student", //指定组件在开发者工具中的名字
data() {
return {
name: "giao",
age: 18,
};
},
methods: {
showName() {
alert(this.name);
},
},
};
// export default school
</script>
<style>
.demo {
background-color: gray;
}
</style>
