最近在网上看到很多大神都有写博客的习惯，坚持写博客不但可以为自己的平时的学习做好记录积累 无意之中也学还能帮助到一些其他的朋友所以今天我也注册一个账号记录一下学习的点滴！当然本人能力实在有限写出的文章可能和大神们不能比拟 如果有什么不专业甚至是错误的地方还请大家指正！好了说了这么多那么下面进入正题^_^

在网上经常看到有朋友在问自己能不能写vue组件 如果可以怎么应用到自己的项目之中呢！我觉得吧这个事儿就和用煮大米饭是一个道理的

1. 首先作大米饭我们得有米吧 要不 巧妇难为无米之炊啊  因此先买好我们自己的大米也就是创建组件文件，这里我假设要创建一个自己loading效果组件 那么我们就先创建 loading.vue 里面的代码根据vue template相关规则写就可以 这里就不在赘述了 我只写一个最最简单的例子

2.ok了 米就这么愉快的买好了 那么有了米我们现在只需要把他放在锅里！那么这个锅是谁呢！好吧我们自己来背这个锅，我们创建一个相关的.js文件 通常组件都是一个功能自己一个文件夹那么每个组件都应该有自己独立的调用文件（一盆大米一个锅）那么为了统一我们可以都叫做index.js当然了这个名字你可以随便起 只有以后你在后续调用时候更换相关名字即可！重点来了 这个锅是怎么造的呢！话不多说直接上图

那么上面三个这么违和的框是干什么的么：红色框框：我靠这还用问吗  你调用那个文件你得告诉人间啊 这里当然要调用刚才我们自己创建的loading.vue文件。  黄色框框：我靠这个黄色的框框可以说是本次本文章中重点中的重点 为什么这么说呢 我们要使用自己的组件就要导出这个组件 而这个黄色框框中的代码就是导出自己组件的相应配置  其中那个非常猥琐的浪线则是本例子的”命根子“ 这个命名就是你在其他文件中调用这个组件（这里是loading组件）的名字 在这个例子中我们在调用组件时候就可以写成<Loading></Loading>。白色框框：这个没什么好说的 相当于导出这个组件 在main中好接受！

3.原材料大米也有了 饭锅也有了 现在是万事俱备只欠东风 那我们第三部就是一个字”煮“ 两字：”开火“ 这里就是我们要把我们这个自己创建的组件应用到我们的页面之中 详情请看下图

黄色框框部分就是在主文件main.js中 引入刚才定义的组件 和 应用 这个组件了！

最后的最后你可以在任何想用这个组件的地方插入<Loading></Loading>了 组件相应的样式和js代码可以直接写在第一步中的文件之中！就这样一个自己创建的组件就这么愉快的应用啦！

vue 自己写组件。的更多相关文章

  1. Vue自己写组件——Demo详细步骤

    公司近期发力,同时开了四五个大项目,并且都是用Vue来做的,我很荣幸的被分到了写项目公用模块的组,所以需要将公用的部分提取成组件的形式,供几个项目共同使用,下面详细讲一下写Vue组件的具体步骤. 一. ...

  2. vue如何写组件（script标签引入的方式）

    很多人知道.vue结构的单文件组件形式,不过这种单文件组件的结构如果要加入到现有的jquery项目中就比较麻烦了,那如果我们又想用vue来写模板,又不想引入vue-cli管理,那该怎么来写组件呢?别着 ...

  3. vue 手写组件 集合

    Num.1 :  链接 向右滑动, 显示删除按钮,  根据touchStart touchEnd 的 clientX 差距 > 30; 说明是向左滑动, 显示; 改变 e.currentTarg ...

  4. VUE -- 如何快速的写出一个Vue的icon组件？

    伴随着Vue的诞生,它似乎就被人寄予厚望,不仅仅是因为其轻量级的MVVM设计方式,而且其实现了组件化开发模式,所以越来越多的人会拿Vue和AngularJS.React Native做比较.具体关于它 ...

  5. 用vue.js写的一个瀑布流的组件

    用vue.js写的一个瀑布流的组件:https://segmentfault.com/a/1190000010741319 https://www.jianshu.com/p/db3cadc03402

  6. script标签引入vue方式开发如何写组件

    title: script标签引入vue方式开发如何写组件 date: 2020-05-08 sidebarDepth: 2 tags: vue 组件 script 标签 categories: vu ...

  7. Vue.js多重组件嵌套

    Vue.js多重组件嵌套 Vue.js中提供了非常棒的组件化思想,组件提高了代码的复用性.今天我们来实现一个形如 <app> <app-header></app-head ...

  8. webpack入坑之旅（五）加载vue单文件组件

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  9. vue.js之组件（上篇）

    本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知 ...

随机推荐

  1. pytorch seq2seq模型训练测试

    num_sequence.py """ 数字序列化方法 """ class NumSequence: """ ...

  2. Oracle把表记录恢复到指定时间节点

    可以执行以下命令alter table 表名 enable row movement; --开启表行移动flashback table 表名 to timestamp to_timestamp('20 ...

  3. java 之 构造器 static关键字

    构造器  特点: 方法名和类名一至,没有void没有返回,无参数的称为无参构造器,有参数的称为有参构造器 语法: public 类名 {数据类型 参数名} 目的:创建对象 注意:如果类中没有带有参数的 ...

  4. 微软宣布一批新获得Microsoft Teams认证的会议硬件

    COVID-19 疾病流行期间,微软见到了 Microsoft Teams 视频会议解决方案取得的巨大增长.然而在许多情况下,生产力与音视频硬件的质量息息相关.好消息是,该公司刚刚完成了一批第三方硬件 ...

  5. 虚拟化VMware之虚拟机备份(1)

    之虚拟机备份() 模版:是一种开放,公用.安全的虚拟机压缩格式,通常使用的是扩展名为.ova可以在多个主流虚拟化平台下进行操作 是和 通过技术协作推出的基于磁盘的备份和恢复的新一代解决方案,可靠且易部 ...

  6. javascript 控制台调试方法

    console在我们调试js程序的时候是一个非常有效的工具. 日志输出是我们最常用的功能: console.log(); console.info(); console.warn(); console ...

  7. Cisco 交换机启用netflow

    Router2951#configure terminal //Creating Flow Record router2951(config)# flow record NTArecord route ...

  8. CF--思维练习--CodeForces - 216C - Hiring Staff （思维+模拟）

    ACM思维题训练集合 A new Berland businessman Vitaly is going to open a household appliances' store. All he's ...

  9. 上传组件Fine Uploader在ASP.NET中的应用

    现如今,世面上流行着许多前端上传组件,例如:Uploadify(http://www.uploadify.com/),Fine Uploader,等等.这篇博客从头开始,介绍如何在ASP.NET MV ...

  10. CF1335F Robots on a Grid

    比较简单的倍增 但还是看了题解才会 题意 给出一个 \(n\times m\) 的网格,每个格子有颜色,\(0\) 黑 \(1\) 白,每个格子还有一个方向,表示这个格子上的机器人会向那个方向走,并保 ...