因为在前一篇讲了组件的相关知识点,所以这篇博客就不讲了,如果不知道的小伙伴先去看前一篇哟,这篇博客直接步入主题,讲单文件组件
单文件组件:一个文件中只包含有1个组件
每一个模块都有属于自己的 名字.vue 文件,里面配置属于模块的 <template>、<script>、<style>,配置完后然后再创建一个 App.vue 里面用来管理所有的组件,后创建 main.js 用来管理 App ,最后!创建 html 文件 把 main.js 引入即可
下面我们就开始操作起来把~
首先,我们要先把基本的文件创建好
接下来是每个文件的对应代码:
School.vue:
<template>
<div class="demo">
<h2>学校名称:{{name}}</h2>
<h2>学校地址:{{address}}</h2>
<button @click="showName">点我提示学校信息</button>
</div>
</template>
<script>
export default {
name: 'School',
data(){
return {
name:'尚硅谷',
address:'北京'
}
},
methods: { //定义的方法
showName(){
alert(this.name)
}
},
}
</script>
<style>
.demo{
background-color: aquamarine;
color:burlywood
}
</style>
Student.vue
<template>
<div>
<h2>学生姓名:{{name}}</h2>
<h2>学生年龄:{{age}}</h2>
</div>
</template>
<script>
export default {
name: 'Student',
data(){
return {
name:'张三',
age:18
}
}
}
</script>
<style>
</style>
App.vue
<template>
<div>
<school></school>
<student></student>
</div>
</template>
<script>
// 引入组件
import Student from './Student.vue'
import School from './School.vue'
export default {
name:'App',
components:{
School,
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">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单文件组件</title>
</head>
<body>
<div id="root">
</div>
<script src="../js/vue.js"></script>
<script src="./main.js"></script>
</body>
</html>
如果是用 VS code 编辑的小伙伴,需要下载一个插件
这样在写 .vue 文件的时候就有提示啦!