juicer模板引擎学习

juicer

github地址:https://github.com/PaulGuo/Juicer
引入juicer

1.变量${变量名}
这些变量名在后面都需要通过juicer(模板字符串,data)中的data对象进行传值,juicer会将模板和数据进行构建,返回已经完成的HTML字符串,然后通过DOM操作的innerHTML将字符串放入

2.过滤器
在前端接受数据的时候,我们经常会拿到一些无意义但方便存储的字符串,需要将这些无意义的字符串转换为用户可以看明白的字符串,这时候过滤器(管道)就很方便了.juicer的过滤器与vue的用法相同,变量 | 方法名 , 参数2,参数3…
举个栗子
page.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.bootcss.com/juicer/0.6.15/juicer-min.js"></script>
</head>
<body><div id="pageA"></div><script>let xhr = new XMLHttpRequest();xhr.onreadystatechange=function(res){if(xhr.readyState==4&&xhr.status==200){let tpl = res.target.response;juicer.register('genderToString',value=>{if(value){switch(value){case 0 : return '女';break;case 1 : return '男';break;case 2 : return '保密';break;}}})console.log(juicer(tpl,{title:'一个假组件'}));document.getElementById('pageA').innerHTML=juicer(tpl,{title:'一个假组件',gender:2});}}xhr.open('get','../html1/tpl.html');xhr.send();</script>
</body>
</html>

tpl.html

<div>${title}</div>
<div>性别:${gender | genderToString}</div>

在使用过滤器的时候,要注意过滤器的方法都需要注册,即使用juicer.register(‘方法名’,函数),这样juicer才可以在渲染的时候调用这个方法.

3.if-else if-else
条件判断是开发中必不可少的一部分,
语法:

{@if 条件}html
{@else if 条件}html
{@else}html
{@/if}

4.循环,juicer的循环和平常的for和while循环不同,他的管检测是each

{@each 数组 as 元素,下标(下标可以省略)}
{@/each}

5.为循环增加的语法糖

{@each i in range(5,10)}${i}
{@/each}
{# 5,6,7,8,9}

6.注释
注释是开发必不可少的内容,方便自己下一次接上思路,也方便以后对代码的维护
{# 注释} 像是包了大括号的mysql注释
7.子模板嵌套
这个是作为菜鸡的我最不能理解的地方,在一个带id的script修改type属性为text/template,然后再通过{@include “#id名” ,data对象的变量名}获得script中写的内容,然后通过juicer(刚刚获取的内容,data对象)进行渲染…总的来讲,我是觉得的很鸡肋,script里面也不能帮我填充tagName啊,这样还不如模板字符串呢,然后最难受的是官方完整栗子里面,做好了所有的子模板嵌套的前置工作,用了个getElementById(‘id名’).innerHTML就拿到东西了,贼难受

juicer模板引擎学习相关推荐

velocity（vm）模板引擎学习介绍及语法
velocity模板引擎学习 velocity与freemaker.jstl并称为java web开发三大标签技术,而且velocity在codeplex上还有.net的移植版本NVelocity,( ...
thymeleaf 获取yml中的值_Thymeleaf模板引擎学习
开发传统Java WEB项目时,我们可以使用JSP页面模板语言,但是在SpringBoot中已经不推荐使用JSP页面进行页面渲染了.从而Thymeleaf提供了一个用于整合Spring MVC的可选模 ...
Freemarker模板---引擎学习
一.简要概述 Freemarker是一款模板引擎,是一种基于模版生成静态文件的通用工具,它是使用纯java编写的,一般用来生成HTML页面. 这段时间学习的主要是嵌套freemarker中的取值表达式 ...
Volecity模板引擎学习笔记一
最近项目中用到了volecity模板,这里做一下笔记,学习中...相比较 FreeMarker 而言,Velocity 更加简单.轻量级,但它的功能却没有 FreeMarker强大. 1,首先结合开发 ...
Freemarker模板引擎学习，生成html里的动态表格，可合并单元格
需求:现有html模板,需动态填充数据,并且包含表格,表格大小不固定,根据数据多少确定表格大小. 解析:两种方案: 1.java代码实现:将模板文件读出为StringBuffer,找到特定位置,循环生 ...
Jinjia2模板引擎学习笔记
Jinjia2 模板引擎形式最简单的Jinjia2模板引擎就是一个包含响应文本的文件. 1渲染模板默认情况下,flask在应用中的templates子目录里面寻找模板. flask提供的rende ...
vue2.x---mustache模板引擎学习记录
mustache模板引擎 1.什么是模板引擎数据变为视图的方法 1.纯Dom法(非常笨拙,没有实战价值) 2.数组join法(曾经非常流行) 3.es6模板字符串法(ES6中新增的`${a}`语法糖 ...
js模板引擎juicer嵌入html元素,juicer模板引擎使用
页面模板 {&each ObjectData as it,index} ${it.UserId}${it.CreateTime} ${it.Explain} {&/each} // 调 ...
Beetl 模板引擎学习
名称链接 Beetl官网 http://ibeetl.com/ Beetl 文档 http://ibeetl.com/guide/#/beetl/ BeetlSQL 文档 http://ibeetl ...

juicer模板引擎学习

juicer

juicer模板引擎学习相关推荐

最新文章

热门文章