Loading

Vue - 单文件组件入门

  1. 创建其他组件,例如School.vue和Student.vue
<template>
  <div>
    <h2>{{schoolName}}</h2>
  </div>
</template>
<script>
  export default {
    name:'School',
    data:{
      schoolName:'第三中学'
    }
  }
</script>
<style>

</style>
  1. 首先创建App.vue,该组件管理其他所有组件。
<template>
  <div>
    <School></School>
    <Student></Student>
  </div>
</template>
<script>
import School  from "./School";
import Student from "./Student";

  export default {
    name:'App',
    components:{
      School,
      Student
    }
  }
</script>
<style>

</style>
  1. 创建Vue实例对象(main.js)
import App from "./App";
new Vue({
    el:'root',
    components:{
        App
    },
    template:`<App></App>`
})
  1. 创建主页(index.html)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="root"></div>
<script src="/js/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
posted @ 2021-10-09 15:19  IamHzc  阅读(53)  评论(0编辑  收藏  举报