24-Vue组件化编程-单文件组件
单文件组件
一个文件中只包含有1个组件
组件名的注意事项
一个单词组成：
1）第一种写法（首字母小写）：school
2）第二种写法（首字母大写）：School，推荐
多个单词组成：
1）第一种写法（kebab-case命名）：my-school
2）第二种写法（CamelCase命名）：MySchool，推荐
创建一个school.vue文件，通常含有以下三种标签：
1）<template></template>：组件的结构
2）<script></script>：组件交互相关的代码（数据、方法）
3）<style></style>：组件的样式
这里需要注意，既然写成单文件组件，也就代表后面通常会使用import的方式导入组件，因此school.vue文件也需要通过export 进行暴露
暴露的三种方式，分别为分别暴露、统一暴露和默认暴露
第一种：分别暴露（写在<sctipt></script>中）
在导入时，使用 import {???} from ??? 的方式
export const school = Vue.extend({ data(){ return { schoolName:'尚硅谷', address:'北京', } }, methods:{}, })
第二种：统一暴露（写在<sctipt></script>中）
在导入时，使用 import {???} from ??? 的方式
const school = Vue.extend({ data(){ return { schoolName:'尚硅谷', address:'北京', } }, methods:{}, }) export {school}
第三种：默认暴露（推荐）
在导入时，使用 import ??? from ??? 的方式
const school = Vue.extend({ data(){ return { schoolName:'尚硅谷', address:'北京', } }, methods:{}, }) export default school
一般使用默认暴露，因为使用默认暴露在导入时，直接使用 import ??? from ??? 就可以了。但是使用分别暴露和统一暴露都需要这样写 import {???} from ??? 。
使用默认暴露时，可以不用中转变量，方式如下：
export default Vue.extend({ data(){ return { schoolName:'尚硅谷', address:'北京', } }, methods:{}, }) // 进一步简写，省去Vue.extend() export default { data(){ return { schoolName:'尚硅谷', address:'北京', } }, methods:{}, }
单文件组件的小案例，首先创建以下文件
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(){
alert(this.schoolName)
}
}
}
</script>
<style>
// 组件的样式
.demo{
background-color: orange;
}
</style>
Student.vue
<template>
<!--组件的结构-->
<div>
<h2>学生姓名：{{name}}</h2>
<h2>学生年龄：{{age}}</h2>
</div>
</template>
<script>
// 组件交互相关的代码（数据、方法）
export default {
name:"Student",
data(){
return{
name:"马铃薯",
age:26
}
}
}
</script>
<style>
// 组件的样式
.demo{
background-color: orange;
}
</style>
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:School,
Student:Student
}
}
</script>
<style>
</style>
main.js
import App from "./App.vue" new Vue({ el:"#root", template:"<App></App>", components:{App} })
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习单文件组件的语法</title>
</head>
<body>
<div id="root">
</div>
<!--Vue先就位-->
<script type="text/javascript" src="../js/vue.js"></script>
<!--main.js再就位-->
<script type="text/javascript" src="./main.js"></script>
</body>
</html>
