JsRender知识点

最新推荐文章于 2024-03-14 11:53:57 发布
最新推荐文章于 2024-03-14 11:53:57 发布
阅读量3.5k 收藏 20
点赞数 21
分类专栏： JQuery 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41703489/article/details/127146478
版权

一、 引用

JsRender是建立在JQuery之上，所以必须先引用JQuery，再引用JsRender。

<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</tile>
		<script src="lib/jquery-3.4.1.min.js"></script>
		<script src="lib/jsrender.min.js"></script>
	</head>
	
	<body>
	</body>
</html>

二、 数据渲染

将数据渲染进标签模板中，然后再将结果添加进网页。
注意：标签模板的type类型必须为text/template

<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</tile>
		<script src="lib/jquery-3.4.1.min.js"></script>
		<script src="lib/jsrender.min.js"></script>
	</head>
	
	<body>
		<div>
		</div>
		<script id="test" type="text/template">
			<p>
				{{:userName}}的年龄是{{:age}}
			</p>
		</script>

		<script>
			var data = [
				{userName:“”, aget:18},
				{userName:“”, aget:18},
				{userName:“”, aget:18},
			];
			
			var resData = $("#test").render(data); // 将数据与标签模板绑定
			$("div").append(resData); // 将绑定后的结果写入页面中
			
			console.log(resData); // 查看resData生成了什么
		</script>
	</body>
</html>

三、 赋值方式

1、{{:对象的属性名}}
这种赋值方式，如果属性值里面包含html标签，则标签效果会被渲染出来。

2、{{>对象的属性名}}
这种赋值方式，如果属性值里面包含html标签，则会直接输出文本，不会产生标签效果

四、 条件渲染

根据条件进行有选择的渲染；
注意在jsrender中没有else if的用法，如果需要else if，直接在else 后面加判断表达式。

<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</tile>
		<script src="lib/jquery-3.4.1.min.js"></script>
		<script src="lib/jsrender.min.js"></script>
	</head>
	
	<body>
		<div>
		</div>
		<script id="test" type="text/template">
			{{if isShow==true}} //条件渲染
				<p>{{:userName}}的年龄是{{:age}}</p>
			{{else}} // 注意没有else if，如果需要else if，直接在else 后面加判断表达式
				<p><b>{{:userName}}的年龄是{{:age}}</b></p>
			{{/if}}
		</script>
	<script>
			var data = [
				{userName:“”, aget:18, isShow:false}, // 利用if条件渲染，将其加粗
				{userName:“”, aget:18, isShow:true},
				{userName:“”, aget:18, isShow:true},
			];
			
			var resData = $("#test").render(data); // 将数据与标签模板绑定
			$("div").append(resData); // 将绑定后的结果写入页面中
			
			console.log(resData); // 查看resData生成了什么
		</script>
	</body>
</html>

五、 循环渲染

可以对数组进行循环渲染，也可以对绑定对象的数组属性或对象数组进行渲染。如果绑定对象的某个属性是数组，不使用循环渲染，数组会按字符串一次性渲染出来；使用循环渲染，数组会分几次被渲染出来。

1、 普通数组循环渲染

<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</tile>
		<script src="lib/jquery-3.4.1.min.js"></script>
		<script src="lib/jsrender.min.js"></script>
	</head>
	
	<body>
		<div>
		</div>
		<script id="test" type="text/template">
			<p>{{:userName}}</p>
			
			{{for nums}} // 指定循环的是哪个成员属性
				<p>{{:#data}}的序号是{{:#index}}</p> // #data表示每次循环中的项，#index表示数组索引的下标；#index也可以写成{{:#getIndex()}}
			{{/for}}
		</script>
		
		<script>
			var data = [
				{userName:“张三”, aget:18, num:[1,2,3,4,5,6]},
				{userName:“李四”, aget:15, num:[1,2,3,4,5,6]},
				{userName:“王五”, aget:11, num:[1,2,3,4,5,6]},
			];
			
			var resData = $("#test").render(data); // 将数据与标签模板绑定
			$("div").append(resData); // 将绑定后的结果写入页面中
			
			console.log(resData); // 查看resData生成了什么
		</script>
	</body>
</html>

2、 对象循环渲染

<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</tile>
		<script src="lib/jquery-3.4.1.min.js"></script>
		<script src="lib/jsrender.min.js"></script>
	</head>
	
	<body>
		<div>
		</div>
		<script id="test" type="text/template">
			<p>{{:name}}</p>
			
			{{for nums}} // 指定循环的是哪个成员属性
				<p>{{:#data}}的序号是{{:#index}}</p> // #data表示每次循环中的项，#index表示数组索引的下标；#index也可以写成{{:#getIndex()}}
			{{/for}}

			{{for users}}
				<p>{{:userName}}</p> // 此处循环调用每项数据的usesrName属性可使用{{:#data.userName}}，但可以略写为{{:usesrName}}
			{{/for}}
		</script>
		
		<script>
			var data = [
				{
					name:"张三",
					isShow:true,
					nums:[1,2,3,4,5,6],
					users:[
						{userName:"ACE", age:18},
						{userName:"Taro", age:16},
					]
				},
			]
			
			var resData = $("#test").render(data); // 将数据与标签模板绑定
			$("div").append(resData); // 将绑定后的结果写入页面中
			
			console.log(resData); // 查看resData生成了什么
		</script>
	</body>
</html>

3、 属性名称循环渲染

通过props包裹，可以将属性名称和属性值都进行渲染：

<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</tile>
		<script src="lib/jquery-3.4.1.min.js"></script>
		<script src="lib/jsrender.min.js"></script>
	</head>
	
	<body>
		<div>
		</div>
		<script id="test" type="text/template">
			<p>{{:user.userName}}</p>
			<p>{{:user.age}}</p>
			{{for user}}
				{{props #data}}
					<p>{{:key}}</p> //渲染出属性名称
					<p>{{:prop}}</p> //渲染出属性值
				{{/props}}
			{{/for}}
		</script>
		
		<script>
			var data = [
				{
					name:"张三",
					isShow:true,
					nums:[1,2,3,4,5,6],
					user:{userName:"Taro", age:16}
				},
			]
			
			var resData = $("#test").render(data); // 将数据与标签模板绑定
			$("div").append(resData); // 将绑定后的结果写入页面中
			
			console.log(resData); // 查看resData生成了什么
		</script>
	</body>
</html>

4、 循环渲染对上级属性的引用

循环渲染中的{{:#data}}始终表示最近的for循环中的子项；如果循环中需要调用上级的属性值，可以在for语句中通过~标识符进行赋值，让其在for循环中使用。

<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</tile>
		<script src="lib/jquery-3.4.1.min.js"></script>
		<script src="lib/jsrender.min.js"></script>
	</head>
	
	<body>
		<div>
		</div>
		<script id="test" type="text/template">
			<p>{{:name}}</p>
			{{for nums}}
				<p>{{:#data}}的序号{{:#index}}，还有第二种下标号写法{{:#getIndex()}}</p>
			{{/for}}
			
			{{for users ~pName=name ~pIsShow=isShow}} // 将上级属性值赋值到for循环中被使用
				<p>{{:userName}}</p>
				<p>{{:~pName}}的显示为{{:~pIsShow}}</p> // 使用在for语句赋值的变量，这些变量都是上级属性值
			{{/for}}
		</script>
		
		<script>
			var data = [
				{
					name:"张三",
					isShow:true,
					nums:[1,2,3,4,5,6],
					users:[
						{userName:"ACE", age:18},
						{userName:"Taro", age:16},
					]
				},
			]
			
			var resData = $("#test").render(data); // 将数据与标签模板绑定
			$("div").append(resData); // 将绑定后的结果写入页面中
			
			console.log(resData); // 查看resData生成了什么
		</script>
	</body>
</html>

六、 模板嵌套

在模板嵌套中，如果主模板不传入任何参数给子模板，则子模板直接接收主模板绑定的整个对象

1、for循环模板嵌套

子模板和数组数据绑定，嵌套进主模板，依次渲染若干子模板嵌套进主模板。

<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</tile>
		<script src="lib/jquery-3.4.1.min.js"></script>
		<script src="lib/jsrender.min.js"></script>
	</head>
	
	<body>
		<div>
		</div>
		<!-- 主模板 -->
		<script id="mainTemp" type="text/template">
			<p>this is mainTemp</p>
			<p>{{:name}}</p>
			{{for arrays tmpl="#childTemp" /}} // 将绑定数据的array属性里面的数据，按每条数据一个子模板，嵌套进主模板
		</script>
		
		<!-- 子模板 -->
		<script id="childTemp" type="text/template">
			<p>this is childTemp</p>
			<p>{{:#data}}</p>
		</script>		

		<script>
			var data ={
					name:"张三",
					arrays:[1,2,3,4,5,6]
				}

			$("div").append($("#mainTemp").render(data)); // 将绑定后的结果写入页面中
		</script>
	</body>
</html>

2、if条件模板嵌套

根据绑定数据的属性判断，是否将子模板对应绑定的数据渲染进主模板

<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</tile>
		<script src="lib/jquery-3.4.1.min.js"></script>
		<script src="lib/jsrender.min.js"></script>
	</head>
	
	<body>
		<div>
		</div>
		<!-- 主模板 -->
		<script id="mainTemp" type="text/template">
			<p>this is mainTemp</p>
			<p>{{:name}}</p>
			
			// isShow是判断表达式；array name是传进子模板的参数；tmpl是调用子模板的关键字
			{{if isShow arrays name tmpl="#childTemp" }} 
			{{else arrays name tmpl="#childTemp2"}}
			{{/if}}
		</script>
		
		<!-- 子模板1 -->
		<script id="childTemp1" type="text/template">
			<p>this is childTemp1</p>
			<p>{{:name}} 1</p>

			// 如果if语句给子模板的参数为数组，在子模板中需要使用for循环进行遍历解析
			{{for arrays}}
				<p>{{:#data}}</p>
			{{/for}}
		</script>		

		<!-- 子模板2 -->
		<script id="childTemp2" type="text/template">
			<p>this is childTemp2</p>
			<p>{{:name}} 2</p>

			// 如果if语句给子模板的参数为数组，在子模板中需要使用for循环进行遍历解析
			{{for arrays}}
				<p>{{:#data}}</p>
			{{/for}}
		</script>	

		<script>
			var data ={
					name:"张三",
					arrays:[1,2,3,4,5,6],
					isShow:true
				}

			$("div").append($("#mainTemp").render(data)); // 将绑定后的结果写入页面中
		</script>
	</body>
</html>

3、include模板嵌套

根据绑定数据的属性判断，是否将子模板对应绑定的数据渲染进主模板

<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</tile>
		<script src="lib/jquery-3.4.1.min.js"></script>
		<script src="lib/jsrender.min.js"></script>
	</head>
	
	<body>
		<div>
		</div>
		<!-- 主模板 -->
		<script id="mainTemp" type="text/template">
			<p>this is mainTemp</p>
			<p>{{:name}}</p>
			{{include arrays tmpl="#childTemp" /}} // 如果不申明传入的对象，则直接传入主模板绑定的对象data
		</script>
		
		<!-- 子模板 -->
		<script id="childTemp" type="text/template">
			<p>this is childTemp1</p>
			{{for}} // 由于只传入数组arrays，所以无需在for中申明被循环的对象
				<p>{{:#data}}</p>
			{{/for}}
		</script>		
		
		<script>
			var data ={
					name:"张三",
					arrays:[1,2,3,4,5,6],
					isShow:true
				}

			$("div").append($("#mainTemp").render(data)); // 将绑定后的结果写入页面中
		</script>
	</body>
</html>

七、 converters格式转换

将指定的数据，按照自定义的要求显示出来

<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</tile>
		<script src="lib/jquery-3.4.1.min.js"></script>
		<script src="lib/jsrender.min.js"></script>
	</head>
	
	<body>
		<div>
		</div>
		<script id="mainTemp" type="text/template">
			{{money:price}}
		</script>	
		
		<script>
			// converters格式转换，类似VUE里面的filter
			var data ={
					price:10
				}

			$.views.converters({
				money:function(value){
					return value.toFixed(2); // js函数，指定小数点显示
				},
				addMoney:function(value){ // converters可以添加多个格式化过滤器；注意格式化过滤器直接不能相互内部调用
					return value+10;
				}
			})
			$("div").append($("#test").render(data)); // 将绑定后的结果写入页面中
		</script>
	</body>
</html>

八、 helpers

将指定的数据，按照自定义的要求显示出来。与converters的区别：converters只能带入一个参数返回结果；helper可以带入2个参数返回结果。

<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</tile>
		<script src="lib/jquery-3.4.1.min.js"></script>
		<script src="lib/jsrender.min.js"></script>
	</head>
	
	<body>
		<div>
		</div>
		<script id="mainTemp" type="text/template">
			{{:~plus(price,count)}}
		</script>	
		
		<script>
			var data ={
					price:10,
					count:6
				}

			$.views.helpers({
				plus(price,count){
					return price*count;
				}
			})
			
			$("div").append($("#test").render(data)); // 将绑定后的结果写入页面中
		</script>
	</body>
</html>

九、templates模板渲染

可以在templates中实现converters和helpers的功能。

<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</tile>
		<script src="lib/jquery-3.4.1.min.js"></script>
		<script src="lib/jsrender.min.js"></script>
	</head>
	
	<body>
		<div>
		</div>
		<script id="test" type="text/template">
			<p>{{money:price}}</p>
			<p>{{:～plus(price,count)}}</p>
		</script>	
		
		<script>
			var goods ={
					price:10,
					count:6
				}

			$.templates("testTemp",{ // testTmep是模板的名字
				markup:"#test", // test是模板对应的标签id
				converters:{
					money:function(value){
						return value.toFixed(2);
					}
				},
				helpers:{
					plus(price,count){
						return price * count;
					}
				}
			});
			
			var reshtml = $.render.testTemp(goods); // 将数据放入模板中产生html
			$("div").html(reshtml);
		</script>
	</body>
</html>

十、内置API

1、注册模板

1.1 字符串转模板（方法一）

<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</tile>
		<script src="lib/jquery-3.4.1.min.js"></script>
		<script src="lib/jsrender.min.js"></script>
	</head>
	
	<body>
		<div>
		</div>
				
		<script>
			var data = {name:"Ace"};
			
			var myTemp = $.templates("<div>{{:name}}</div>"); //没有模板脚本，直接字符串生成模板
			var reshtml = myTemp.render(data);
			
			$("div").html(reshtml);
		</script>
	</body>
</html>

1.2 字符串转模板（方法二）

<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</tile>
		<script src="lib/jquery-3.4.1.min.js"></script>
		<script src="lib/jsrender.min.js"></script>
	</head>
	
	<body>
		<div>
		</div>
				
		<script>
			var data = {name:"Ace"};
			
			$.templates("myTemp", "<div>{{:name}}</div>"); //没有模板脚本，直接字符串生成模板
			var reshtml = $.render.myTemp(data);
			
			$("div").html(reshtml);
		</script>
	</body>
</html>

1.3 多模板注册

<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</tile>
		<script src="lib/jquery-3.4.1.min.js"></script>
		<script src="lib/jsrender.min.js"></script>
	</head>
	
	<body>
		<div>
		</div>
				
		<script>
			var data = {name:"Ace"};
			
			$.templates("myTemp1", "<div>111{{:name}}</div>"); 
			$.templates("myTemp2", "<div>222{{:name}}</div>"); 
			var reshtml1 = $.render.myTemp1(data);
			var reshtml2 = $.render.myTemp2(data);
			
			$("div").html(reshtml1).append(reshtml2);
		</script>
	</body>
</html>

1.4 自定义标签

this.tagCtx可以获取所有绑定的属性和传入的参数
A. 由方法传入的自定义标签
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</tile>
		<script src="lib/jquery-3.4.1.min.js"></script>
		<script src="lib/jsrender.min.js"></script>
	</head>
	
	<body>
		<div>
		</div>
		<script id="test" type="text/template">
			{{myTag name age isSayHello=true /}} //myTag自定义标签；name age绑定属性;isSayHello传入参数
		</script>
				
		<script>
			var data = {
				name:"Ace",
				age:18
			};
			
			$.views.tags("myTag",function(){
				console.log(this.tagCtx);
				
				if(this.tagCtx.props.isSayHello){
					return "<h3>${this.tagCtx.args[0]} say hello.</h3>";
				}else{
					return "<h3>${this.tagCtx.args[0]} say Bye.</h3>";
				}
			});
			
			$("div").append($("#test").render(data));
		</script>
	</body>
</html>
B. 由模板传入的自定义标签
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</tile>
		<script src="lib/jquery-3.4.1.min.js"></script>
		<script src="lib/jsrender.min.js"></script>
	</head>
	
	<body>
		<div>
		</div>
		<script id="test" type="text/template">
			{{myTag name age isSayHello=true}} //myTag自定义标签；name age绑定属性;isSayHello传入参数
				<h1>hi ace!</h1>
				<h2>{{:~tag.tagCtx.props.isSayHello}}</h2>
				<h2>{{:~tag.tagCtx.arg[0]}}______{{:~tag.tagCtx.args[1]}}</h2>
			{{/myTag}}
		</script>
				
		<script>
			var data = {
				name:"Ace",
				age:18
			};
			
			$.views.tags("myTag",{
				template:"
					<p>
						{{:~tag.tagCtx.content /}} //test模板里面的内容会被嵌套在这里被调用
					</p>
				"
			});
			
			$("div").append($("#test").render(data));
		</script>
	</body>
</html>
C. 由方法和模板传入的自定义标签
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</tile>
		<script src="lib/jquery-3.4.1.min.js"></script>
		<script src="lib/jsrender.min.js"></script>
	</head>
	
	<body>
		<div>
		</div>
		<script id="test" type="text/template">
			{{myTag name age isSayHello=true /}} //myTag自定义标签；name age绑定属性;isSayHello传入参数
		</script>
				
		<script>
			var data = {
				name:"Ace",
				age:18
			};
			
			$.views.tags("myTag",{
				render:function(){
					// 对模板中传入的参数做判断
					if(this.tagCtx.props,isSayHello){
						return "<h3>${this.tagCtx.args[0]} say hello.</h3>";
					}else{
						// this.tagCtx.render()调用template属性，传入对象{aceSay:"Hello Monster"}，此处返回的字符串是:<h2>Hello Monster </h2> <h3> hahaha </h3>
						return this.tagCtx.render({aceSay:"Hello Monster"}) + " <h3> hahaha </h3>";
					}
				},
				template:"
					<h2>{{:aceSay}}</h2> 
				" // template被this.tagCtx.render()调用，获取传入的对象，将其属性aceSay值代入运算，此时aceSay的值是Hello Monster
			});
			
			$("div").append($("#test").render(data));
		</script>
	</body>
</html>
嘉州子
关注
  • 21
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JsRender实用入门教程
01-19
本文是一篇JsRender的实用入门教程，实例讲述了tag else使用、循环嵌套访问父级数据等知识点。分享给大家供大家参考。具体如下： 前言 JsRender是一款基于jQuery的JavaScript模版引擎，它具有如下特点：  · 简单...
前端渲染利器——JsRender入门
weixin_33743703的博客
09-20 385
JsRender不少前端人员应该都用过，它是一个比较强大的模板，不牵涉太多技术依赖，使用起来非常舒服。我本人在前端开发中使用React之前，都是用的它了（实际上我感觉React没有JsViewes好用）。不管怎么说，先来学习下JsRender技术吧，如果前端的开发环境比较单纯，还是很适合的。 一、JsRender特性 新一代的前端渲染模板 使用模...
Vue.js中的Render函数和模板语法
IT徐师兄
06-08 2084
在Vue.js中，模板语法和render函数是两种不同的方式来定义组件。模板语法是基于HTML的，可以更加直观地表达组件的结构和行为；而render函数是基于JavaScript的，可以更加灵活地定义组件的结构和行为。使用keep-alive组件可以缓存动态组件或者路由视图，避免频繁地创建和销毁，从而提高应用程序的性能。
JsRender (js模板引擎)
极客神殿
10-29 2291
最近学习了一下Jsrender模板渲染工具，非常不错，功能比较强大，官网说他是“简单直观 功能强大 可扩展的 快如闪电”确实如此。总结一下！！ jsRender 三个最重要的概念：模板、容器和数据。 最重要的是：view(视图) 是我们定义的模板，上下文是视图所用的对象。 一、基础。 {{:}} 和 {{>}}(或{{html:}})两者都可以输出内容，不过后者是经过html编码的。 {{: pathOrExpr}} (value) 值类型 {{> pathOrExp
Vue.js进阶 render函数的妙用
baidu_33164415的博客
01-07 657
Vue.js进阶 render函数的妙用
前端模板引擎(jQuery模板)jsrender的基本教程
张木期的博客
05-22 2290
jsrender官网号称简单直观、强大轻快可扩展。压缩体积也只有8.9kb，可以单独在浏览器或node中使用，也可以配合jQuery使用。 jsrender使用 {{}} 来做分界，如果{{}}与你现有的模板引擎冲突你可以使用api来自定义，比如： $.views.settings.delimiters("<%", “%>”); //原本 {{:name}} //修改后 <%:n...
main.js 中的 render函数
qq_40792800的博客
11-16 804
至于为啥 脚手架会引入一个 运行时的 Vue 而不是 使用一个完整版的Vue，这是因为，当我们开发完毕之后，通过webpack打包之后，生成的都是可以直接让浏览器识别的 html、js、css文件，不需要 模板编译器这玩意，在打包的时候也可以节省一点 Vue 包的体积。说成大白话就是，我们现在使用的 Vue 是阉割版的，不包含模板编译器，这是因为 vue-cli 在搭建项目的时候，用的就是不带编译模板的Vue.js。在同一个目录下，找到 Vue.js 这个就是最完整的 Vue，包含了Vue 的所有功能。
Vue之前知识点巩固(扩展运算符,数组,箭头函数,.rar
05-28
beforecreate : 完成实例初始化，初始化非响应式变量 ...能找到对应的template,并编译成render函数 mounted 完成创建vm.$el，和双向绑定， 完成挂载DOM 和渲染;可在mounted钩子对挂载的dom进行操作
iview table render集成switch开关的实例
08-27
知识点2:iView Table Render的render函数 iView Table Render的render函数是一个关键的配置项，用于定义表格的列和数据。render函数可以返回一个包含多个列的数组，每个列可以包含多个单元格。render函数还可以使用...
WEB前端面试——常见CSS知识点
06-30
WEB前端面试——常见CSS知识点 CSS是一种标记语言，用于描述网页的样式和布局。以下是常见的CSS知识点： 一、CSS盒子模型 CSS盒子模型分为标准盒模型（content-box）和怪异盒模型（border-box）。标准盒模型的...
JsRender.zip(jsrender.js和jsrender.min.js合集)
07-29
JsRender.zip(jsrender.js和jsrender.min.js合集)
91道js面试题，附必过答案.pdf
08-05
JavaScript 基础知识点总结 本文档总结了 JavaScript 的基础知识点，涵盖 JavaScript 的组成、基本数据类型、内置对象、编写规范、性能优化、浏览器渲染过程、DOM 树和渲染树的区别、重绘和回流的区别和关系等方面...
jQuery模板引擎: jQuery-tmpl 和 JsRender 使用介绍
carcarrot的博客
05-30 1137
jQuery模板引擎: jQuery-tmpl 和 JsRender 使用介绍
jsrender的基本使用
热门推荐
Henry_Lin_Wind的博客
08-22 1万+
1、什么是jsrender 一个JavaScript库，允许您定义一次样板结构并重复使用它来动态生成HTML。JsRender为HTML5开发带来了一个新的模板库，它具有无代码标记语法和高性能，不依赖于jQuery，也不依赖于文档对象模型（DOM），支持创建自定义函数并使用纯粹的基于字符串的渲染。 更详细的学习资料可参考专栏：https://msdn.microsoft.com/en-a...
JavaScript模板引擎 - jsRender
最新发布
gitblog_00035的博客
03-14 325
探索 jsrender：一个强大的 JavaScript 模板引擎 https://gitcode.com/BorisMoore/jsrender?utm_source=artical_gitcode 在开发 Web 应用程序时，我们经常需要动态渲染 HTML 内容。这时，一个功能强大且易于使用的模板引擎就显得尤为重要。今天，我们将向您介绍一个优秀的 JavaScript 模板引擎——jsrend...
模板引擎jsrender的简单入门
qq_27009517的博客
07-28 1774
一、jsrender的简单介绍 jsrender是一个JS库，允许您定义一次样板结构并重复使用它来动态生成HTML。JsRender为HTML5开发带来了一个新的模板库，它具有无代码标记语法和高性能，支持创建自定义函数并使用纯粹的基于字符串的渲染。官网说他是“简单直观 功能强大 可扩展的 快如闪电”确实如此。 jsRender 的主要概念：模板、容器和数据。 优先使用场景：元素重复出现；动态加载数据，并前端显示； 官方网站 ：https://www.jsviews.com/#jsrender 二：基本语法，
uniapp中使用render.js进行openlayers、arcgis等地图操作
happy81997的博客
11-17 4544
uniapp中使用render.js进行openers、arcgis等地图操作。
js render 函数
weixin_40802058的博客
09-10 1万+
render()  渲染    /'rendə/ &lt;div id="example"&gt;&lt;/div&gt; 在此 div 中的所有内容都将由 React DOM 来管理，所以我们将其称之为 "根" DOM 节点。
jquery、jsrender介绍
07-12
jsRender使用类似于Mustache的语法，通过{{}}标记来表示模板中的数据绑定和逻辑处理。 使用jsRender，您可以通过定义模板和提供数据，将数据动态地渲染到HTML页面中。它支持条件语句、循环语句、过滤器等功能，使您...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值