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

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. 函数后面有个 const

    错误场景:类中的重载函数 编译报错: 函数后面加了 const 就好了. 非静态成员函数后面加const(加到非成员函数或静态成员后面会产生编译错误), 表示成员函数隐含传入的this指针为 cons ...

  2. unity3d-----Collider 组件参考

    Collider 组件参考 点击 属性检查器 下面的 添加组件 按钮,然后从 添加碰撞组件 中选择需要的 Collider 组件,即可添加 Collider组件到节点上. Collider 组件属性 ...

  3. EF5+MVC4系列(10) mvc的布局页面 _ViewStart.Cshtml

    当客户端请求 /Product/Index的时候, 如果在视图的根目录下有 _ViewStart.Cshtml 就会先执行这个,再去执行 Product文件夹下的Index视图, 如果Product文 ...

  4. EF学习和使用综合

    一.(引)你必须知道的EF知识和经验 二.(引)EF学习和使用(七)EF性能优化篇 三.(引)采用EntityFramework.Extended 对EF进行扩展(Entity Framework 延 ...

  5. 《经久不衰的Spring框架：@ResponseBody 中文乱码》（转）

    转载自:http://www.cnblogs.com/shanrengo/p/6429291.html 问题背景 本文并不是介绍@ResponseBody注解,也不是中文乱码问题的大汇总笔记,这些网上 ...

  6. 全新WayOS 配置文件保存工具支持蓝色界面路由版本

    一直以来都有群里的朋友要求我弄一个支持蓝色界面路由的参数备份工具,也一直拖了大半年 昨天忙到4点多,早上又因为一些小的BUG被用户电话叫起,干脆就帮你们整一个这个工具了 功能还是一样,支持各种参数的保 ...

  7. Java JVM运行时数据区，内存管理和GC垃圾回收

    一 . 运行时数据区 程序计数器是线程私有的,是一块很小的内存空间,是当前线程执行到字节码行号的计数指示器.每个CPU处理器核心 在任何一个时刻,都只可能运行着唯一的一个线程,执行着一条指令.所以在多 ...

  8. Capability Model

    Data Scientist, Analytics We’re looking for data scientists to work on our core and business product ...

  9. 17 HTTP编程入门

    http请求原理 http请求原理我就不多说了,网上一搜就能搜索到,下面我注意是记录下http模块的使用方法 http 模块 HTTP-server hello world 我们使用HandleFun ...

  10. python qq邮箱发送邮件

    使用qq发送邮件 # coding=utf8 """ qq邮箱发送邮件 """ import sys reload(sys) sys.set ...