Vue-单文件组件

最新推荐文章于 2024-11-04 14:30:42 发布

@栗栗子

最新推荐文章于 2024-11-04 14:30:42 发布

阅读量695

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_62022086/article/details/124360764

版权

Vue 专栏收录该内容

3 篇文章

订阅专栏

单文件组件

main.js(入口文件)

import  App from './App.vue'

new Vue({
    template: `<app></app>`,
    el: '#root',
    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>练习一下单文件组件的语法</title>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="root"></div>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="./main.js"></script>
</body>
</html>

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>

<style>

</style>

School.vue

<template>
    <!-- 组件的结构 -->
    <div class="demo">
        <h2>学校名称：{{schoolName}}</h2>
        <h2>学校地址：{{address}}</h2>
        <button @click="showName">点我提示学校名</button>
    </div>
</template>

<script>
    //组件交互相关的代码（数据、方法等等） 
    // 默认暴露（还有分别暴露和统一暴露，共三种暴露方式）
    export default {
        name: 'School',  //使用name配置项指定组件在开发者工具中呈现的名字
        data(){
            return {
                schoolName: '尚硅谷',
                address: '北京'
            }
        },
        methods: {
            showName(){
                alert(this.schoolName)
            }
        },
    }
</script>

<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>