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

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. Zookeeper系统设计的优点

    转自:Zookeeper系统设计的优点.http://webcache.googleusercontent.com/search?q=cache:s6fr40t_5ncJ:www.chaozh.com ...

  2. goldengate一些參数整理

    manager參数: AUTOSTART:指定在mgr启动时自己主动启动那些进程. AUTOSTART ER * AUTOSTART extract extsz  AUTORESTART:指定在mgr ...

  3. win10 UWP Markdown 含源码

    Windows下没有比較好的Markdown编辑器 我就自己写一个 csdn的Markdown非常好,就是我须要截图保存有麻烦 须要把我的截图保存在本地,然后上传 这个过程比較麻烦 csdn的图没法外 ...

  4. mybatis 参数为String，用_parameter 取值

    mybatis 参数为String,if test读取该参数代码: <select id="getMaxDepartId" parameterType="java. ...

  5. Mysql：This version of MySQL doesn’t yet support ‘LIMIT & IN/ALL/ANY/SOME 错误解决

    From: http://blog.chinaunix.net/uid-22414998-id-2945656.html This version of MySQL doesn’t yet suppo ...

  6. spring mvc实现接口参数统一更改

    适用于post  json方式提交 使用map接收的接口参数更改. 使用@Aspect实现:

  7. js中的方法调用

    <script> var m = {com: { sao: {citi:{}}}}; m.com.sao.citi.init = new function() { this.name = ...

  8. 10.6 监控io性能 10.7 free命令 10.8 ps命令 10.9 查看网络状态 10.10 linux下抓包

    iostat sysstat 包里面包括 sar 和 iostat [root@centos7 ~]# iostat Linux 3.10.0-693.2.2.el7.x86_64 (centos7. ...

  9. Java初学者不可不知的MyEclipse的设置技巧（自动联想功能）

    最近初学Java,正在使用MyEclipse来编写新的项目,刚开始打开MyEclipse感觉这个工具既陌生又熟悉,熟悉之处在于编辑器的几大共通之处它都具备,比如说基本的设置.编辑区.调试区都是类似的, ...

  10. vuex在页面中以对象展开运算符形式引入报错解决

    当页面中以mapGetters等对象扩展运算符写的时候,会报错 unexpected token 解决如下: babel还要加插件才能解释这个写法 npm install --save-dev bab ...