在HTML当中引入Vue控件,以element-ui为例

news2024/7/6 19:24:05

前情:需要实现一个同时满足按天、按周、按月选择的时间选择器,但是以HTML为基础写的都不太满足我的要求,要么只能按天选择,要么就是想选择久远的时间得点很久,除非自己写捷径,所以就看上了element-ui的这个时间选择器。

其实要想用的话很简单,先引入vue和element-ui的js和css。

这里我用的是本地的js引入,地址分别为:【vue这个可能连不上,可以自己去找。

https://cdn.jsdelivr.net/npm/vue/dist/vue.js

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

下载到本地后引入:

<script type="text/javascript" src="../static/js/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="../static/css/element-ui-index.css">
<!-- 引入组件库 -->
<script src="../static/js/index.js"></script>

要注意的点是vue必须在element-ui上面,我这个css改名了主要是我原本就有一个index的css了,如果和我情况不一样的话可以维持原来的名称不变。

然后在需要此vue组件生效的区域定义一个div标签,等会用js初始化,比如我这个时间选择器在顶部,我就拿个id为app的div包裹起来,然后new一个Vue。

 <div class="container" id="app">
  <div class="block">
    <span class="demonstration">周</span>
    <el-date-picker
      v-model="value1"
      type="week"
      format="yyyy 第 WW 周"
      placeholder="选择周">
    </el-date-picker>
  </div>
 </div>
<script>
    new Vue({
      el: '#app',
      data: function() {
        return {value1:""}
      }
    })
  </script>

到这里基本OK了,但是我遇到了以下几个问题,也许你也会遇到:

1.vue版本和element-ui版本不匹配的问题:

报错内容:Uncaught SyntaxError: Unexpected token '<'

我刚开始用的是vue3,出现了index.js无法读取的问题,然后把vue降为2就可以了,如果一定要用vue3的话,element-ui首页有讲相关方法,可以自己去查。【我没用过,但是估计就和我的在html中引入的想法相悖了,就没试

2.script 后面没加 type="module"导致的报错

这个其实忘了报的什么错了,后来加了就好了,但是我今天试了下把它去掉也能用。。

3.element-ui的模块,图标不正常显示的问题。

这个是因为我们下载的css当中没有font文件,去下载就好了。

地址:UNPKG - element-ui

下载这个地址的两个文件即可,注意要和css、js的版本一致,【不过应该一直没更新差别不大

然后如果没点进去,在外面直接右键链接另存为是不行的,下载完成之后大小明显和页面当中显示的不一样,读取会失败,最好是点进去之后然后View Raw,在新的网页右键另存为,或者有的浏览器可以直接自动下载,下载完成后对比一下文件大小。

下载完成后到你的css文件夹中新建一个fonts文件夹,把这两个文件丢进去就好了。

嗯,这个教程就到此为止了,祝你成功

和正常vue项目的区别是,因为你这个是初次使用vue,所以必须新建然后在里面写,如果按照element-ui当中的代码,export,就只会失败。

bonus:如果在vue这块的代码中引入js包,该怎么处理?

我在抄另一个代码的时候,看到用到了this.$moment,显然我们的HTML文件是不支持这样的用法的,import也是不行的,但其实可以直接用上面的方法引入js包,然后直接moment()调用方法。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1142789.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【开源】基于SpringBoot的计算机机房作业管理系统的设计和实现

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 登录注册模块2.2 课程管理模块2.3 课时管理模块2.4 学生作业模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 课程表3.2.2 课时表3.2.3 学生作业表 四、系统展示五、核心代码5.1 查询课程数据5.2 新增课时5.3 提交作…

Linux中shell的执行流控制

目录 一、for语句 1、for语句的基本格式 2、示例 二、条件语句 1、while…do语句 2、until…do语句 3、if …then语句 4、示例 三、case语句 四、expect应答语句 1、固定答案 2、将expect与bash环境结合 3、示例 五、终止语句 一、for语句 作用&#xff1a;为…

论文-分布式-并发控制-并发控制问题的解决方案

目录 参考文献 问题 解法与证明 易读版本 参考文献 Dijkstra于1965年发表文章Solution of a Problem in Concurrent Programming Control&#xff0c;引出并发系统下的互斥(mutual exclusion)问题&#xff0c;自此开辟了分布式计算领域Dijkstra在文中给出了基于共享存储原子…

28 行为型模式-中介者模式

1 中介者模式介绍 2 中介者模式原理 3 中介者模式实现 /*** 抽象中介者**/ public interface Mediator {//处理同事对象注册与转发同事对象信息的方法void apply(String key); }/*** 具体中介者**/ public class MediatorImpl implements Mediator {Overridepublic void apply…

【面试经典150 | 栈】最小栈

文章目录 Tag题目来源题目解读解题思路方法一&#xff1a;辅助栈方法二&#xff1a;一个栈方法三&#xff1a;栈中存放差值 其他语言python3 写在最后 Tag 【设计类】【栈】 题目来源 155. 最小栈 题目解读 本题是一个设计类的题目&#xff0c;设计一个最小栈类 MinStack() …

蓝桥杯 Java 括号序列

本算法需要把问题分解成三步&#xff1a; 第一步&#xff1a;算出 ((() 填充 ( 的方案 第二步&#xff1a;算出 ((() 填充 ) 的方案 第三步&#xff1a;把两个方案相乘 第二步可以把原方案当成将 ((() 逆转成 ())) 再填充 ( &#xff0c;这样就可以重复第一步用的算法 第一步…

ChatGLM3 本地部署的解决方案

大家好,我是herosunly。985院校硕士毕业,现担任算法研究员一职,热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名,CCF比赛第二名,科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的见解。曾经辅导过若干个非计算机专业的学生进入到算法…

基于springboot实现网上图书商城管理系统项目【项目源码+论文说明】

基于springboot实现网上图书商城管理系统演示 摘要 在Internet高速发展的今天&#xff0c;我们生活的各个领域都涉及到计算机的应用&#xff0c;其中包括网上图书商城的网络应用&#xff0c;在外国网上图书商城已经是很普遍的方式&#xff0c;不过国内的管理网站可能还处于起步…

解读PowerJob的秘密武器:探索Akka Toolkit原理

本文适合有 Java 基础知识的人群 Akka is a toolkit for building highly concurrent, distributed, and resilient message-driven applications for Java and Scala. 上面这段文字摘抄自 Akka 官网&#xff08;akka.io&#xff09;&#xff0c;翻译成中文也就是&#xff1a;“…

接口返回响应,统一封装(ResponseBodyAdvice + Result)(SpringBoot)

需求 接口的返回响应&#xff0c;封装成统一的数据格式&#xff0c;再返回给前端。 依赖 对于SpringBoot项目&#xff0c;接口层基于 SpringWeb&#xff0c;也就是 SpringMVC。 <dependency><groupId>org.springframework.boot</groupId><artifactId&g…

你有没有注意到Java越来越卷了?

你有没有注意到Java越来越卷了&#xff1f; 早在201几年就开始这么认为了&#xff0c;十年前都这么嚷嚷了&#xff0c;现在还有人问这个问题&#xff0c;放心java死不了&#xff0c;最近很多小伙伴找我&#xff0c;说想要一些Java资料&#xff0c;然后我根据自己从业十年经验&…

疾控采样器在污水采样中发挥的重要作用

便携式污水采样器现在的应用领域越来越多样化&#xff0c;适用范围也更广泛。主要适用于各级环境监测站、监察机构、科研院所、水务、市政及污水处理厂&#xff0c;对工业污染源排放口、江、河、湖、海等水样进行自动采样。可广泛应用于水环保、疾控采样、污水禁毒等领域。 对…

BI技巧丨利用Rank函数排名

实际业务场景中&#xff0c;除了各类条件计算、同环比计算以外&#xff0c;排名也是比较常见的问题&#xff0c;我们经常需要使用Rankx函数来进行某些TopN计算等。 微软新推出的开窗函数Rank&#xff0c;可以说是对排名问题的一次优化&#xff0c;也解决了一些之前Rankx函数的…

二分归并法将两个数组合并

#define _CRT_SECURE_NO_WARNINGS 1 #include<stdio.h> main() {int a[5] {1,3,4,5,6};int b[4] {2,7,8,9};int c[9];int m0, n0,k0;while (m < 5 && n < 4){if (a[m] < b[n]){c[k] a[m];//谁小谁先进数组m; k;}else{c[k] b[n];k; n;}}while (m <…

flask 实践

flask框架研究&#xff1a; https://blog.csdn.net/shifengboy/article/details/114274271 https://blog.csdn.net/weixin_67531112/article/details/128256170 实现下载文件功能 vim test.py import io from flask import Flask, send_fileapp Flask(__name__) app.route(/…

【Acwing167】木棒(dfs+剪枝)超级详细题解!

题目描述 统一说明 本题思路来源于acwing算法提高课 木棍指题目输入数据所指的东西 木棒指最后由木棍拼接而成的最长的东西 看本文需要准备的知识 1.dfs基本思想 2.对“剪枝”这个词汇有一个基本的认识即可 整体分析 这个题目最终是求木棒的最短长度&#xff0c;所以我…

什么是合成数据?

合成数据是在计算机上生成的信息&#xff0c;用于增强或替换真实数据&#xff0c;以改进 AI 模型、保护敏感数据并减轻偏见。 将大量数据对准人类&#xff0c;你会得到信息过载。但是&#xff0c;如果你对计算机做同样的事情&#xff0c;你会得到机器学习模型&#xff0c;当你…

网络协议--TCP:传输控制协议

17.1 引言 本章将介绍TCP为应用层提供的服务&#xff0c;以及TCP首部中的各个字段。随后的几章我们在了解TCP的工作过程中将对这些字段作详细介绍。 对TCP的介绍将由本章开始&#xff0c;并一直包括随后的7章。第18章描述如何建立和终止一个TCP连接&#xff0c;第19和第20章将…

J2EE项目部署与发布(Windows版本)->会议OA单体项目Windows部署,spa前后端分离项目Windows部署

会议OA单体项目Windows部署spa前后端分离项目Windows部署 1.会议OA单体项目Windows部署&#xff08;以实施的角度&#xff09; 将项目放入webapp&#xff0c;项目能够访问: 首先拿到war包和数据库脚本&#xff0c;并检查是否有什么问题。 如何查看项目报错信息&#xff08;当你…

2015年亚太杯APMCM数学建模大赛B题城市公共交通服务水平动态评价模型求解全过程文档及程序

2015年亚太杯APMCM数学建模大赛 B题 城市公共交通服务水平动态评价模型 原题再现 城市公共交通服务评价是城市公共交通系统建设和提高公共交通运营效率的重要组成部分。对于公交企业&#xff0c;管理和规划部门&#xff0c;传统公交车站、线路和换乘枢纽的规划数据只是基于主…