Vue—单文件组件

最新推荐文章于 2024-07-12 09:36:48 发布

糖醋小排顾。

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量54

点赞数 2

分类专栏： Vue学习文章标签： vue.js 前端 javascript Powered by 金山文档

本文链接：https://blog.csdn.net/Guuiabc/article/details/128763086

版权

Vue学习专栏收录该内容

63 篇文章 0 订阅

订阅专栏

定义：一个文件中只包含一个文件

School.vue:

<!--组件的结构-->
<template>
    <div class="demo">
        <h2>学校名称：{{schoolName}}</h2>
        <h2>学校地址：{{address}}</h2>
        <button @click="showName">点我提示学校名</button>
       </div>
</template>
<script>
    //组件的交互相关的代码（数据、方法等）
    export default({
        //名字最好与文件名一致
        name:'School',
        //一定不要写el配置项，因为最终都要被一个vm管理
        data(){
            return{
                schoolName:'****',
                address:'杭州',
            }
        },
        methods:{
            showName(){
                alert(this.schoolName)
            }
        }
    })
    //必须暴露组件，一边都用默认暴露
    //export default school
</script>
<style>
    /* 组件的样式 */
    .demo{
        background-color: rgb(132, 132, 250);
    }
</style>

Student.vue:

<!--组件的结构-->
<template>
    <div>
        <h2>学生姓名：{{studentName}}</h2>
        <h2>学生年龄：{{age}}</h2>
    </div>
</template>
<script>
    export default({
        name:'student',
        //一定不要写el配置项，因为最终都要被一个vm管理
        data(){
            return{
                studentName:'Gui',
                age:20
            }
        }
    })
    //必须暴露组件，一边都用默认暴露
    //export default school
</script>
<style>
    /* 组件的样式 */
    .demo{
        background-color: rgb(244, 165, 238);
    }
</style>

App.vue:

<!--快捷键：<v-->
<template>
    <div>
        <School></School>
        <Student></Student>
    </div>
</template>
<script>
    //引入组件
    import School from '19_单文件组件/School'
    import Student from '19_单文件组件/Student'
    export default {
        name:'App',
        components:{
            School,
            Student
        }
    }
</script>
<style>
</style>

main.js:


import App from "./App.vue";
new Vue({
    el:'#root',
    template:`<App></App>`,
    components:{
        App,
    }
})

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>Text</title>
</head>
<body>
    <div id="root">
        <!-- <App></App> -->
    </div>
    <script src="../js/vue.js"></script>
    <script src="./main.js"></script>
</body>
</html>