• Vue单文件组件的创建及三种暴露（分别、统一、默认）方式

    文章目录

    .vue文件变成js文件的两种方式：

    1. webpack
    2. 脚手架（使用）

    例：创建school.vue组件

    组件起名

    如果是一个单词的名字:
    第一种写法直接纯小写school.vue
    第二种写法第一个字母大写School.vue(一般使用)
    多个单词：
    第一种写法 my-school.vue
    第二种写法（大驼峰） MySchool.vue(一般使用)

    暴露三种方式：

    demo: 中写三种暴露组件方式之一。

    <template>
    
    <div class="demo">
        <h2>学校名称：{{schoolName}}h2>
        <h2>学校地址：{{address}}h2>
        <button @click="showName">点我提示学校名button>
    div>
template>
<script>
    //组件交互的相关代码
script>
<style>
     /* 组件的样式 */
     .demo{
        background-color: orange;
     }
style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    第一种：分别暴露（写在中）

    export const school = Vue.extend({
    data(){
        return {
            schoolName:'尚硅谷',
            address:'北京',
        }
    },
    methods:{},
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    第二种：统一暴露（写在中）

    const school = Vue.extend({
    data(){
        return {
            schoolName:'尚硅谷',
            address:'北京',
        }
    },
    methods:{},
})
export {school}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    第三种：默认暴露

    const school = Vue.extend({
    data(){
        return {
            schoolName:'尚硅谷',
            address:'北京',
        }
    },
    methods:{},
})
export default school

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    一般使用默认暴露，因为使用默认暴露在导入时，直接使用 import ??? from ??? 就可以了。但是使用分别暴露和统一暴露都需要这样写 import {???} from ??? 。

    使用默认暴露时，可以不用中转变量。方式如下：

    export default Vue.extend({
    data(){
        return {
            schoolName:'尚硅谷',
            address:'北京',
        }
    },
    methods:{},
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    然后还可以进一步简写，省去Vue.extend()，使用创建组件的简写形式。直接暴露组件的配置对象。

    export default {
    data(){
        return {
            schoolName:'尚硅谷',
            address:'北京',
        }
    },
    methods:{},
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    加个名字（组件的name属性），名字会在开发者工具种呈现。
    在这里插入图片描述

    创建两个组件，分别是Student和School

    创建了App组件
    在App组件中引入组件（在脚手架中，import组件时，可以带.vue后缀也可以不带）
    在main.js（入口文件）中创建Vue实例

    import App from './App'

new Vue({
    el:'#root',
    components:{App}
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    创建Vue实例之后，发现没有Vue实例服务的实例，所以需要创建一个html文件。

    在index.html文件中，在body的闭标签上方引入main.js文件，保证容器先存在。

    在main.js上方引入main.js依赖的vue.js文件

    然后把写进页面（两种形式：直接写或者通过template）

    代码

    以下代码不能运行，来源尚硅谷，引导学习使用。

    index.html

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习一下单文件组件的语法title>
head>
<body>
    
    <div id="root">
    div>
    <script src="../js/vue.js">script>
    <script src="./main.js">script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    main.js

    import App from './App.vue'

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    App.vue

    <template>
    <School>School>
    <Student>Student>
template>

<script>
    //引入组件
    import School from './School'
    import Student from './Student.vue'

    export default {
        name:'App',
        //注册组件
        components:{
            School,
            Student
        }
    }
script>

<style>style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    School.vue和Student.vue组件

    





    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
  • 相关阅读:
    Python爬虫实战，requests+xlwings模块，Python实现制作天气预报表！
    为什么gitlab runner 必须要映射docker.sock
    Linux 程序开发流程 / 基本开发工具 / Vim / GCC工具链 / Make 工具 / Makefile 模板
    【从安装JDK开始】Spring Cloud + Apache Ignite简单实例
    Python基础入门篇【40】--python中的第三方包
    「2024」预备研究生mem-分析推理强化：多对多画表格(下)
    GBase 8s是否支持强容错能力及预警能力
    PHP框架详解 - symfony框架
    污水除磷的方式
    c# ValueTuple
  • 原文地址：https://blog.csdn.net/weixin_44417441/article/details/126274962