[关闭]
@buluoXu 2015-04-18T08:35:54.000000Z 字数 4462 阅读 1614

前端模板引擎简单介绍

整理： @1棵拼搏的寂静草
模板引擎 vuejs 腾讯artTemplate

vuejs简单介绍

  1.     <div id="demo">
  2.         <p>{{message}}</p>
  3.         <!-- v-model指令只能用在<input>, <select> 或 <textarea> 元素上 -->
  4.         <input v-model="message">
  5.     </div>
  1.     var demo = new Vue({
  2.         el: '#demo',//div的id
  3.         data: {
  4.             message: 'Hello Vue.js!'//json对象数据
  5.         }
  6.     })

demo1.bmp

vuejs常用指令以及demo

  1.     <ul>
  2.         <li v-repeat="user">序号{{$index}} : {{name}} -- {{email}}</li>
  3.     </ul>
  1.     new Vue({
  2.       el: '#demo',
  3.       data: {
  4.         user: [
  5.             {name:'demo',email:'1@ly.com'},
  6.             {name:'demo1',email:'11@ly.com'},
  7.             {name:'demo2',email:'12@ly.com'},
  8.             {name:'demo3',email:'13@ly.com'}
  9.         ]
  10.       }
  11.     })

表单输入demo

  1.     <div id="demo">
  2.       <a v-on="click: onClick">Trigger a handler</a>
  3.       <a v-on="click: n++">Trigger an expression</a>
  4.     </div>
  1. new Vue({
  2.       el: '#demo',
  3.       data: {
  4.         n: 0
  5.       },
  6.       methods: {
  7.         //所有自定义方法都写在methods里面
  8.         onClick: function (e) {
  9.           console.log(e.target.tagName) // "A"
  10.           console.log(e.targetVM === this) // true
  11.         }
  12.       }
  13.     })
  1.     <ul>
  2.         <li v-repeat="user">
  3.             序号{{$index}} : {{name}} -- {{email}}
  4.             <p v-html="color"></p>//不转义
  5.             <p>{{color}}</p>//转义
  6.         </li>
  7.     </ul>
  1.     new Vue({
  2.       el: '#demo',
  3.       data: {
  4.         user: [
  5.             {name:'demo',email:'1@ly.com',color:'<span>我是带标签的文字1</span>'},
  6.             {name:'demo1',email:'11@ly.com',color:'<span>我是带标签的文字2</span>'},
  7.             {name:'demo2',email:'12@ly.com',color:'<span>我是带标签的文字3</span>'},
  8.             {name:'demo3',email:'13@ly.com',color:'<span>我是带标签的文字4</span>'}
  9.         ]
  10.       }
  11.     })
  1.     <div id="demo">
  2.         <ul>
  3.             <li v-repeat="method">
  4.                 {{Name}} -- {{r2Br(OutputMessage)}} -- {{formatValue(Result)}}
  5.             </li>
  6.         </ul>
  7.     </div>
  1. new Vue({//模板引擎渲染
  2.     el: "#demo",
  3.     data: {
  4.        'method': [
  5.            {
  6.                'Id': '2',
  7.                'TestResultId': '22',
  8.                'Name': '喵星人',
  9.                'Result': 1,
  10.                'OutputMessage': '我出错啦！！！！\r\n哈哈哈哈哈哈'
  11.            },
  12.            {
  13.                'Id': '3',
  14.                'TestResultId': '33',
  15.                'Name': '汪星人',
  16.                'Result': 0,
  17.                'OutputMessage': '地方大幅度\r\n姐姐姐姐姐姐姐姐姐姐姐姐姐姐姐姐姐姐\r\n'
  18.            }
  19.        ]
  20.    },//ajax返回的json数据集
  21.     methods: {
  22.         formatValue: function (val) {
  23.             str = "";
  24.             switch (val) {
  25.                 case 0:
  26.                     str = '<label class="label label-danger xx-label">失败</label>';
  27.                     break;
  28.                 case 1:
  29.                     str = '<label class="label label-success xx-label">成功</label>';
  30.                     break;
  31.                 case 2:
  32.                     str = '<label class="label label-warning xx-label">跳过</label>';
  33.                     break;
  34.                 default:
  35.                     break;
  36.             }
  37.             return str;
  38.         },
  39.         r2Br: function (val) {
  40.             return val.replace(/[\r\n]/g, "<br/>");
  41.         }
  42.     }
  43. });
  1. var vm = new Vue({
  2.     el: '#demo',
  3.     data:{
  4.     message: '测试'+ new Date().getTime()
  5.     }
  6. });
  7. setInterval(function () {
  8.     //实时更新数据的关键
  9.     vm.message = '测试'+ new Date().getTime()
  10. }, 1000);
  12. //根据api，里面有一个vm.$data的方法
  13. setInterval(function () {
  14.     //实时更新数据的关键
  15.     vm.$data={
  16.         message: '测试'+ new Date().getTime()
  17.     };
  18.     //vm.message = '测试'+ new Date().getTime();
  19. }, 1000);

腾讯artTemplate简单介绍

  1. <script id="test" type="text/html">
  2.     <h1>{{title}}</h1>
  3.     <ul>
  4.         {{each list as value i}}
  5.             <li>索引 {{i + 1}} ：{{value}}</li>
  6.         {{/each}}
  7.     </ul>
  8. </script>
  1. var data = {
  2.     title: '标签',
  3.     list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
  4. };
  5. var html = template('test', data);
  6. document.getElementById('content').innerHTML = html;

artTemplate常用方法以及demo

  1. <script id="test" type="text/html">
  2.     <ul>
  3.         {{each list as value i}}
  4.             <li>索引 {{i + 1}} ：{{value}}</li>
  5.         {{/each}}
  6.     </ul>
  7. </script>
  1.     var data = {
  2.         list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
  3.     };
  4.     var html = template('test', data);
  5.     document.getElementById('content').innerHTML = html;
  1. <script id="test" type="text/html">
  2.     数据格式化：
  3.     <p class="xxlb">                                                      {{#value.OutputMessage | r2Br}}不转义，只要加上'#'号,就可以将字符串转换成html标签
  4.        {{value.OutputMessage | r2Br}}转义，字符串原样输出
  5.     </p>
  7.     数值替换：
  8.     <p class="xxlb">                                                      {{#value.Result | formatValue}}
  9.     </p>
  11.     带参数方法：
  12.     {{time | dateFormat:'yyyy年 MM月 dd日 hh:mm:ss'}}
  13. </script>
  1. template.helper('formatDate', function (val) {
  2.     return new Date(parseInt(val.replace("/Date(", "").replace("000)/", "")) * 1000).toLocaleString();
  3.  });
  5.  template.helper('r2Br', function (val) {
  6.     return val.replace(/[\r\n]/g, "<br/>");
  7. });
  9.  template.helper('formatValue', function (val) {
  10.     var html = "";
  11.     switch (val) {
  12.         case 0:
  13.             html = '<label class="label label-danger xx-label">失败</label>';
  14.             break;
  15.         case 1:
  16.             html = '<label class="label label-success xx-label">成功</label>';
  17.             break;
  18.         case 2:
  19.             html = '<label class="label label-warning xx-label">跳过</label>';
  20.             break;
  21.         default:
  22.             break;
  23.     }
  24.     return html;
  25. });
  27. template.helper('dateFormat', function (date, format) {
  29.     date = new Date(date);
  31.     var map = {
  32.         "M": date.getMonth() + 1, //月份 
  33.         "d": date.getDate(), //日 
  34.         "h": date.getHours(), //小时 
  35.         "m": date.getMinutes(), //分 
  36.         "s": date.getSeconds(), //秒 
  37.         "q": Math.floor((date.getMonth() + 3) / 3), //季度 
  38.         "S": date.getMilliseconds() //毫秒 
  39.     };
  40.     format = format.replace(/([yMdhmsqS])+/g, function(all, t){
  41.         var v = map[t];
  42.         if(v !== undefined){
  43.             if(all.length > 1){
  44.                 v = '0' + v;
  45.                 v = v.substr(v.length-2);
  46.             }
  47.             return v;
  48.         }
  49.         else if(t === 'y'){
  50.             return (date.getFullYear() + '').substr(4 - all.length);
  51.         }
  52.         return all;
  53.     });
  54.     return format;
  55. });

总结

这里只是展示了常用的功能，若要使用高级功能，请查看各个引擎的官方文档。

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注