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

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. Git -- 分支管理简介

    分支就是科幻电影里面的平行宇宙,当你正在电脑前努力学习Git的时候,另一个你正在另一个平行宇宙里努力学习SVN. 如果两个平行宇宙互不干扰,那对现在的你也没啥影响.不过,在某个时间点,两个平行宇宙合并 ...

  2. logstash 主题综合篇

    一.[logstash-input-file]插件使用详解(配置) logstash input 监听多个目标文件. 二.Logstash Reference(官方参数配置说明)

  3. Springboot学习笔记（七）-集成Redis

    redis下载地址 添加依赖 <dependencies> <dependency> <groupId>org.springframework.boot</g ...

  4. es 5 数组reduce方法记忆

    reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始合并,最终为一个值. 概念:对数组中的所有元素调用指定的回调函数.该回调函数的返回值为累积结果,并 ...

  5. 怎么设置BarTender中二维码大小为25*25

    有小伙伴近期问了小编一个问题,说客户需要25*25大小的QR Code二维码,用BarTender怎么做出来?想要指定条形码的大小,还得BarTender符号与版本选项来帮忙.本文小编就来给大家详细讲 ...

  6. ExtJS中给Tree节点加click事件

    第一种: 直接通过TreePanel中的Config Option中的listener来添加,代码如下: var TreePan = new Ext.tree.TreePanel({ id: 'Tre ...

  7. 如何在Linux系统中安装VMware

    首先打开vmware官网的下载链接:https://my.vmware.com/web/vmware/info/slug/desktop_end_user_computing/vmware_works ...

  8. repo_file_in_folder

    -- Create table create table repo_file ( uuid ), create_time ), creator ), modify_time ), modifier ) ...

  9. linux环境下pytesseract的安装和央行征信中心的登录验证码识别

    首先是安装,我参考的是这个 http://blog.csdn.net/xinghun_4/article/details/47860645 我是centos,使用yum yum install pyt ...

  10. ASP.NET用DataSet导出到Excel

    //读取临时文件    GYYW.DA.Common.Base_SqlDataBase daBZDM = new GYYW.DA.Common.Base_SqlDataBase();    DataS ...