单文件组件 | iGmaBlog

知识点

.vue 文件

单文件组件的意思是，每一个文件都是一个组件，而且文件的后缀名为 .vue，也可以说是每个 .vue 文件都是一个组件。
.vue 组件的组成部分基本分为三大块，分别是 template 标签、script 标签和 style 标签。
使用 VS Code 开发 .vue 文件时，需要借助一个插件，插件名为 Vetur，如下图：

template 标签

作用：用于编写组件框架，也就是 HTML 部分。
注意事项
1. 和之前一样，template 标签内只能有一个子元素，不能有多个，否则会报错。
2. 通常情况下，在 template 标签里面写一个 div，然后把页面组件结构中需要的标签写在这个 div 中。

代码

Vue

<template>
    <div class="demo">
        <h3>学校名字：{{ name }}</h3>
        <h3>学校地址：{{ address }}</h3>
    </div>
</template>

script 标签

作用：用于编写组件的业务逻辑。
注意事项
1. 编写好一个组件后，需要将这个组件暴露出去，方便其他页面引用。
2. 可以使用 ES6 中的 export 将其抛出。
3. 被抛出的内容就是这个组件创建的参数，这里省去了 Vue.extend 也是可以的。

代码

Vue

<script>
    export default {
        name: 'School',
        data(){
            return {
                name: '内蒙古农业大学',
                address: '内蒙古呼和浩特'
            }
        }
    }
</script>

style 标签

作用：style 标签负责写一些样式文件，同 .html 文件中的 style 标签。

代码

Vue

<style>
    .demo {
        background-color: orange;
    }
</style>

基本用法

需求

创建一个 Student 组件，动态显示学生姓名和年龄。
创建一个 School 组件，动态显示学校名字和地址。
创建一个 App 组件，在组件中引入并使用 Student 和 School 组件。
创建 main.js 文件，在文件中 new Vue 实例，并引入 App 组件。
创建 index.html 文件，在文件中引入 main.js 和 vue.js 并且使用 App 这个组件。

代码实现

Student 组件

Vue

<template>
    <div>
        <h3>学生姓名：{{ name }}</h3>
        <h3>学生年龄：{{ age }}</h3>
    </div>
</template>

<script>
    export default {
        name: 'Student',
        data(){
            return {
                name: 'iGma',
                age: 21
            }
        }
    }
</script>

School 组件

Vue

<template>
    <div class="demo">
        <h3>学校名字：{{ name }}</h3>
        <h3>学校地址：{{ address }}</h3>
    </div>
</template>

<script>
    export default {
        name: 'School',
        data(){
            return {
                name: '内蒙古农业大学',
                address: '内蒙古呼和浩特'
            }
        }
    }
</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,Student
        }
    }
</script>

main.js

javascript

import App from './App.vue'

new Vue({
    el: '#root',
    components: {App},
    template: `<App></App>`
})

index.html

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script src="../js/vue.js"></script>
    <script src="./main.js"></script>
</body>
</html>

运行结果：报错

细节说明

在一个组件中，如果没有样式文件，style 标签可以省略不写。但是 template 标签和 script 标签必须要有。
程序最终没有运行出来，原因是浏览器不能直接支持 ES6 模块化语法。
如何解决？后期学脚手架后，用脚手架运行 index.html 文件绝对不会报错。

全局引入组件

在 main.js 文件中可对组件进行全局引入，代码如下

javascript

Vue.component('Shool',Shool);

知识点 ​

.vue 文件 ​

template 标签 ​

script 标签 ​

style 标签 ​

基本用法 ​

需求 ​

代码实现 ​

细节说明 ​

全局引入组件 ​

知识点

.vue 文件

template 标签

script 标签

style 标签

基本用法

需求

代码实现

细节说明

全局引入组件