非单文件组件 —— 一个文件中包含n个组件(n>1)
单文件组件 —— 一个文件中只包含1个组件
Vue中使用单文件组件的三大步骤
定义
创建一个Vue文件,在这个文件写入html css javascript
<template></template>
——写入结构(HTML)
<script></script>
——写入业务逻辑(JS)
<style></style>
——写入样式(CSS)
Student.vue
<template>
<div>
<h2>学生姓名:{{studentName}}</h2>
<h2>学生年龄:{{age}}</h2>
</div>
</template>
<script>
export default {
data(){
return{
studentName:"张三",
age:16
}
}
}
</script>
<style>
</style>
School.vue
<template>
<div>
<h2>学校名称:{{schoolName}}</h2>
<h2>学校地址:{{address}}</h2>
</div>
</template>
<script>
export default {
data(){
return{
schoolName:"清华",
address:"北京"
}
}
}
</script>
<style>
</style>
App.vue
<template>
</template>
<script>
import School from "./School"
import Student from "./Student"
export default {
name:App,
components:{
School,
Student
}
}
</script>
<style>
</style>
注册
main.js
import App from "./App"
new Vue({
el:"#root",
components:{
App:App
}
})
引用
index.html
<body>
<div id="root">
<App></App>
</div>
<script src="./main.js"></script>
</body>
但是这样子会报错,Cannot use import statement outside a module,这是因为没有使用脚手架,导致在代码中的import出现了问题,不能出现效果