浏览器端的模板引擎使用—art-template

最新推荐文章于 2022-07-08 15:31:24 发布
最新推荐文章于 2022-07-08 15:31:24 发布
阅读量609 收藏 1
点赞数
分类专栏： Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42036616/article/details/84671101
版权

要点：

1.模板引擎不光能在浏览器客户端中使用， 也能在node等服务器中使用。

2.在替换模板引擎中占位符写完语句后，反而不能添加分号，会报错。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script src="node_modules/art-template/lib/template-web.js"></script>
	<!-- 引入浏览器需要的模板引擎文件 -->

	<script type="text/template-web" id="tp1">	
		{{ name }} 是真的帅！
		我是：{{ each goods }} {{ $value }} {{ /each }} 
	</script>
	<!-- 注意type的文件格式，不要被当成js文件解析 -->

	<script>
		var ret = template('tp1',{
			name:'陈小帅',
			goods:[
			   '世界第一',
			   '宇宙无敌',
			   '的男人'
			]

			// 后面写分号会报错
		})

		console.log(ret)
	</script>
    <!-- 通过id引入对应模板，再将占位符替换掉 -->
</body>
</html>

运行结果：

何迟
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浏览器中使用模板引擎 node
拱卒的博客
03-10 215
js // art-template // art-template 不仅可以在浏览器使用，也可以在 node 中使用 // 安装： // npm install art-template // 该命令在哪执行就会把包下载到哪里。默认会下载到 node_modules 目录中 // node_modules 不要改，也不支持改。 // 在 Node 中使用 art-templ...
浏览器中使用模版引擎art-template
jifubu6013的博客
04-27 757
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="dv"&gt;&lt;/d
客户端 浏览器使用art-template（模版引擎）
weixin_42448623的博客
08-31 471
浏览器使用art-template安装在需要的文件模块中引用 art-template查看文档 api完整代码 + 效果 安装 npm install art-template --save 在需要的文件模块中引用 art-template <script src="./node_modules/art-template/lib/template-web.js"></scr...
12.浏览器中的模板引擎
ly_jewel的博客
09-16 121
art-template : 不仅可以在浏览器使用，也可以在node中使用。 服务端渲染，就是在服务端使用模板引擎 可以通过npm下载---GitHub上有art-template链接 http://github.com/aui/art-template http://aui.github.io/art-template Windows+R---cmd---打开code所在目录（...
浏览器模板引擎使用：art-template
fengzitaba的博客
09-21 393
1.下载art-template模板引擎库文件:https://aui.github.io/art-template/zh-cn/index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" con...
前端插件art-template模板引擎art-template-test示例代码
09-24
本文主要围绕`art-template`这一前端模板引擎，通过`art-template-test`示例代码来深入探讨其核心概念、使用方法以及在实际项目中的应用。 `art-template`是一个轻量级、高性能的JavaScript模板引擎，它旨在解决...
art_template.rar 模板引擎
11-21
在本例中，我们关注的是`art-template`，一个用于JavaScript的高效模板引擎。 **art-template特性** 1. **高效性能**：`art-template`以其高效著称，其编译后的模板执行速度接近原生JavaScript，避免了DOM操作带来...
art-template：高性能JavaScript模板引擎
02-03
艺术模板 |art-template是一个简单且超快速的模板引擎，可通过范围内预先声明的技术优化模板渲染速度，从而实现接近JavaScript极限的运行时性能。 同时，它支持NodeJS和浏览器。 。 art-template是一个简约，超快的...
详解js模板引擎art template数组渲染的方法
12-10
JavaScript模板引擎，如Art Template，是开发者用于将数据与HTML界面分离的重要工具，它提高了代码的可维护性和执行效率。Art Template，由腾讯开发，以其轻量级、高性能和跨平台（支持NodeJS和浏览器）的特点，备受...
nodejs中art-template模板语法的引入及冲突解决方案
10-19
为了配置art-template为服务端渲染，需要引入模块并设置基础路径和模板文件扩展名，使用`template.__express`作为Express的模板引擎： ```javascript var template = require('art-template'); template.config('...
browser-sync-nunjucks:用于浏览器同步的Nunjucks中间件
05-24
浏览器同步nunjucks 不推荐使用browser-sync-nunjucks-请改用
简单web浏览器模板
12-30
建立web浏览器的简单模板构架，在此模板之上可以自行添加代码增加更多功能
art-template（浏览器安装版&标准语法）
MiemieWan的博客
06-07 1717
art-template 是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。下载template-web.js:  https://raw.githubusercontent.com/aui/art-template/master/lib/template-web.js  右击下载1.输...
browserify - npm(浏览器解析node模板工具)
weixin_43343144的博客
12-27 243
browserify官方参考文档:https://www.npmjs.com/package/browserify   CommonJS规范 -- 有一个node模型（服务器端的），一个browserify浏览器模型，浏览器模型中是没有require方法的，所以node的代表需要通过 browserify来解析一下即可！   browserify解析的方法：browserify ./mod...
浏览器对文档的解析过程
economics3的博客
03-10 331
我们输入一个url之后，浏览器从发起请求到页面显示做了什么？ 比如我在url输入www.baidu.com 首先浏览器要调用资源加载器，他既需要要和网络模块对接又需要和解析器对接，所以我们可以把它看成一个仓库 最先返回来的资源是百度的文档类型，所以会被html解析器要去 html解析器得到之后他把它变成dom树（多层次的节点对象），我把他想象成一个车架子。 在解析过程会遇到link这类标签，他们需要引入外部资源，如果是css这需要使用css解析器，这和文档解析过程是同步的 在解析中会遇到script，im
JavaScript 模板引擎
AKindofo的博客
06-10 705
javascript模板语法
什么是模板引擎？常见的模板引擎有哪些？thymeleaf的常用指令介绍
m0_67942533的博客
07-08 4653
浅析模板引擎
thinkjs能在浏览器html文件,thinkjs框架的默认模板引擎Nunjucks的中文文档
weixin_39811842的博客
06-10 202
Node 端使用$ npm install nunjucks0$npminstallnunjucks下载后可直接 require('nunjucks') 使用浏览器端使用可直接使用 nunjucks.js (min)，如果针对编译后的模板可使用 nunjucks-slim.js (min)。你应该使用哪个文件nunjucks.js 可用于动态加载模板，当模板变化时重新加载，也可以用于预编译后的模板...
artTemplate模板引擎的简单实用
jackie_bobo的博客
06-26 2925
虽说现在多数公司都是用MV*框架做项目，数据驱动视图更新，Dom操作部分就不需要太在意，只管逻辑部分。就在今天2018.6.26日，这是有一个 特别的日子 ，因为我我….不说了！说一下我哪个美丽又可爱的朋友问我jq里怎么用模板引擎，所以我就写个demo给她，虽说自己也是渣渣，但是能帮到她就挺好的，所以我想既然都demo都写了，就发个博客记录一下，看有没有人恰巧有用，点上一赞足以让我开心的像2...
art-template模板引擎使用,以及他的使用逻辑
最新发布
06-08
Art-template是一款高性能、轻量级的模板引擎，适用于Node.js和浏览器环境。它以简洁明了的语法，支持模板继承、条件判断、循环遍历等常见功能，同时还提供了强大的过滤器和自定义标签功能。 Art-template的使用逻辑如下： 1. 安装Art-template 可以通过npm安装Art-template，命令如下： ```npm install art-template --save``` 2. 引入Art-template 在Node.js中，可以使用require语句引入Art-template： ```const template = require('art-template');``` 在浏览器中，可以使用script标签引入Art-template： ```<script src="path/to/art-template.js"></script>``` 3. 编写模板 Art-template使用{{}}包裹变量、表达式或语句。例如，以下是一个简单的模板： ``` <!DOCTYPE html> <html> <head> <title>{{title}}</title> </head> <body> <h1>{{title}}</h1> <p>{{content}}</p> </body> </html> ``` 4. 渲染模板 使用template方法可以将模板渲染成字符串。例如： ``` const template = require('art-template'); const data = { title: 'Art-template', content: 'A lightweight and powerful template engine' }; const html = template('path/to/template', data); console.log(html); ``` 在上面的例子中，我们将data对象传递给了模板，使用{{}}包裹的变量会被替换成data对象中的对应值，最终输出渲染后的HTML字符串。 5. 高级用法 除了基本的变量替换，Art-template还支持模板继承、条件判断、循环遍历等高级用法。例如，以下是一个使用if语句和each语句的模板： ``` {{if isAdmin}} <p>Welcome, admin</p> {{else}} <p>Welcome, user</p> {{/if}} <ul> {{each list}} <li>{{$index}}. {{$value}}</li> {{/each}} </ul> ``` 以上就是Art-template的使用逻辑，希望能对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值