此贴意在解决一个妹子的问题

https://q.cnblogs.com/q/101462

下载js包

http://www.layui.com/laydate/

将laydate下载的包解压放入static

index.html 引入

其中黄色部分是添加的代码部分

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <title>vue_test</title>

    <script src="src/assets/laydate/laydate.js"></script>

  </head>

  <body>

    <div id="app"></div>

    <!-- built files will be auto injected -->

  </body>

</html>

在组件中使用
例如 HelloWorld.vue

<template>

  <div class="hello">

    <input type="text" id="test" v-model="date">

    <!-- <h1>{{ msg }}</h1>

    <h2>Essential Links</h2>

    <ul>

      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>

      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>

      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>

      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>

      <br>

      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>

    </ul>

    <h2>Ecosystem</h2>

    <ul>

      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>

      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>

      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>

      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>

    </ul> -->

  </div>

</template>

<script>

export default {

  name: 'HelloWorld',

  data () {

    return {

      msg: 'Welcome to Your Vue.js App',

      date: '2017-09-08 09:00:00'

    }

  },

  mounted: function () {

      console.log(laydate)

      laydate.render({

        elem: '#test',

        type:'datetime',

        done: (value) => {

          this.date = value

        }

      })

    }

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

h1, h2 {

  font-weight: normal;

}

ul {

  list-style-type: none;

  padding: 0;

}

li {

  display: inline-block;

  margin: 0 10px;

}

a {

  color: #42b983;

}

</style>

展示效果

 

参考博客：https://segmentfault.com/q/1010000008942672?sort=created

源码下载地址：https://pan.baidu.com/s/1nv3PDjz

MD

我重新运行又报错了

vue编译器真垃圾，明明js引用在先，还不识别 laydate 对象，谁用谁被坑。

【vue学习】vue中怎么引用laydate.js日期插件的更多相关文章

  1. Angular4.0引入laydate.js日期插件方法

    Angular是不支持直接引入js文件的,下面介绍项目如果引入laydate.js的方法 一.将下载的laydate中的js和theme文件放到一个统一的文件下面,我把它放到asset下 二.在ang ...

  2. laydate JS日期插件

    原文出处 简要介绍 你是时候换一款日期控件了,而layDate非常愿意和您成为工作伙伴.她致力于成为全球最用心的web日期支撑,为国内外所有从事web应用开发的同仁提供力所能及的动力.她基于原生Jav ...

  3. js日期插件bootstrap-datetimepicker的使用

    js日期插件——bootstrap-datetimepicker的使用心得: 在大多说的web项目中,都有日期选择器的使用.如果自己写一个日期选择器的话,费时又费力,而且不一定能写出来_(:3 」∠) ...

  4. Vue、webpack中默认的config.js、index.js 配置详情

    在vue.js 框架搭建好后,其vue-cli 自动构建的目录里面相关环境变量及其基本变量配置,如下代码所示: module.exports = { build: { index: path.reso ...

  5. vue学习:vue+webpack的快速使用指南（新手向）

    一.vue有两种使用方式: 1.下载vue.js <script src="vue.js"></script> 2.使用npm npm install vu ...

  6. 解决laydate时间日期插件定位溢出

    laydate是一款比较好用的网页时间日期插件,不过用起来有一些细节问题需要我们手动去解决!例如:laydate兼容bootstrap 1. 默认情况 laydate弹出层默认对齐input左边框 2 ...

  7. Vue项目中如何引用外部js

    第一种方法:(感觉这个有问题) 1.把需要的js放到static文件夹下 2.在Index.html页面引入 3.在webpack.base.conf.js添加下面代码 externals: { 'W ...

  8. VUE学习——vue的内部指令学习（趁自己没忘，学习记录一下）

    1.v-if&v-else&v-show v-if用来判断是否加载html的DOM,v-if和v-else一般是一起用的. v-show相当于display,DOM已经加载出来了,这个 ...

  9. vue学习--vue项目端口不固定，无法指定问题

    写于20190819 前面是自己解决的思路,后面是解决方法以及需要记住的一些更改 package.json 之前只知道vue项目是基于node.js,对node.js了解不是很深入,项目的开始文件是p ...

随机推荐

  1. 服务不支持chkconfig的解决

    场景: 写了脚本,想用命令chkconfig加载自启动. chkconfig mongod on 解决方法: mongod 脚本的开头要这样加: #!/bin/bash #chkconfig:345 ...

  2. (转) 解密H264、AAC硬件解码的关键扩展数据处理

    出自:http://blog.itpub.net/30168498/viewspace-1576794/       通过上一篇文章,我们用ffmpeg分离出一个多媒体容器中的音视频数据,但是很可能这 ...

  3. (转)Live555单线程原理

    1. 概述 在live555-Server库中,使用单线程实现了多用户请求视频数据,这似乎多线程才能实现的功能,并且用户请求视频数据各个流程衔接的都十分完美,其执行效率非常高. live555是如何实 ...

  4. OpenMP并行编程应用—加速OpenCV图像拼接算法

    OpenMP是一种应用于多处理器程序设计的并行编程处理方案,它提供了对于并行编程的高层抽象.仅仅须要在程序中加入简单的指令,就能够编写高效的并行程序,而不用关心详细的并行实现细节.减少了并行编程的难度 ...

  5. TargetScan 数据库简介

    TargetScan 是一个miRNA 靶基因预测的网站, 包括了 人, 小鼠,果蝇 , 线虫, 斑马鱼 共5个物种的miRNA 靶基因结果, 人 : TargetScanHuman 小鼠 :Targ ...

  6. C# 实现写入文本文件内容功能

    private void write_txt(string str1, string str2, string str3) { System.DateTime currentTime = System ...

  7. 实现mysql按月统计的教程

    From: http://www.jbxue.com/db/758.html 实现mysql按月统计的教程   mysql有个字段是DATETIME类型,要实现可以按月统计,该怎么写sql语句? se ...

  8. POI简易帮助文档系列--读取Excel文件

    上篇博客通过简单的几行代码就学会了POI新建Excel文档的使用,本篇博客也从简单出发,通过查看POI的官网文档和一个简单的代码实例,学习怎么遍历出一个Excel文档的内容. package com. ...

  9. Axure实例演示—登录界面

         实例演示 ——登录界面                                                                                    ...

  10. 【Math】矩阵求导

    https://en.wikipedia.org/wiki/Matrix_calculus http://blog.sina.com.cn/s/blog_7959e7ed0100w2b3.html