了解

将 自定义后缀文件(E.g .vue) 转为可以被认识的 .js等文件，需要借助2个工具:

  1. webpack
  2. 脚手架

一般常写文件名的形式:

  1. 一个单词组成的文件名， 两种形式。
  • school.vue
  • School.vue(常用)
  1. 多个单词组成的文件名
  • my-school.vue
  • MySchool.vue(常用)

如需使用 vscode 打开 .vue文件时，有高亮效果，作者建议的插件为Vuetur(Pine Wu版本)：

060_单文件组件 - 图1

源码

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>练习一下单文件组件的语法</title>
    </head>
    <body>
        <!-- 准备一个容器 -->
        <div id="root"></div>

        <!-- 一般等容器结构出现以后，再引入 main.js ，又因为在 main.js 使用了 vue.js，所以需要先让 vue.js 先就位。-->
        <script type="text/javascript" src="../js/vue.js"></script>
        <!-- 一般我们把 main.js 叫做 入口文件 -->
        <script type="text/javascript" src="./main.js"></script>
    </body>
</html>

main.js

//逻辑:
//    main.js -> App.vue -> Schaoo.vue/Student.vue

//所有的组件都要听 vm 管理。 
//脚手架开发时，只要是 .vue文件里，绝对不可以写 new Vue() 这样的代码。
//我们一般需要创建一个 main.js(有的脚手架叫 index.js/app.js)

//引入App.vue， 引入的时候，文件名后缀可写可不写。
//调试发现:
//    Uncaught SyntaxError: Cannot use import statement outside a module (at main.js:9:1)
//    原因: 浏览器不认识 import语句。 把这些内容放到脚手架就可以变正常了。
import App from './App.vue'

//创建 Vue实例 vm
new Vue({
    el:'#root',

    //index.html 容器
    //使用 App.vue组件
    template:`<App></App>`,

    components:{
        App    //此处只注册这个大的组件 App.vue 即可。 App.vue属于汇总，属于所有 .vue 领头大哥。
    },
})

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>

School.vue

<!-- 组件的3个要素 -->

<!-- 1. 结构
    template 最终不参与结构编译
-->
<template>
    <div class="demo">
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
        <button @click="showName">点我提示学校名</button>    
    </div>
</template>

<!-- 2. 交互(数据、方法等) -->
<script>
    /*
    错误写法1:
    //错误原因: 最终写的是组件，别人需要通过 import 引入(需要 暴露对应组件的内容)
    const school = Vue.extend({
        data(){
            return {
                name:'尚硅谷',
                address:'北京'
            }
        },
        methods: {
            showName(){
                console.log(this.name)
            }
        },
    })
    //暴露的三种写法:
    //1. 分别暴露 直接在前面加 export
    export const school = Vue.extend({
        data(){
            return {
                name:'尚硅谷',
                address:'北京'
            }
        },
        methods: {
            showName(){
                console.log(this.name)
            }
        },
    })
    //2. 统一暴露 直接在后面加 export {需要暴露的组件名}
    const school = Vue.extend({
        data(){
            return {
                name:'尚硅谷',
                address:'北京'
            }
        },
        methods: {
            showName(){
                console.log(this.name)
            }
        },
    })
    export {school}
    //3. 默认暴露 直接在后面加 export default 需要暴露的组件名   //一般暴露一个的时候，使用 默认暴露 ★★★
    //     该方式在 引入 时，比较简单。 E.g import 组件名 from 文件名
    //     如果你使用了上面第1/2种暴露方式，那么在引入的时候，需要写为: import {组件名} from 文件名
0    const school = Vue.extend({
        data(){
            return {
                name:'尚硅谷',
                address:'北京'
            }
        },
        methods: {
            showName(){
                console.log(this.name)
            }
        },
    })
    export default school
    //上面的默认暴露，还可以直接写为:
0    export default Vue.extend({
        data(){
            return {
                name:'尚硅谷',
                address:'北京'
            }
        },
        methods: {
            showName(){
                console.log(this.name)
            }
        },
    })
    */
    //因为 Vue.extend() 还可以省略不写，所以上面的 默认暴露， 还可以写为下面的内容：
    export default {
        name:'School',    //给组件写个名字,最好和外面的文件名保持一致。如果不写，可能别人在注册的时候，随便起名了。
        data(){
            return {
                name:'尚硅谷',
                address:'北京昌平'
            }
        },
        methods: {
            showName(){
                alert(this.name)
            }
        },
    }
</script>

<!-- 3. 样式 -->
<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:18
            }
        }
    }
</script>