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

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. Erlang HTTP client:ibrowse

    ibrowse: https://github.com/cmullaparthi/ibrowse

  2. How to suppress 'Maybe this is program method' warnings from ProGuard

    11down votefavorite 2 I'm using ProGuard with my Android application and I'm running getting the war ...

  3. VIM选择文本块/复制/粘贴

    在正常模式下(按ESC进入)按键v进入可视化模式,然后按键盘左右键或h,l键即可实现文本的选择.其它相关命令:v:按字符选择.经常使用的模式,所以亲自尝试一下它. V:按行选择.这在你想拷贝或者移动很 ...

  4. Windows环境下ELK(5.X)平台的搭建

    一.Windows环境下ELK平台的搭建(2.*) 1.安装配置Java环境 在Oracle官网获取最新版的Java版本,由于只是运行不是开发,所以也可以只下载JRE.官网:http://www.or ...

  5. Win7-64位安装TensorFlow-GPU

    1.查看电脑显卡 路径:计算机--属性--设备管理器-显示适配器 2.显卡(GPU)是否支持CUDN https://developer.nvidia.com/cuda-gpus 3.安装 1)CUD ...

  6. SharePoint PowerShell使用Backup-SPSite指令来备份网站集

    备份网站集: Backup-SPSite -Identity http://win2012sp2013:1000/ -Path "C:\KenmuTemp\Test File\Temp\si ...

  7. geoserver入门

    1.什么是Universal Transverse Mercator system 翻译名叫做通用横轴魔卡托系统,通常称为UTM.这个投影系从中心子午线把世界分成一系列6度的纵向宽区域. 2.什么是w ...

  8. Bootstrap 各种进度条详解

    一:默认的进度条 创建一个基本的进度条的步骤如下: 添加一个带有 class .progress 的 <div>. 接着,在上面的 <div> 内,添加一个带有 class . ...

  9. ​4种实现多列布局css

    摘要: 多列布局在网站应用中也是经常见到的,今天就分享4中多列布局. display:table <style> .table { width: auto; min-width: 1000 ...

  10. java.net.NoRouteToHostException：无法指定被请求的地址

    最近在做一个新项目的poc压测的时候发现了如下问题: TPS一直突破不了5000,按照计算理论上应该可以达到8000 tps/s左右的,查看数据库端口情况,吓一跳... netstat -ant | ...