今天是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>
