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. java ——String , StringBuffer, StringBuilder类

    一.String类概述 1.String对象一旦创建就不能改变. 2.字符串常量池. 字符串常量池的特点:池中有则直接使用,池中没有则创建新的字符串常量. 例1: “==”  比较两个对象是否引用同一 ...

  2. 94. Binary Tree Inorder Traversal(inorder ) ***(to be continue)easy

    Given a binary tree, return the inorder traversal of its nodes' values. Example: Input: [1,null,2,3] ...

  3. CPU体系结构

    http://blog.csdn.net/liuxc0116/article/details/17004313 1.算术逻辑单元ALU(Arithmetic Logic Unit)ALU是运算器的核心 ...

  4. python 面向对象(四)--实例属性和类属性

    由于Python是动态语言,根据类创建的实例可以任意绑定属性. 给实例绑定属性的方法是通过实例变量,或者通过self变量: class Student(object): def __init__(se ...

  5. 2018.7.15 解决css中input输入框点击时去掉外边框方法

    .input_css{ background:no-repeat 0 0 scroll #EEEEEE; border:none; outline:medium; }

  6. 几位it 前辈的博客

    赵劼 http://blog.zhaojie.me/?page=2 陈硕 http://www.cnblogs.com/Solstice/ 轮子哥 http://www.cnblogs.com/gen ...

  7. Oracle 的jdbc方法

    package com.swift.jdbc_oracle; import java.sql.CallableStatement; import java.sql.Connection; import ...

  8. Mac中Mysql开启远程访问(不同于linux直接改配置文件)

    在mac中安装Mysql Workbench 用root用户连上安装的Mysql.  开启远程访问的服务 如下图可以看到是root用户绑定的是localhost  如果不做修改的话,直接访问是访问不了 ...

  9. TCP_Wrappers & PAM & Nsswitch服务

    cpwrapper:工作在第四层(传输层),能够对有状态连接的服务进行安全检测并实现访问控制的工具.部分功能上跟iptables重叠. 对于进出本主机访问某特定服务的连接基于规则进行检查的一个访问控制 ...

  10. 判断移动端和pc端最简单的方法

    <!DOCTYPE html><html><head> <title></title> <script type="text ...