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代码可以直接写在第一步中的文件之中！就这样一个自己创建的组件就这么愉快的应用啦！
转载于:https://www.cnblogs.com/blueball/p/10489903.html
vue 自己写组件。相关推荐
- animation基础练习源码_用vue简单写一个音乐播放组件「附源码」
作者:vipbic 转发链接:https://segmentfault.com/a/1190000022980992 前言 上次小编也分享一个关于Vue 开发过音乐播放对项目: 基于 electron ...
- [vue] 为什么我们写组件的时候可以写在.vue里呢？可以是别的文件名后缀吗？
[vue] 为什么我们写组件的时候可以写在.vue里呢?可以是别的文件名后缀吗? 也可以写为js,jsx,ts,tsx这种 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很 ...
- vue中写svg组件svg图片加载不出来
vue中写svg组件svg图片加载不出来 结构 首先要安装3个插件:svg-sprite-loader,svgo,svgo-loader npm install svg-sprite-loader - ...
- 写了个移动端可滑动（惯性滑动回弹）Vue导航栏组件 ly-tab
前段时间写了一个移动端的自适应滑动Vue导航栏组件,觉得有一定实用性,大家可能会用得到(当然有些大佬自己写得更好的话就没必要啦),于是前两天整理了一下,目前已经发布到npm和GitHub上了,点我到n ...
- Vue.js子组件向父组件通信
一.场景描述: 曾经有个电商项目,其中有个"老带新"模块,而且该模块新增的入口很多,但是新增后展示效果还不一样,当时就考虑将新增的组件单独拿出来,其实就是一个子组件向父组同步数据的 ...
- vue 手写一个时间选择器
最近研究了 DatePicker 的实现原理后做了一个 vue 的 DatePicker 组件,今天带大家一步一步实现 DatePicker 的 vue 组件. 原理 DatePicker 的原理是- ...
- vue与react组件的思考
前言 我最一开始是先学的react,然后也就前段时间开始学习vue,一开始给我的感受是两者很相似,react给我的感觉是灵活,vue是一种死板的感觉.为什么有这种感觉呢,react有一种很强烈的欲望, ...
- Vue HTML：在Vue上写Html遇到的一些问题，html的首行缩进，html的行间距，element UI的回到顶部不显示
Vue & HTML:在Vue上写Html遇到的一些问题,html的首行缩进,html的行间距,element UI的回到顶部不显示 资源: HTML 教程- (HTML5 标准) 怎么快速上 ...
- 手把手教你实现一个 Vue 进度条组件！
最近在个人的项目中,想对页面之间跳转的过程进行优化,想到了很多文档或 npm 等都用到的页面跳转进度条,于是便想自己去实现一个,特此记录. 来看下 npm 搜索组件时候的效果: so 下面咱们一起动手 ...
最新文章
- 怎样测试运算放大器的输入失调电压？
- 我的2017与2018
- window.open参数完全手册
- 微信小程序实战篇：商品属性联动选择（案例）
- AlarmManager使用
- 使用mkdir创建同级多目录
- 腾讯又“撒钱”了！奖励2.28万员工800万股，人均16.6万港元 网友：福利界天花板...
- 深度剖析 | 初学者应该如何学习前端？该怎么学？
- 宁愿“大小周”、每天只写 200 行代码、月薪 8k-17k 人群再涨 | 揭晓中国开发者真实现状
- PHP设计模式——迭代器模式
- SqlServer中查询某数据库所有表及其数据总条数和占用空间
- cobar php,cobar配置安装_MySQL
- 教务管理系统：成绩、课表查询接口设计及抢课、监控功能实现
- stellarium-0.19.3.1-win64.exe下载
- ^_^Hostname openapi.alipaydev.com not verified:
- Vue - 前段框架
- 基于RFID定位技术的室内定位原理--RFID室内定位--新导智能
- 十一．再函数进阶+requests网络爬虫
- BBEdit 14 mac 大版本更新，查看最新功能
- 【Python】定时获取卫星地球图像作为电脑壁纸