Vue组件化编程

最新推荐文章于 2023-07-11 17:41:55 发布
最新推荐文章于 2023-07-11 17:41:55 发布
阅读量815 收藏 2
点赞数
分类专栏： Vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lx00000025/article/details/131177490
版权

目录

一、简介

Vue.js 组件具有以下优点：

  • 代码复用：您可以在不同的页面和组件中使用相同的代码块，避免重复编写相似的代码。
  • 开发效率：组件化能够提高开发效率，让您更快地创建、测试和维护应用程序。
  • 可维护性：Vue.js 的组件化架构使得应用程序易于维护和更新。每个组件都是独立的单元，当需要修改某个组件时，只需要对该组件进行修改而不影响其他组件。
    在这里插入图片描述

总之，Vue.js 组件化编程是一种强大的工具，可以帮助您创建可重用、易于维护的应用程序。使用组件化编程，您可以更快地开发应用程序，提高代码质量，并为将来的扩展留下余地。

二、非单文件组件

2.1 基本使用

Vue中使用组件的三大步骤:

  1. 定义组件(创建组件)
  2. 注册组件
  3. 使用组件( 写组件标签)

如何定义一个组件?

  • 使用Vue.extend(options)创建，其中options和new Vue(options)时传 入的那个options几乎一样，但也有点区别;
    区别如下:
    1. el不要写，为什么? ————最终 所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
    2. data必须写成函数，为什么?
      • 避免组件被复用时，数据存在引用关系。
        备注:使用template可以配置组件结构。

如何注册组件?

  1. 局部注册:靠new Vue的时候传入components选项
  2. 全局注册:靠Vue.component( ‘组件名’ ,组件)
    最后编写组件标签:
    如： <school></school> 
<!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>Document</title>
</head>
<body>
    <div id="root">
        <hello></hello>
        <hr>
        <!-- 第三步：编写组件标签 -->
        <school></school>
        <hr>
        <!-- 第三步：编写组件标签 -->
        <student></student>
        <hr>
    </div>
    <div id="root2">
        <hello></hello>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    //第一步:创建school组件,组件定义时一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
    const school = Vue.extend({
        template:`
            <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
            </div>
        `,
        data(){
            return {
            schoolName:"b站大学",
            address:"四川"
            }
        }
    })
    //第一步:创建student组件
    const student = Vue.extend({
        template:`
            <div>
                <h2>学生名称：{{studentName}}</h2>
                <h2>学生年龄：{{age}}</h2>
            </div>
        `,
        data(){
            return {
                studentName:"蓝朽",
                age:18
            }
        }
    })
    //第一步：创建hello组件
    const hello = Vue.extend({
        template:`
            <div>
                <h1>{{msg}}</h1>
            </div>      
        `,
        data(){
            return {
                msg:"hello components"
            }
        }
    })
    //第二部：注册全局组件
    Vue.component('hello',hello);
    //创建vm
    new Vue({
        el:"#root",
        //第二步：注册组件(局部注册)
        components:{
            school,
            student
        }
    })
    new Vue({
        el:"#root2"
    })
</script>
</html>

在这里插入图片描述

2.2 注意事项

1.关于组件名:

  • 一个单词组成:
    • 第一种写法( 首字母小写): school
    • 第二种写法(首字母大写): School
  • 多个单词组成:
    • 第一种写法(kebab-case命名): my-school
    • 第二种写法(Came1Case命名): MySchool (需要Vue脚手架支持)
      备注:
      (1).组件名尽可能回避HTML中已有的元素名称，例如: h2、 H2都不行。
      (2).可以使用name配置项指定组件在开发者工具中呈现的名字。

2.关于组件标签;

  • 第一 种写法: <school></school>
  • 第二种写法: <school/>
    备注:不用使用脚手架时，<school/> 会导致后续组件不能渲染。

3.一个简写方式:
const school = Vue.extend(options)可简写为: const school = options

<!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>Document</title>
</head>
<body>
    <div id="root">
        <school></school>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
	//可以省略Vue.extend(),直接写配置项{}
    const school = {
        template:`
            <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
            </div>
        `,
        data(){
            return {
            schoolName:"b站大学",
            address:"四川"
            }
        }
    }
    //创建vm
    new Vue({
        el:"#root",
        //第二步：注册组件(局部注册)
        components:{
            school
        }
    })
</script>
</html>

2.3 组件的嵌套

<!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>Document</title>
</head>
<body>
    
    <div id="root">
       
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    //定义student组件
    const student = Vue.extend({
        template:`
            <div>
                <h2>学生姓名：{{name}}</h2>
                <h2>学生年龄：{{age}}</h2>
            </div>
        `,
        data(){
            return {
            name:"lanxiu",
            age:18
            }
        }
    })
    //定义school组件
    const school = Vue.extend({
        template:`
            <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
                <student></student>
            </div>
        `,
        data(){
            return {
            schoolName:"b站大学",
            address:"四川"
            }
        },
        components:{
            student
        }
    })
    //定义hello组件
    const hello = Vue.extend({
        template:`
            <div>
                <h1>{{msg}}</h1>
            </div>      
        `,
        data(){
            return {
                msg:"hello components"
            }
        }
    })
    //定义app组件，用来管理其他组件
    const app = Vue.extend({
        template:`
        <div>
            <school></school>
            <hello></hello>
        </div>        
        `,
        components:{
            school,
            hello
        }
    })
    //创建vm
    new Vue({
        template:`<app></app>`,
        el:"#root",
        //第二步：注册组件(局部注册)
        components:{
            app
        }
    })
</script>
</html>

上面的代码中school组件中注册了student组件，app组件注册了hello和school组件，app组件用来管理所有组件，最后再把app组件注册到vm中

2.4 VueComponent

关于VueComponent:

  1. school组件本质是一个名为VueComponent的构造函数， 且不是程序员定义的，是Vue.extend生成的。
  2. 我们只需要写或, Vue解析时会帮我们创建school组件的实例对象，
    即Vue帮我们执行的: new VueComponent(options)。
  3. 特别注意:每次调用Vue.extend,返回的都是一个全新的VueComponent! !! !
  4. 关于this指向:
    • 组件配置中:
      data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是[VueComponent实例对象]
    • new Vue()配置中:
      data函数、methods 中的函数、watch中的函数、computed中的函数它们的this均是[Vue实例对象]。
  5. VueComponent的实例对象，以后简称vc (也可称之为:组件实例对象)。
    Vue的实例对象，以后简称vm。
<!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>Document</title>
</head>
<body>
    <div id="root">
       <school></school>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    //定义school组件
    const school = Vue.extend({
        template:`
            <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
            </div>
        `,
        data(){
            return {
            schoolName:"b站大学",
            address:"四川"
            }
        },
        mounted() {
            console.log(this)//组件里的this都是VueComponent对象
        },
    })
    
    //创建vm
    const vm = new Vue({
        el:"#root",
        //第二步：注册组件(局部注册)
        components:{
            school
        }
    })
</script>
</html>

在这里插入图片描述

2.5 内置关系

  1. 一个重要的内置关系: VueComponent.prototype.proto__ === Vue.prototype
  2. 为什么要有这个关系:让组件实例对象(vc)可以访问到Vue原型上的属性、方法。
<!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>Document</title>
</head>
<body>
    <div id="root">
        <school></school>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    //定义school组件
    const school = Vue.extend({
        template:`
            <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
            </div>
        `,
        data(){
            return {
            schoolName:"b站大学",
            address:"四川"
            }
        }
    })
    
    //创建vm
    const vm = new Vue({
        el:"#root",
        //第二步：注册组件(局部注册)
        components:{
            school
        }
    })
    console.log(school.prototype.proto__ === vm.prototype)
    //定义一个构造函数
    /*function Demo() {
        this.a=1;
        this.b=2;
    }
    //创建一个Demo的实例对象
    const d = new Demo();
    console.log(Demo.prototype);//显示原型属性
    console.log(d.__proto__);//隐式原型属性
    console.log(Demo.prototype===d.__proto__)
    //程序员通过显示原型属性操作原型对象，追加一个x属性，值为99
    Demo.prototype.x = 99;
    console.log(d);*/
</script>
</html>

在这里插入图片描述

三、单文件组件

单文件组件就是一个文件中只能有一个vue组件，单文件组件需要在vue脚手架中才能运行，每一个组件就是一个.vue文件
例如：

<template>
    <!-- 组件的结构 -->
    <div class="demo">
        <h2>学校名称：{{schoolName}}</h2>
        <h2>学校地址：{{address}}</h2>
    </div>
</template>
<script>
    // 组件交换的相关代码（数据，方法等待）
    export default{
        name:"School",//组件名
        data(){
            return {
            schoolName:"b站大学",
            address:"四川"
            }
        }
    }
    // export default school 对外暴露组件
</script>

<style>
	 /* 组件的样式 */
	.demo{
	    background-color: blue;
	}
</style>

一个组件的基本结构包括<template></template>,<script></script>,<style></style>

蓝朽
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
【BOOST C++】组件编程（2）-- 组件的设计原理
gongdiwudu的专栏
03-08 2604
为了研究ROS2的组件编程，首先要理解如何何为组件。组件本是微软的发明物体，但是在ubuntu上需要自己从底层实现，就说ROS2不用你写，但是就能看明白也是需要一点理论功底的。本篇按照COM内幕的理论为线索，一点一点实现它们的示例，以达到理解的目的。
vue组件化编程-todoList案例.zip
07-14
vue组件化编程-todoList案例.zip
面向组件编程
qq_42760314的博客
07-25 887
组件被称为“状态机”，通过更新组件的state来更新对应的页面显示（重新渲染组件）组件的render方法中的this为组件实例对象组件自定义的方法中this为undefined强制绑定this通过函数对象的bind()箭头函数状态数据，不能直接修改或更新，需要使用setState()进行修改和更新。.........
vue组件化编程（模块与组件，模块化与组件化，非单文件和单文件组件）
最新发布
weixin_41549971的博客
07-11 528
组件，模块，组件化，模块化，单文件组件，非单文件组件
vue组件化编程
qq_47157937的博客
02-17 167
vue组件化编程 传统的编程方式： 学了vue之后，我们需要了解组件是什么 组件的定义：实现应用中局部功能代码和资源的集合 为什么我们需要组件，因为一个界面功能很复杂，我们可以利用组件复用编码，简化项目编码，提高运行效率 什么是模块化： 将庞大的js模块化的拆分成多个js文件 什么是组件化： 应用里面按照功能点拆分的组件 vue中如何定义（创建一个组件） 非单文件组件： ...
Vue组件化编程的基础知识要点
dawn0718的专栏
01-12 492
　　记录学习Vue组件编程技术的知识要点，最重要的是组件之间的消息传递。
vue - Vue组件化编程.doc
07-08
vue - Vue组件化编程.doc
PyWeaver:使用Python和Vue进行可视化编程
04-30
PyWeaver PyWeaver是用于Python 3的可视化代码编辑器，它利用了Web技术。 它的灵感来自Jupyter Notebook和Simulink。 该项目正在开发中。安装pip install pyweaver注意：根据您的环境，您可能还需要降级下面列出的...
在Vue组件中使用 TypeScript的方法
11-30
注意：此文并不是把vue改为全部替换为ts，而是可以在原来的项目中植入ts文件，目前只是实践阶段，向ts转化过程中的过渡。 ts有什么用？ 类型检查、直接编译到原生js、引入新的语法糖 为什么用ts？ TypeScript的设计...
VUE 组件转换为微信小程序组件的方法
12-13
本文通过对 VUE 组件的 JavaScript 、CSS模块进行转换，比如 JavaScript模块，包括外层对象，生命周期钩子函数，赋值语句，组件的内部数据，组件的对外属性等等来实现把一个 VUE 组件转换为 一个小程序组件。...
优秀的组件化编程.pdf
10-15
组件是指可用于重用、发布的部属的二进制代码单元，其中包含了不同软件交互的规范，只要遵守规范，开发出的组件就可以相互兼容......
组件编程技术.doc
10-03
组件（component）技术是各种软件重用方法中最重要的一种方法，也是分布式计算和Web服务的基础。网络应用中的软件组件，又被称为中间件（middleware）。 组件技术的应用现在已经十分广泛，从Windows编程中使用的各种控件和公用对话框，到ActiveX控件和DirectX的应用；从微软公司的COM，到Sun公司的JavaBean。其中最流行的组件技术的应用是——客户端的VBX（微软/VB）和服务器端的EJB（Sun/Java）。 在网络及其应用都很发达的今天，对组件服务的需求十分强烈，因此组件技术近年来得到了飞速的发展和广泛的应用。
c# 组件化编程技术
06-02
组件化编程技术C#源于C 和C++ .1970 年Brian 和Dennis Ritchie 首创了C 语言由于其简单灵活的特点很快成为世界上最流行的语言之一 然而C 语言是一个面向过程的程序设计语言随着软件开发技术的进步产生了面向对象的程序设计思想. 二十世纪八十年代初美国AT&T 贝尔实验室设计并实现了C++语言增加了对面向对象的程序设计的支持
VUE学习笔记（2）--组件化编程
weixin_45028519的博客
03-12 330
目录 2.组件化编程 2.1 模块与组件、模块化与组件化 2.3 render函数 2.4 ref属性 2.5 props属性 2.6 mixin(混合） 2.7 插件 2.8 scoped 2.9总结todolist 2.10自定义事件 2.11全局事件总线 2.12消息订阅与发布 2.13nextTick 2.14Vue封装的过度与动画 2.15Vue脚手架配置代理 2.16插槽 2.组件化编程 2.1 模块与组件、模块化与组件化 2.1...
Vue（三）——组件化编程
路过Coder
11-08 814
1. 理解: 向外提供特定功能的 js 程序, 一般就是一个 js 文件2. 为什么: js 文件很多很复杂3. 作用: 复用 js, 简化 js 的编写, 提高 js 运行效率。
Vue 组件化编程
程序三两行
07-20 288
vue组件化编程
Vue的组件化编程
热门推荐
暗武逢天的博客
07-11 2万+
Vue组件化
聊一聊组件化可编排编程
xxcnb的博客
10-02 779
LiteFlow为解耦逻辑而生，为编排而生，在使用LiteFlow之后，你会发现打造一个低耦合，灵活的系统会变得易如反掌！
组件化编程之组件基础
weixin_46376652的博客
07-10 315
1、实现应用中局部功能的代码和资源的集合；2、每一个功能模块都是组件，每一个组件包括html、css、js三个文件；1、组件没有el属性，初始定义的时候没有确定专门为哪个容器服务，可以随时被其他组件或vm调用，“组件就是一块砖，哪里需要哪里搬”也就是说一个html中包含有多个组件；在script标签中编写，可以包含template属性用于添加显示在页面的html结构，例：template:` ... `，例：const school = Vue.extend({ ... })data要写成函数式；原理：因为
Vue的组件化编程的实例
04-25
好的，下面是一个Vue组件化编程的实例： ``` <h1>{{ title }} <p>{{ message }} export default { name: "example-component", props: { title: String, message: String, }, }; ``` 在这个例子中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蓝朽

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值