Vue2(笔记23) - 组件 - 单文件组件-CFANZ编程社区

Vue笔记-组件部分

Vue2(笔记19) - 组件 - 对组件的理解

Vue2(笔记20) - 组件 - Vue 非单文件组件和几个注意点

Vue2(笔记21) - 组件 - 组件的嵌套

Vue2(笔记22) - 组件 - VueComponent 以及 Vue 和 VueComponent 的内置关系

Vue2(笔记23) - 组件 - 单文件组件

单文件组件

单文件组件，都是以 xxx.vue 形式的文件，浏览器是不能直接解析的；

借助脚手架来编译 xxx.vue 来生成浏览器能识别的文件；

单文件组件基本构成

<template>
  <!-- 组件的结构 -->
</template>

<script>
// 组件交互相关
</script>

<style>
/* 组件的样式 */
</style>

其中 template 不参与编译，也就是最后渲染的页面，template就没有了；

现在可以把之前写的非单文件的组件拿过来了；

这里可以安装Vue的高亮插件：vetur ，除了可以高亮 Vue 代码，还有一些代码片段；

school 单文件组件

<template>
    <div class="demo">
        <h2>学校名称：{{schoolName}}</h2>
        <h2>学校地址：{{address}}</h2>
        <button @click="showName">点我显示学校名</button>
    </div>
</template>

<script>
    const school= Vue.extend({
        data(){
            return{
                schoolName:'51cto',
                address:'北京'
            }
        },
        methods:{
            showName(){
                console.log(this.schoolName);
            }
        }
    })

    export default school
</script>

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

script 代码里面，有几点要注意：

1）暴露接口地方，可以直接写定义组件名的位置，把组件名写在配置项里面；

2）Vue.extend() 这个Vue内置的方法也可以省略；

3）需要加一个组件的名字，写在配置项里 name:'school' ；

于是，整理后的代码：

<template>
    <div class="demo">
        <h2>学校名称：{{schoolName}}</h2>
        <h2>学校地址：{{address}}</h2>
        <button @click="showName">点我显示学校名</button>
    </div>
</template>

<script>
    export default{
        name:'school',
        data(){
            return{
                schoolName:'51cto',
                address:'北京'
            }
        },
        methods:{
            showName(){
                console.log(this.schoolName);
            }
        }
    }
</script>

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

代码折叠起来看：

Vue2(笔记23) - 组件 - 单文件组件_Vue

一个单页面Vue组件就写好了；

student 单文件组件

根据 school.vue 组件的模板做法，重写一个 student.vue

<template>
    <div class="demo">
        <h2>学员名称：{{studentName}}</h2>
        <h2>学员年龄：{{age}}</h2>
    </div>
</template>

<script>
    export default{
        name:'student',
        data(){
            return{
                studentName:'Jack',
                age:18
            }
        }
    }
</script>

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

app.vue 单文件组件

汇总所有的组件，也就是把 school.vue 和 student.vue 引入进来；

<template>
    <div>
        <school/>
        <student/>
    </div>
</template>

<script>
    // 引入组件
    import school from './school.vue'
    import student from './student.vue'

    export default {
        name:'app',
        components:{
            school,
            student
        }
    }
</script>

<style>
    div{
        border: 1px solid #f30;
    }
</style>

提示：引入组件， import xxx from 'path' ；

有了这三个组件后，该到真正 main.js 的创建了；

main.js 文件

import app from './app.vue'

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

提示：在 main.js 只要引入一个组件的总管家文件 app.vue 就可以；

提示：创建Vue实例，注册组件，还不忘写个 template ，为的是让主模板文件中的 root 更简洁；

现在就差 index.html 文件了；

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>Vue练习</title>
</head>
<body>
    <!-- 准备的容器 -->
    <div id="root"></div>

    <!-- 引入Vue.js -->
    <script src="./res/vue.js"></script>
    <!-- 引入main.js  -->
    <script src="./main.js"></script>
</body>
</html>