day72-单文件组件

单文件组件

将不同的组件html文件，js文件分为不同的独立文件

并进行import引入

School.vue

<template>
   <!--组件的结构-->
   <div class="demo">
     <h2>名称：{{schoolName}}</h2>
     <h2>地址：{{address}}</h2>
   </div>
 
 </template>
 
 <script>
   //组件交互相关的代码
   export default{
     name:'School',
     data(){
       return{
         schoolName:'中南大学',
         address:'changsha',
       }
     },
   }
 
 </script>
 
 <style>
   /*组件的样式*/
   .demo{
     background-color: orange;
   }
 </style>

分为组件的结构，组建的交互，组件的样式

Student.vue

<template>
   <!--组件的结构-->
   <div class="demo">
     <h2>学生姓名：{{name}}</h2>
     <h2>年龄：{{age}}</h2>
   </div>
 
 </template>
 
 <script>
   //组件交互相关的代码
   export default{
     name:'Student',
     data(){
       return{
         name:'gugu',
         age:22
       }
     },
   }
 
 </script>
 
 <style>
   /*组件的样式*/
   .demo{
     background-color: orange;
   }
 </style>

App.vue

汇总组件

 <template>
   <div>
     <School></School>
     <Student/>
   </div>
 </template>
 
 <script>
 //引入组件
 import School from "./School.vue";
 import Student from "./Student.vue";
 
 export default {
   name: "App",
 
   components:{
     School,
     Student
   }
 }
 </script>
 
 <style scoped>
 
 </style>

main.js

注册app

import App from "./App";
 
 new Vue({
     el:'#root',
     components:{App},
 
 })

index.html

 <body>
     <div id="root">
         <App></App>
     </div>
     <script type="text/babel" src="../js/vue.js"></script>
     <script type="text/javascript" src="main.js"></script>
 </body>

posted @ 2023-02-11 20:24 北海之上阅读(24) 评论(0) 收藏举报

刷新页面返回顶部

GUGU

day72-单文件组件

单文件组件

公告