首页 index.html

<body>

    <div id="hello"></div>

    <script src="./lib/layui/layui.js"></script>

    <script>

        layui.use('layer', function(){

            var $ = layui.$;

            // 加载hello组件（会自动绑定组件对应的dom上）

            $("#hello").load("./components/hello.html");

        });

    </script>

</body>
组件 hello.html

<script id="demo" type="text/html">

    <h3>{{ d.title }}</h3>

</script>

<script>

    var data = { //数据

        "title": "helloword"

    }

    var getTpl = demo.innerHTML

        , view = document.getElementById('hello');

    layui.use('laytpl', function () {

        var laytpl = layui.laytpl;

        laytpl(getTpl).render(data, function (html) {

            view.innerHTML = html;

        });

    })

</script>

layui.laytpl如何从外部引入模板文件的更多相关文章

  1. Import “google/api/annotations.proto“ was not found or had errors.问题；proto 中外部引入proto文件问题解决方案

    问题 在proto 中引入了一些其他 proto 文件的情况下会出现was not found or had errors.问题 在使用Kratos框架时proto文件引入import "g ...

  2. vscode中外部引入js文件以及里面相应的方法

    随便写一个js文件,定义一个方法名,并且在组件中进行引用就算成功 ###~js function shuchu(){     console.log(1) } export { shuchu };   ...

  3. spring 配置文件 引入外部的property文件的两种方法

    spring  的配置文件 引入外部的property文件的两种方法 <!-- 引入jdbc配置文件    方法一 --> <bean id="propertyConfig ...

  4. 模板文件引入css样式文件

    引用路径问题:相对路径和绝对路径 相对路径:相对路口文件index.php设置 绝对路径:从虚拟主机站点目录开始设置 css样式文件引入图片,路径的设置 相对地址:相对css文件本身设置 ①模板文件 ...

  5. html中引入调用另一个公用html模板文件的方法

    html中引入调用另一个公用html模板文件的方法 https://www.w3h5.com/post/53.html 这里我使用jquery的方法 <body> <div id=& ...

  6. layui.laytpl 模板引擎用法

    目录 layui下载地址: 最终效果: 模板引擎文档 手册地址: 以下是代码思路: layui下载地址: https://www.layui.com/ 最终效果: 模板引擎文档 手册地址: https ...

  7. 织梦Dedecms主要文件夹目录及模板文件说明

    虽然织梦DedeCMS因为安全问题被人所诟病,但瑕不掩瑜,无论从用户群数量还是时间等各方面,织梦DedeCMS都是国内排名前几的CMS建站程序.如果你想学习CMS的二次开发,织梦DedeCMS是必须需 ...

  8. 背水一战 Windows 10 (11) - 资源: CustomResource, ResourceDictionary, 加载外部的 ResourceDictionary 文件

    [源码下载] 背水一战 Windows 10 (11) - 资源: CustomResource, ResourceDictionary, 加载外部的 ResourceDictionary 文件 作者 ...

  9. JavaScript模板引擎artTemplate.js——如何引入模板引擎？

    artTeamplate.js在github上的地址:artTemplate性能卓越的js模板引擎 引入模板引擎,就是引入外部javascript啦,并且artTemplate.js不依赖其他第三方库 ...

  10. html引入css文件

    在HTML中,引入CSS的方法主要有行内式.内嵌式.导入式和链接式. 行内式:即在标记的style属性中设定CSS样式,这种方式本质上没有体现出CSS的优势,因此不推荐使用.例: <html&g ...

随机推荐

  1. python tkinker答题工具简易实现

    分享一个简单的python tkinker实现的答题工具,效果参见https://www.bilibili.com/video/BV13e4y1E71d/ 点击查看代码 import tkinter ...

  2. 端口telnet不通排查过程

    现状 简单描述下最近在做啥,我手里维护的一些系统的线上服务器,还在使用centos7,7.3/7.6/7.9都有,运维侧选定的替换系统是openEuler20.03-LTS-SP1.按理说,运维直接在 ...

  3. B站插入外站链接地址（现已禁用）

    问题描述: B站中插入链接时,无法插入外站链接,提示[请输入正确的站内链接地址]: 日常文章编写中,经常需要插入外站链接跳转,以便于用户快速定位 分析: B站专栏文章编辑使用的富文本编辑器,应该是支持 ...

  4. 基于Redission实现分布式调度任务选主

    在Spring Cloud微服务架构中,基于Redisson实现分布式调度任务的选主和心跳监听,可以通过以下完整方案实现.该方案结合了Redisson的分布式锁和发布/订阅功能,确保高可靠性和实时性: ...

  5. PC端自动化测试实战教程-2-pywinauto 启动PC端应用程序 - 上篇（详细教程）

    1.简介 经过上一篇的学习.介绍和了解,想必小伙伴或者童鞋们,已经见识到pywinauto的强大了,今天继续介绍pywinauto,上一篇已经可以打开计算器了,这里宏哥在提供其他方法进行打开计算器和非 ...

  6. 在SqlSugar的开发框架中增加对低代码EAV模型（实体-属性-值）的WebAPI实现支持

    我在前面随笔中介绍了在SqlSugar的开发框架中实现EAV模型(实体-属性-值)的处理,这个EAV模型实现的目的是支持弹性化的数据库设计,可以自由扩展数据库表字段和数据的查询和存储,实现的思路是在常 ...

  7. 【笔记】reko 0.10.2 反编译工具安装和使用记录｜(2) 翻译 user‘s guide

    Reko user's guide Reko是一个二进制可执行文件的反编译器.它接受输入的一个或多个二进制可执行文件,然后反编译成高级语言.它可以在GUI shell中被交互地使用,作为一个命令行项目 ...

  8. Vue中的APP与js的对象字面量

    JavaScript的对象字面量是一种方便创建和初始化对象的语法.它允许您直接在代码中定义对象,而无需使用类或构造函数.对象字面量使用大括号{}括起来,并包含零个或多个键值对. 以下是JavaScri ...

  9. AutoCAD中的Deep Clone

    AutoCAD中的Deep Clone 所谓Deep clone是指将实体从一个dwg文件拷贝至另一个dwg文件,类似于Ctr+C,CtrV,而普通的实体的Copy()方法,是在单个dwg文件中输入命 ...

  10. K8s中的污点和容忍

    概述 官方文档:https://kubernetes.io/zh-cn/docs/concepts/scheduling-eviction/taint-and-toleration/ 污点是作用在k8 ...