vue 自己写组件。
最近在网上看到很多大神都有写博客的习惯，坚持写博客不但可以为自己的平时的学习做好记录积累 无意之中也学还能帮助到一些其他的朋友所以今天我也注册一个账号记录一下学习的点滴！当然本人能力实在有限写出的文章可能和大神们不能比拟 如果有什么不专业甚至是错误的地方还请大家指正！好了说了这么多那么下面进入正题^_^
在网上经常看到有朋友在问自己能不能写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 自己写组件。的更多相关文章
- Vue自己写组件——Demo详细步骤
公司近期发力,同时开了四五个大项目,并且都是用Vue来做的,我很荣幸的被分到了写项目公用模块的组,所以需要将公用的部分提取成组件的形式,供几个项目共同使用,下面详细讲一下写Vue组件的具体步骤. 一. ...
- vue如何写组件（script标签引入的方式）
很多人知道.vue结构的单文件组件形式,不过这种单文件组件的结构如果要加入到现有的jquery项目中就比较麻烦了,那如果我们又想用vue来写模板,又不想引入vue-cli管理,那该怎么来写组件呢?别着 ...
- vue 手写组件 集合
Num.1 : 链接 向右滑动, 显示删除按钮, 根据touchStart touchEnd 的 clientX 差距 > 30; 说明是向左滑动, 显示; 改变 e.currentTarg ...
- VUE -- 如何快速的写出一个Vue的icon组件？
伴随着Vue的诞生,它似乎就被人寄予厚望,不仅仅是因为其轻量级的MVVM设计方式,而且其实现了组件化开发模式,所以越来越多的人会拿Vue和AngularJS.React Native做比较.具体关于它 ...
- 用vue.js写的一个瀑布流的组件
用vue.js写的一个瀑布流的组件:https://segmentfault.com/a/1190000010741319 https://www.jianshu.com/p/db3cadc03402
- script标签引入vue方式开发如何写组件
title: script标签引入vue方式开发如何写组件 date: 2020-05-08 sidebarDepth: 2 tags: vue 组件 script 标签 categories: vu ...
- Vue.js多重组件嵌套
Vue.js多重组件嵌套 Vue.js中提供了非常棒的组件化思想,组件提高了代码的复用性.今天我们来实现一个形如 <app> <app-header></app-head ...
- webpack入坑之旅（五）加载vue单文件组件
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- vue.js之组件（上篇）
本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知 ...
随机推荐
- jeecg ant design vue 一些收藏
1关于 进来清除上次记录 找到src/permission.js下的
- Linux下解压rar压缩包
wget http://www.rarlab.com/rar/rarlinux-x64-4.2.0.tar.gz rar软件不需要安装,直接解压到/usr/local下,以下操作需要有root权限. ...
- （转）如何学好C语言
原文:http://coolshell.cn/articles/4102.html 作者:陈皓 有人在酷壳的留言版上询问下面的问题 keep_walker : 今天晚上我看到这篇文章. http ...
- 【ubuntu】Error: environment block too small. Press any key to continue
Error: environment block too small. Press any key to continue 如何修复这个Error呢? 输入以下命令 sudo su cd /boot/ ...
- HTML中使用CSS样式（上）
在每一个标签上都可以设置style属性,这就是CSS样式: <div style="height:48px;border: 1px solid red;text-align:cente ...
- 跟风微信小程序，生鲜水果店如何借力小程序每天多赚2万块？
公司旁边的水果店,虽然是一家实体店,但老板有一颗爱玩互联网的心. 老板非常重视线上的营销推广,什么新的线上推广方式都爱尝试一下.公众号大热时做了自己的微信公众号,并且有自己的微信商城,不过线上的销售一 ...
- 数学--数论--中国剩余定理 拓展 HDU 1788
再次进行中国余数定理 问题描述 我知道部分同学最近在看中国剩余定理,就这个定理本身,还是比较简单的: 假设m1,m2,-,mk两两互素,则下面同余方程组: x≡a1(mod m1) x≡ a2(mod ...
- docker批量删除本地镜像和容器
长时间运行docker,每次只用docker kill去停止容器,但是从没删除过本地镜像,导致有上百个镜像在占用内存. 1.批量停止容器 docker container stop $(docker ...
- win10 安装Maven
1.将apache-maven-3.0.5-bin.zip解压到指定目录(最好不要有中文字符) 2.配MAVEN_HOME 3.验证是否安装成功 代开cmd窗口 mvn -v 4.修改本地仓库位置 ...
- shell字符串索引
shell中的字符串索引一会从0开始,一会从1开始,见例子: #!/bin/bash string="hello world" length=${#string} echo &qu ...