Vue 组件化编程

最新推荐文章于 2024-11-10 22:52:40 发布

挚夕

最新推荐文章于 2024-11-10 22:52:40 发布

阅读量45

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_52549425/article/details/131547107

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

文章介绍了模块和组件的概念，它们用于提高代码复用性和运行效率。在JavaScript中，模块是提供特定功能的JS文件，而组件是包含HTML/CSS/JS的代码集合，常用于Vue.js中。单文件组件展示了如何在Vue中结合模板、JS和样式定义组件。文章通过School和Student组件的例子，演示了如何在App.vue中导入并使用这些组件。

摘要由CSDN通过智能技术生成

模块与组件

模块

理解: 向外提供特定功能的 js 程序, 一般就是一个 js 文件
为什么: js 文件很多很复杂
作用: 复用 js, 简化 js 的编写, 提高 js 运行效率

组件

理解: 用来实现局部(特定)功能效果的代码集(html/css/js/image……)
为什么: 一个界面的功能很复杂
作用: 复用编码, 简化项目编码, 提高运行效率

模块化和组价化

模块化

当应用中的 js 都以模块来编写的, 那这个应用就是一个模块化的应用。

组件化

当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用。

单文件组件

一个.Vue文件的组成(3个部分)

模板页面
```
<template>
页面模板
</template>
```

JS模块对象

<script>
export default {
	data() {return {}}, 
    methods: {}, 
    computed: {}, 
    components: {}
}
</script>

样式
```
<style>
样式定义
</style>
```

例子

School.vue

<template>
    <div class="demo">
        <h1>学校名称: {{schoolName}}</h1>
        <h2>学校地址: {{address}}</h2>
        <button @click="showName">点我显示学校名称</button>
    </div>
</template>
<script>
    export default Vue.extend({
        name:'School',
        data() {
            return {
                schoolName: '复旦大学',
                address: '中国上海'
            };
        },
        methods: {
            showName(){
                console.log(this.schoolName)
            }
        },
    });
</script>

<style>
    .demo{
        width: 200px;
        height: 200px;
        background-color: teal;
    }
</style>

Student.vu

<template>
    <div class="demo">
        <h1>姓名: {{name}}</h1>
        <h2>年龄: {{age}}</h2>
    </div>
</template>
<script>
    export default Vue.extend({
        name:'Student',
        data() {
            return {
                name: 'dylan',
                age: '18'
            };
        }
    });
</script>

<style>
    .demo{
        width: 200px;
        height: 200px;
        background-color: blue;
    }
</style>

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>