Vue單檔案元件入門
阿新 • • 發佈：2021-10-09
- 建立其他元件，例如School.vue和Student.vue
<template>
<div>
<h2>{{schoolName}}</h2>
</div>
</template>
<script>
export default {
name:'School',
data:{
schoolName:'第三中學'
}
}
</script>
<style>
</style>
- 首先建立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>
- 建立Vue例項物件（main.js）
import App from "./App";
new Vue({
el:'root',
components:{
App
},
template:`<App></App>`
})
- 建立主頁（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>