大三寒假学习进度笔记（二）

写在前面

今天主要完成了博客系统门户的主页和友链界面，了解到了vue中的过滤器的知识

vue中的自定义过滤器

官方解释

直接查阅官方文档，可以看到这样的解释：

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示

并给出了一个样例：

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

项目使用

在今天的项目编写中，我遇到了需要格式化时间的情况，由于采用了nuxt.js，是在服务端渲染的，不能使用常规的调用方法的方式来格式化时间，但可以使用过滤器集合nuxt的插件方式来实现。
首先编写一个时间过滤的插件：

import Vue from 'vue'

export function formatDate(dateStr, fmt) {
  let date = new Date(dateStr);
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
  }
  let o = {
    'M+': date.getMonth() + 1,
    'd+': date.getDate(),
    'h+': date.getHours(),
    'm+': date.getMinutes(),
    's+': date.getSeconds()
  };
  for (let k in o) {
    if (new RegExp(`(${k})`).test(fmt)) {
      let str = o[k] + '';
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))
    }
  }
  return fmt
}

function padLeftZero(str) {
  return ('00' + str).substr(str.length)
}

let filters = {
  formatDate
};

Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
});
export default filters

之后在nuxt.config.js里注册插件，注明是服务端渲染：

  plugins: [
    {
      src:'@/plugins/dateformat',
      ssr:true
    }
  ]

然后使用vue中的过滤器写法就可以实现时间的格式化了：

<span class="sob_blog sobicon">
      {{item.blogCreateTime | formatDate("yyyy-MM-dd hh:mm")}}
</span>

这里的语法要解释的话就是，|前面的值会作为|后面的过滤器的参数传入到该方法中，然后返回的结果会直接显示出来

总结

今天主要学习了Vue中的过滤器，然后编写了一些简单的界面。
文中关于nuxt.js的过滤器的部分来自思否论坛的文章：Nuxt.js服务端渲染实践，从开发到部署