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

在网上经常看到有朋友在问自己能不能写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. python 进阶篇 python 的值传递

    值传递和引用传递 值传递,通常就是拷贝参数的值,然后传递给函数里的新变量,这样,原变量和新变量之间互相独立,互不影响. 引用传递,通常是指把参数的引用传给新的变量,这样,原变量和新变量就会指向同一块内 ...

  2. Java 多线程实现方式二：实现 Runnable 接口

    由于java是单继承,很多时候为了实现多线程 通过继承 Thread 类后,就不能再继承其他类了.为了方便可以通过实现 Runnable 接口来实现,和Tread 类似需要重写run 方法. 下面通过 ...

  3. Hbase的安装与基本操作

    简介: 1安装 HBase​   本节介绍HBase的安装方法,包括下载安装文件.配置环境变量.添加用户权限等. 1.1 下载安装文件   HBase是Hadoop生态系统中的一个组件,但是,Hado ...

  4. discuz修改禁止性别保密选项

    第一步找到source/function/function_profile.php 第二步  注释下面的代码 else { $html .= '<option value="0&quo ...

  5. zabbix管理，添加监控主机

    一:添加本机为监控主机  二.监控其他Linux主机agent端 1.环境部署 [root@localhost ~]# hostname agent.zabbix.com[root@localhost ...

  6. 5.Python是怎么解释的？

    Python是怎么解释的? Python language is an interpreted language. Python program runs directly from the sour ...

  7. L3.二.return

    # 函数的返回值 def get_max(a,b,c): max_num=a if b > max_num: max_num = b if c > max_num: max_num = c ...

  8. webpack4.x开发环境配置

    写这篇文章的初衷在于,虽然网络上关于webpack的教程不少,但是大多已经过时,由于webpack版本更新后许多操作变化很大,很多教程的经验已经不适合.当我们使用npm安装webpack时,若不指定w ...

  9. 如何将MAC的 Terminal 行首变得清爽简洁一点？

    作为一位开发人员,MAC带给我们更好的编程体验,Terminal也是经常会去操作的东西,但是说实话,默认的 Terminal 的各种设置,真的让我好难受 刚开始打开,可能看到的会是这样的,行首一大堆东 ...

  10. CodeForces - 1058A. In Search of an Easy Problem

    这题,全零是esay有1是hard,真难呀. #include<bits/stdc++.h> using namespace std; int main(){ int n,i,x,flag ...