可复用性和组合就是将组件可复用性的使用和组合这个组件。

可复用性和组合

我们可以新建一个index.html和index.js,在index.html中引入index.js,然后在index.html中写入代码:

// 自定义组件名

new Vue({

el: '#main'

});

index.js中写入代码:

Vue.component("vue-hesder", {

template: '

Vue课程

'

});

我们会发现,打开页面并没有什么变化,也就是说我们可以将

这个组件放在任意地方,只要index.js这个组件引入了vue.min.js ,那么它就可以引入这个组件。在组件里我们可以写很多事件,比如我们再建一个js叫v.js,同样的我们把index.js中的内容复制到v.js在进行修改一下:

Vue.component("vue-v", {

template: '

侠课岛 - vue课程内容 vue组件

'

});

然后在index.html中引入v.js,然后我们在代码中添加组件标签。同时我们还可以在页面中添加任何css样式来对它进行修饰,但是我们不能直接用组件名进行样式的编写,我们需要在组件名里面用选择器然后通过选择器对它再进行添加才会生效。

// 错误示范,这样不会被认可且不会识别

vue-v{

color:red;

}

我们再定义一个e.js,同样的操作重复上述步骤,在引用时我们是按顺序引用的,因此给我们呈现的效果页面也是按顺序来的。

如果我们想要在其他页面也同样使用的话,那么我们可以重新建一个html比如v.html,然后一样的index.html代码,去掉index.js和e.js和相对应的组件和代码:

那么我们得到的页面就是它所单独对应的页面,也是可以的。

vue-v页面截图:

vue-e页面截图:

整个截图:

上面代码截图示例,说明了这几个组件我们可以将它重复到任何地方使用,并且可以任意组合,也就是说我们将这些组件进行复用性并统一组合起来。这样使得我们不用去重复写过多的项目代码,大大的压缩了我们的开发难度和提高了我们的开发时长效率。

java 中组合与复用_可复用性和组合相关推荐

  1. java中的io复用_从 Java 中的零拷贝到五种IO模型

    在之前的文章中,我们聊过了 Java 中的零拷贝,零拷贝就是指数据不会在内核空间和用户空间之间相互拷贝.这样就减少了内核态与用户态的切换,自然就很高效. 拷贝文件只是 IO 操作中一个特殊的情况,大多 ...

  2. java中封装的好处_编程中封装的作用/优点

    最近学习了Java三大特性中的封装,所以在这里总结一下自己堆封装的理解和简介,给大家做出参考. 什么是封装(Encapsulation): 封装(Encapsulation)是面向对象方法的重要原则, ...

  3. Java中内部做监视器_监视器模式 java

    广告 精选中小企业最主流配置,适用于web应用场景.小程序及简单移动App,所有机型免费分配公网IP和50G高性能云硬盘(系统盘). mutex实际上就是对象本身 } 复制代码什么是监视器模式 jav ...

  4. 谈谈对java中分层的理解_让我们谈谈网页设计中的卡片设计

    谈谈对java中分层的理解 "I want a card", this is the first demand point that the customer said in th ...

  5. java中函数是什么_[一] java8 函数式编程入门 什么是函数式编程 函数接口概念 流和收集器基本概念...

    本文是针对于java8引入函数式编程概念以及stream流相关的一些简单介绍 什么是函数式编程? java程序员第一反应可能会理解成类的成员方法一类的东西 此处并不是这个含义,更接近是数学上的函数 看 ...

  6. 6.java中什么是类_类、对象(java基础知识六)

    1.Java约定俗成 java约定俗成1,类名接口名 一个单词首字母大写,多个单词每个单词首字母都大写2,方法名和变量名 一个单词全部小写,多个单词从第二个单词首字母大写 建议:如果能用英语尽量用英语 ...

  7. java中接口私有反方_接口中的Java 9私有方法

    java中接口私有反方 Java 9 has been released and there has been a lot of changes. Today we will look into Ja ...

  8. java中审核订单流程图_看95后java妹子横扫阿里,京东,小米,滴滴,美团等大厂,一份热腾腾的面经(最终入职阿里)...

    内容目录 头条 美团 滴滴 京东 others 算法题 HR面 tips 自序 这次面试的公司有一点点多,主要是因为毕业后前两份工作找的都很草率,这次换工作就想着,emm,毕业三年了,该找个工作好好沉 ...

  9. java中井号字符串_深入Java基础(二)——字符串

    这段时间在准备找一份java实习工作,所以来把基础知识整理归纳一下 文章结构: 1.equals和== 2.字符串的基本知识以及字符串的源码解读: 3.字符串的注意点以及使用推荐: 一.equals和 ...

最新文章

  1. laravel 5.1 Eloquent常见问题
  2. 金融行业信息系统信息安全等级保护实施指引_中国人民银行发布金融行业网络安全等级保护实施指引...
  3. RabbitMQ 主题(Topic)
  4. 大华存储服务器系统,大华重磅推出64盘位网络视频存储服务器
  5. 安卓玩机教程---全机型安卓4----安卓12 框架xp edx lsp安装方法
  6. 《物联篮球计分器》Android应用程序开发-期末课程设计
  7. C语言 符号配对 (20分)
  8. 茫茫社招路,硕士毕业半年的抉择
  9. 基于新浪微博API生成短链接的15款在线工具
  10. python通过线程实现定时器timer的方法
  11. 语音识别之wave文件(*.wav)格式、PCM数据格式介绍
  12. 用PS来制作背景透明的图片
  13. 论文笔记 SiamMask : Fast Online Object Tracking and Segmentation: A Unifying Approach
  14. 在IE8中使用建行企业网银的解决方法
  15. 给生命一段独处的时光
  16. Linux系统下C语言实现遍历该目录下所有文件
  17. 2021.1.17-Robocup 2D学习日志
  18. 华为智能家居app未能连接上远程云服务_智能家居平台介绍:华为HiLink
  19. Java 学习笔记 —— 基础部分
  20. GaussDB_T 单机版轻量安装

热门文章

  1. VC6中根据需要显示滚动条
  2. 基于simulink的SVC与SVG的性能比较
  3. matlab 字符串替换
  4. C++11判断inf, nan
  5. html文档中的元数据,javascript – 如何使用pdf.js从pdf文档中获取元数据
  6. 大话算法-排序-归并排序
  7. CSS中可以or不可以继承的属性
  8. 云存储领域的那些安全难题与解决途径
  9. rsync同步操作 inotify实时同步 cobbler装机平台 DNS主从结构
  10. nfs参数介绍与写法示例及报错( Operation not permitted)