layui的基本使用-Helloworld 三把斧的一把斧头的熟练起来

这篇具有很好参考价值的文章主要介绍了layui的基本使用-Helloworld 三把斧的一把斧头的熟练起来。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

该笔记记录如何使用layui的模块化方法。

  • 访问layui官网 Layui - 极简模块化前端 UI 组件库
  • 下载官网的layui压缩包文件,解压到本地文件夹,文件结构如下:

layui的基本使用-Helloworld 三把斧的一把斧头的熟练起来,前端开发,HTML,layui,前端,javascript

vscode创建项目;

layui的基本使用-Helloworld 三把斧的一把斧头的熟练起来,前端开发,HTML,layui,前端,javascript 

 位置

  layui的基本使用-Helloworld 三把斧的一把斧头的熟练起来,前端开发,HTML,layui,前端,javascript

 测试写了三个文件夹,才测试出来bug 坑所在,知道原因。引入没有错误,错误的是位置啊。

真坑啊也是,新手测试一定注意的地方。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  <!-- layui的核心CSS文件 -->
<link rel="stylesheet" href="layui/css/layui.css" >

 <script src="layui/layui.js" type="text/JavaScript" charset="uft-8"> </script>
</head>
<body>

    <h1>demo</h1>
    <script>
        // Usage
        layui.use(function(){
          var layer = layui.layer;
          // Welcome  没有引入错误,但是位置放错了,就不行啊
          layer.msg('Hello World', {icon: 6});
          // layer.msg('没有引入错误,但是位置放错了,就不行啊', {icon: 6});
        });
        </script> 


</body>
</html>

打印效果

   layui的基本使用-Helloworld 三把斧的一把斧头的熟练起来,前端开发,HTML,layui,前端,javascript

 文章来源地址https://www.toymoban.com/news/detail-599191.html

到了这里,关于layui的基本使用-Helloworld 三把斧的一把斧头的熟练起来的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 二、GoLang输出HelloWorld、基本数据类型、变量常量定义、基本类型转换

    go语言中,想要输出内容到控制台,package必须是main,包括方法名也必须是main, go语言输出的语法是 fmt 库。 Go语言的基本类型有: boolean:布尔类型 true / false string :字符串类型 数值型: int8:有符号8位整型(-128到127)长度 int16:有符号16位整型(-32768到32767)长度 int32:有

    2024年02月09日
    浏览(59)
  • 基于C语言的数据结构之顺序表——带你熟练掌握顺序表基本操作!!超级详细!!

    目录 前言: 1.源代码如下 2.数据结构——顺序表    2.1.顺序表的特点    2.2顺序表的分类     2.2.1.动态分配内存的顺序表     2.2.2.静态分配内存的顺序表    2.3.定义一个顺序表 3.顺序表的基本操作    3.1初始化顺序表     不用将顺序表中可能存在的原有元素初始化吗?

    2024年04月26日
    浏览(41)
  • Linux驱动开发笔记(一):helloworld驱动源码编写、makefile编写以及驱动编译基本流程

    若该文为原创文章,转载请注明原文出处 本文章博客地址:https://hpzwl.blog.csdn.net/article/details/130534343 红胖子网络科技博文大全:开发技术集合(包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬结合等等)持续更新中… 上一篇:没有了 下一篇:《Linu

    2024年02月08日
    浏览(77)
  • Layui基本功能(增删改查)

    话不多说,根据我前面的博客我们直接进行操作。 记住以下的文件放置,防止操作出不来.  这是我们要完成的界面及功能   数据查看 我们在userDao方法里面进行增删改查的方法 我们在userAction进行方法的编写 R工具类的介绍 userDao方法 因为我们的数据库的rid需要转成权限名,

    2024年02月16日
    浏览(38)
  • 带你熟练使用list

    🎈个人主页:🎈 :✨✨✨初阶牛✨✨✨ 🐻强烈推荐优质专栏: 🍔🍟🌯C++的世界(持续更新中) 🐻推荐专栏1: 🍔🍟🌯C语言初阶 🐻推荐专栏2: 🍔🍟🌯C语言进阶 🔑个人信条: 🌵知行合一 🍉本篇简介::讲解C++中STL中 list 简单使用. 官方查询文档 本文的目的主要是介绍 list 的

    2024年02月07日
    浏览(34)
  • 如何熟练使用vim工具?

    🎈个人主页:🎈 :✨✨✨初阶牛✨✨✨ 🐻推荐专栏1: 🍔🍟🌯C语言初阶 🐻推荐专栏2: 🍔🍟🌯C语言进阶 🔑个人信条: 🌵知行合一 🍉本篇简介::讲解C++中的函数重载、引用、auto、内联函数等. 金句分享: ✨生活本就沉默,但是跑起来有风!✨ 文末有彩蛋哦! Vim 是一款文

    2024年02月05日
    浏览(34)
  • 从陌生到熟练使用string类

    🎈个人主页:🎈 :✨✨✨初阶牛✨✨✨ 🐻推荐专栏1: 🍔🍟🌯C语言初阶 🐻推荐专栏2: 🍔🍟🌯C语言进阶 🔑个人信条: 🌵知行合一 🍉本篇简介::讲解C++中有关string类的使用,从构造函数到容量操作,到遍历以及增删查改和最后的运算符重载. string 库的学习:传送门 在库中我们

    2024年02月11日
    浏览(34)
  • 熟练使用git之git撤回操作

    需要关注持续更新的朋友可以关注下面的链接: git操作合集地址 1、执行了merge但没有commit 2、撤回上次或者上上次提交代码 要撤销上一次提交或上上次提交的代码,有两种常用的方法可以实现: 2.1. 使用 git revert 撤销提交: 撤销上一次提交: git revert HEAD 撤销上上次提交:

    2024年02月12日
    浏览(45)
  • 一文让你熟练使用 JSONObject 和 JSONArray

    导入阿里的 fastjson 依赖。 通过 JSONObject.parseObject(String str) 将字符串转换为 JSONObject 对象,此方法支持 JSON 字符串,JSON 字符串格式如下: 写法一: 写法二: 转换案例代码: 输出: 如果是 JSONArray 类型的字符串,如下: 则需要用 JSONArray.parseArray() 将 JSON 转换为 String,使用

    2023年04月24日
    浏览(33)
  • 【Python】【三分钟】熟练使用 os.path.join()

    【Python】【三分钟】熟练使用 os.path.join() 🌈 欢迎进入我的个人主页,我是高斯小哥!👈 🎓 博主档案: 广东某985本硕,SCI顶刊一作,深耕 深度学习 多年,熟练掌握PyTorch框架。 🔧 技术专长: 擅长处理各类深度学习任务,包括但不限于图像分类、图像重构(去雾去模糊修

    2024年04月25日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包