Vue无疑是近来最火的一个前端框架,它吸取了angular1.x和react的精华,性能优良,而且易于上手,本文主要是关于如何去写一个组件。

首先是项目目录

编写组件

在这里我写了一个日期控件(移动端的),在components目录下建立文件夹,并建立vue文件和index.js文件注册组件。

.vue文件中的内容我就不多说了,去看我的项目即可。

组件注册

import datepicker from './datepicker.vue'
//这里第一个参数可以设置别的名字,作为页面标签使用
datepicker.install = (Vue) => Vue.component('datepicker',datepicker)
export default datepicker

组件使用

import datepicker from './components/datepicker'
import Vue from 'vue'
Vue.use(datepicker);
//html中
<datepicker @cancle="cancle" @sure="sure" :selecteddate="olddate"></datepicker>

最后附上代码地址https://github.com/Stevenzwzhai/vue-datepicker

演示地址 https://stevenzwzhai.github.io/vue-datepicker/。打开mobile调试模式,因为使用了touch事件,所以pc无效。

Vue组件编写的更多相关文章

  1. vue组件编写知识点

  2. vue组件的3种书写形式

    第一种使用script标签 <!DOCTYPE html> <html> <body> <div id="app"> <my- ...

  3. Laravel 项目中编写第一个 Vue 组件

    和 CSS 框架一样,Laravel 不强制你使用什么 JavaScript 客户端框架,但是开箱对 Vue.js 提供了良好的支持,如果你更熟悉 React 的话,也可以将默认的脚手架代码替换成 R ...

  4. 自己编写并发布一个Vue组件

    自己编写并发布一个Vue组件 1. 几种开源协议的介绍 https://blog.csdn.net/techbirds_bao/article/details/8785413 2.开始编写组件 新建p ...

  5. canvas实现倒计时效果示例(vue组件内编写)

    前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给 ...

  6. vue组件

    分享出来让思路更成熟. 首先组件是 Vue.js 最强大的功能之一. 可以减少很多的工作量,提高工作效率. 编写一个可复用性的组件,虽然官网上也有.... 编写可复用性的vue组件 具备一下的几个要求 ...

  7. vue组件最佳实践

    看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...

  8. vue插件编写与实战

    关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 热爱vue开发的同学肯定知道awesome-vue 这个github地址,里面包含了数以千计的vue ...

  9. Vue组件库的那些事儿,你都知道吗?

    前段时间一直在研究Vue组件库,终于在组内派上了用场.来给大家贡献一篇关于Vue组件库的相关知识.经验不多,如果有不合理的地方还请多多指出哦--- 回想一下,在你们公司或者你们小组是否有一个以上的项目 ...

随机推荐

  1. Linux Mint,Ubuntu 18 ,Deepin15.7 安装mysql 没有提示输入密码,修改root用户密码过程

    刚刚装Deepin15.7 和 MySQL5.7 发现没有提示用户输入密码的过程(近日发现Linux Mint 和 Ubuntu18 也适用) 百度了一大堆如何修改root密码 也没什么卵用,终于这篇 ...

  2. 模仿ArcGIS用Graphics重绘的直方图分级调节器

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  3. C# windows 计划任务 程序编写

    编写windows 计划任务只需要在普通的类里面使用main方法就好了,因为任务计划在创建后走的是程序的主方法,代码如下: using System; using System.Collections ...

  4. python 下实现window 截图

    首先安装PIL库,因为PIL官网没有支持python3.6的PIL库我想在3.X中实现,因此使用pip安装pillow pip install pillow 安装 安装完成后,from PIL imp ...

  5. java导入、导出

    一.介绍 当前B/S模式已成为应用开发的主流,而在企业办公系统中,常常有客户这样子要求:你要把我们的报表直接用Excel打开(电信系统.银行系统).或者是:我们已经习惯用Excel打印.这样在我们实际 ...

  6. 关于css 中position使用的浅谈

    在css中有一种属性position.在W3C上我们可以找到他又一下几种属性:absolute.fixed.relative.static.inherit.但是position的使用却并不是简简单单的 ...

  7. 一、初始Object-C

    一.OC概述 特点: 1没有包得概念 2关键字以@开头 3.拓展名 .m 二.第一个OC类 1,分为2个文件..m和.h文件 2. .m文件用来实现类  .h用来定义声明类 .h文件中得写法 //@i ...

  8. 前端JavaScript之DOM使用案例

    1.弹出框点击关闭 (这个例子关键自己创建标签以及属性,不是太好想啊,而且作用相对来数也不是太大) <!DOCTYPE html> <html> <head> &l ...

  9. Android Studio项目中三种依赖的添加方式

    通常一个AS项目中的依赖关系有三种,一是本地依赖(主要是对本地的jar包),二是模块依赖,三是远程依赖:添加这些依赖的目的在于上我们想要在项目的某一个模块中使用其中的功能,比如okttp这个网络框架库 ...

  10. 【读书笔记】你不知道的JavaScript(上卷)--作用域是什么

    第一章 作用域 1.理解作用域 几个名词的介绍 引擎:从头到尾负责整个JavaScript程序的编译及执行过程 编译器:负责语法分析及代码生成器等脏活累活 作用域:负责收集并维护由所有声明的标识符(变 ...