前端笔记Vue项目day2(十）

 

常用特性应用场景1 过滤器

• Vue.filter  定义一个全局过滤器

• [mw_shl_code=applescript,true] <tr :key='item.id' v-for='item in books'>
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
                       <!-- 1.3  调用过滤器 -->
              <td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td>
              <td>
                <a href="" @click.prevent='toEdit(item.id)'>修改</a>
                <span>|</span>
                <a href="" @click.prevent='deleteBook(item.id)'>删除</a>
              </td>
  </tr>
  
  <script>
              #1.1  Vue.filter  定义一个全局过滤器
              Vue.filter('format', function(value, arg) {
                function dateFormat(date, format) {
                  if (typeof date === "string") {
                    var mts = date.match(/(\/Date\((\d+)\)\/)/);
                    if (mts && mts.length >= 3) {
                      date = parseInt(mts[2]);
                    }
                  }
                  date = new Date(date);
                  if (!date || date.toUTCString() == "Invalid Date") {
                    return "";
                  }
                  var map = {
                    "M": date.getMonth() + 1, //月份 
                    "d": date.getDate(), //日 
                    "h": date.getHours(), //小时 
                    "m": date.getMinutes(), //分 
                    "s": date.getSeconds(), //秒 
                    "q": Math.floor((date.getMonth() + 3) / 3), //季度 
                    "S": date.getMilliseconds() //毫秒 
                  };
                  format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
                    var v = map[t];
                    if (v !== undefined) {
                      if (all.length > 1) {
                        v = '0' + v;
                        v = v.substr(v.length - 2);
                      }
                      return v;
                    } else if (t === 'y') {
                      return (date.getFullYear() + '').substr(4 - all.length);
                    }
                    return all;
                  });
                  return format;
                }
                return dateFormat(value, arg);
              })
  #1.2  提供的数据 包含一个时间戳   为毫秒数
     [{
            id: 1,
            name: '三国演义',
            date: 2525609975000
          },{
            id: 2,
            name: '水浒传',
            date: 2525609975000
          },{
            id: 3,
            name: '红楼梦',
            date: 2525609975000
          },{
            id: 4,
            name: '西游记',
            date: 2525609975000
          }];
  </script>[/mw_shl_code]
• 2 自定义指令

  • 让表单自动获取焦点

  • 通过Vue.directive 自定义指定

  • [mw_shl_code=applescript,true]<!-- 2.2  通过v-自定义属性名 调用自定义指令 -->
    <input type="text" id="id" v-model='id' :disabled="flag" v-focus>
    
    <script>
        # 2.1   通过Vue.directive 自定义指定
            Vue.directive('focus', {
          inserted: function (el) {
            el.focus();
          }
        });
    
    </script>[/mw_shl_code]
  • 3 计算属性

    • 通过计算属性计算图书的总数

      • 图书的总数就是计算数组的长度

      • [mw_shl_code=applescript,true]<div class="total">
                <span>图书总数：</span>
                     <!-- 3.2 在页面上 展示出来 -->
                <span>{{total}}</span>
        </div>
        
          <script type="text/javascript">
            /*
              计算属性与方法的区别:计算属性是基于依赖进行缓存的，而方法不缓存
            */
            var vm = new Vue({
              data: {
                flag: false,
                submitFlag: false,
                id: '',
                name: '',
                books: []
              },
              computed: {
                total: function(){
                  // 3.1  计算图书的总数
                  return this.books.length;
                }
              },
            });
          </script>[/mw_shl_code]
      •