提示:该文章为笔者的个人笔记并不是权威,如有错误,谢谢指出。
单文件组件
.vue 文件是Vue提供的一种单文件组件,一个.vue文件就是一个单独的组件,在文件内封装了html、css、js。以下是单文件组件实例。
School.vue
// 组件结构
<template>
<div class="demo">
<h2>学校名称:{{schoolName}}</h2>
<button @click="showName">点击显示学校名称</button>
<h2>学校地址:{{address}}</h2>
</div>
</template>
// 组件相关代码(数据、方法)
<script>
export default {
name: 'School',
data() {
return {
shoolName: '清华大学',
address: '北京'
}
},
methods: {
showName() {
alert(this.schoolName)
}
}
}
</script>
// 组件样式
<style>
.demo {
background-color = red
}
</style>
Student.vue
// 组件结构
<template>
<div>
<h2>学生名称:{{studentName}}</h2>
<h2>学生年龄:{{age}}</h2>
</div>
</template>
// 组件相关代码(数据、方法)
<script>
export default {
name: 'Student',
data() {
return {
studentName: '小爱同学',
age: '18'
}
}
}
</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',
template: `
<App></App>
`,
components: {
School,
Student
}
}
</script>
<style>
</style>
main.js
<script>
import App from './App'
new Vue({
el: '#root',
components: {
App
}
})
</script>