art-template模板引擎、ajax
阿新 • • 發佈：2021-10-18
找到 安裝 導航欄，找到下載連結，右鍵下載即可
1： 引入template模板引擎檔案
2： 定義資料
3： 定義模板
4 ：定義模板
5：渲染html結構
<!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>Document</title> 9 <!-- 1 引入template檔案 -->10 <script src="./lib/template-web.js"></script> 11 <script src="./lib/jquery.js"></script> 12 </head> 13 14 <body> 15 <div class="box"></div> 16 <!-- 3 定義模板 --> 17 <!-- 3.1 模板的html必須定義到script標籤中，叫做teplate('模板id'，需要渲染的資料物件) --> 18 <!-- 3.2 給模板新增一個id --> 19 <!-- 3.3 模板裡面如果需要使用到傳入的資料，利用{{}}實現20 例如：{{name}}，那麼就會去找 我們呼叫 template() 函式 第二個引數裡面對應的name屬性的值 --> 21 <!--{{}} 佔位符 --> 22 <script type="text/html" id="temp"> 23 <h2>{{uname}}------{{age}}</h2> 31 </script> 32 <script> 33 // 2 定義資料 物件資料型別 34 var data = { uname: '張三', age: 20} 36 // 4 呼叫template函式 template('模板id',需要渲染的資料物件)37 var templateStr = template('temp', data) 38 console.log(templateStr); 39 // 5 渲染html資料 最後我們需要把template返回的模板字串設定到頁面容器中 40 $('.box').html(templateStr) 41 </script> 42 </body> 43 44 </html>
輸出：
4:過濾器
定義過濾器的基本語法：
示列如下:（請看一、二、三、四標註的示列）
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>Document</title> 9 <!-- 1 引入template模板引擎檔案 --> 10 <script src="../day02/lib/template-web.js"></script> 11 <script src="../day02/lib/jquery.js"></script> 12 </head> 13 14 <body> 15 <div id="container"></div> 16 <!-- 3 定義模板 --> 17 <!-- 3.1 模板的html結構，必須定義到sript中 --> 18 <script type="text/html" id="tpl_user"> 19 <h1>{{name}}----{{age}}</h1> 20 <!-- 一、原文輸出 --> 21 <div>{{@ test }}</div> 22 <!-- 三、選好輸出 each --> 23 <ul> 24 {{each hobby}} 25 <li>索引是：{{$index }},當前迴圈項是：{{$value}}</li> 26 {{/each}} 27 </ul> 28 <!-- 二、if 條件輸出 --> 29 <div> 30 {{if flag===0}} 31 flag的值是0 32 {{else if flag===1}} 33 flag的值是1 34 {{/if}} 35 </div> 36 <!-- 四、過濾器 --> 37 <!-- 四（3）管道操作符 在模板引擎中使用過濾器--> 38 <!-- newTiem 伺服器返回的日期， filterName日期格式化 --> 39 <h3>{{newTime | filterName}}</h3> 40 </script> 41 <script> 42 // 四(2) 定義處理時間的過濾器 43 //形參date，由實參newTime 傳遞過來 44 template.defaults.imports.filterName = function (date) { 45 // console.log(date); 46 // 年 47 var y = date.getFullYear() 48 y = y < 10 ? '0' + y : y; 49 // 月 50 var m = date.getMonth() + 1; 51 m = m < 10 ? '0' + m : m; 52 // 日 53 var d = date.getDate() 54 d = d < 10 ? '0' + d : d; 55 // 時 56 var hh = date.getHours() 57 hh = hh < 10 ? '0' + hh : hh; 58 // 分 59 var mm = date.getMinutes() 60 mm = mm < 10 ? '0' + mm : mm 61 // 秒 62 var ss = date.getSeconds() 63 ss = ss < 10 ? '0' + ss : ss 64 // 星期 65 var arr=['星期日', '星期一', '星期二','星期三', '星期四', '星期五', '星期六',] 66 var day = date.getDay(); 67 68 return `${y}-${m}-${d} ${hh}:${mm}:${ss} ${arr[day]}` 69 } 70 // 2 定義資料 71 // 四(1) 定義資料newTime: new Date() 72 var data = { 73 name: 'zs', age: 30, test: '<h3>原文輸出<h3>', hobby: ['吃飯', '睡覺', '打豆豆'], 74 flag: 1, newTime: new Date() 75 } 76 // 4 呼叫template函式 77 var htmlStr = template('tpl_user', data) 78 console.log(htmlStr); 79 // 5 渲染html結構 80 $('#container').html(htmlStr) 81 82 </script> 83 </body> 84 85 </html>