前端渲染的三种方式
1、原生的js渲染代码如下：
2、使用前端模板引擎代码如下：
<!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>渲染的三种方式</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/handlebars.js/4.0.6/handlebars.js"></script>
</head>
<body>
<div class="box">
</div>
</body>
<script id="entry-template" type = "text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
</script>
<script type="text/javascript">
// 获取模板里面的内容
var source = $("#entry-template").html();
// 模板渲染
var template = Handlebars.compile(source);
// 定义数据
var context = {title:"哈哈哈哈哈",body:"学习使我开心"};
var html = template(context);
// 将模板装载到dom节点上
$(".box").html(html);
</script>
</html>
3、使用Vue特有的模板语法代码如下：
<!-- <div id="app">{{mess}}</div>
<script text = "javascript">
var str = new Vue({
el:'#app',
data:{
mess:'hellow word'
},
methods:{
}
})
</script> -->
5727
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
