157.Vue实现个人博客（五）【Vue2.0-实现展示博客页面的搜索功能】 2019.03.14

0、知识点

• 过滤器filter
• 全局过滤器
• 局部过滤器
• 博客页面搜索功能实现

1、过滤器的介绍

• 在Vue中使用过滤器（Filters）来渲染数据是一种很有趣的方式。

• 首先我们要知道，Vue中的过滤器不能替代Vue中的methods、computed或者watch，

• 过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本。

• 在很多不同的情况下，过滤器都是有用的，比如尽可能保持API响应的干净，并在前端处理数据的格式。

• 在你希望避免重复和连接的情况下，它们也可以有效地封装成可重用代码块背后的所有逻辑。

• 在Vue 2.0中已经没有内置的过滤器了，我们可以自定义过滤器。2.0之前有。

2、定义和使用过滤器

2.1 全局过滤器：

• 概念：你可以跨所有组件访问全局过滤器，而本地过滤器只允许你在其定义的组件内部使用

• 示例：

注册一个全局过滤器，其作用就是在价格前面加上美元符号

// 声明一个全局的过滤器
 Vue.filter('toUSD',function (value){ 
     return `$${value}` 
  }) 
// 在模板中这样使用文本插值的使用方式 
  <div id="app">
      <h1>{{ price | toUSD}}</h1> 
  </div>

2.2 本地过滤器

示例：
这个过滤器的功能是将字母变成大写

let app = new Vue({ 
    el: '#app', 
    data () { 
        return { name: 'w3cplus.com' }
    }, 
   // 声明一个本地的过滤器 
   filters: { 
      Upper: function (value) {
            return value.toUpperCase() 
       } 
    } 
}) 
<div id="app"> 
      <h1>{{ name | Upper }}</h1> 
</div>

2.3 过滤器使用

过滤器使用在两个地方：双花括号插值 和 v-bind 表达式 中。
过滤器应该被添加在js表达式的尾部，由管道 | 符号指示

// 双花括号中
{{ message | capitalize }}

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

3、过滤器串联 |

//  message 的值将作为 参数 传入到函数 filterA 中，然后再将  filterA  的结果作为 参数 传递到  filterB  中

{{ message | filterA | filterB }}

4、接收多个参数的过滤器

//  filterA  被定义为接收三个参数的过滤器，其中 message、arg1、arg2作为表达式的三个参数

{{ message | filterA(arg1, arg2) }}

5、实现博客页面的搜索功能

#ShowBlog.vue

// 使用过滤器，在管道pipe后面将标题内容全部大写
<h2 v-rainbow>
    {{blog.title | to-uppercase}}
</h2>


// 使用过滤器，将body内容展示的短一些，当进入详情时才可以看得见全部
<article>
     {{blog.body | snippet}}
</article>


// 设置一个搜索框
<input type="text" v-model="search" placeholder="搜索">


// 使用v-for遍历 filteredBlogs里面的所有内容·
<div v-for="blog in filteredBlogs" class="single-blog">



export default {
  name: 'show-blogs',
  data(){
  	return {
  		blogs:[], // 空的blog数组
  		search:""  // 定义一个search方法
  	}
  },

// 在vue中，如果有任何东西发生改变时，使用computed计算这些变化
 computed:{
  	filteredBlogs:function(){ // 设定一个方法，filteredBlogs
  		return this.blogs.filter((blog) =>{  // 箭头函数=>, 使用ES6数组的过滤filter（）方法，将input框中输入的数据与blog的内容进行匹配，然后进行过滤
  			return blog.title.match(this.search);// 返回与search相匹配到的title内容
  		})
  	}
  }


// 在vue中，指令与组件都是全局的，但是如果希望使用局部（本地）的指令，可以注册filters、directives这样的局部API使用
  filters:{
  	// "to-uppercase":function(value){
  	// 	return value.toUpperCase();
  	// }
  	toUppercase(value){ //ES6的新语法，去掉双引号、冒号、function
  		return value.toUpperCase();
  	}
  },  // 在vue中，若要实现一个新的方法，在上一个的方法后面写一个逗号即可
  
  directives:{
  	'rainbow':{
  		bind(el,binding,vnode){
  			// el.style.color = "#" + Math.random().toString(16).slice(2,8);
  		}
  	}
  }

main.js

// 自定义过滤器和实现，将字母全部大写展示
Vue.filter("to-uppercase",function(value){
	return value.toUpperCase();
})

// 自定义过滤器和实现，将内容变短展示，内容结尾跟...
Vue.filter("snippet",function(value){
	return value.slice(0,100) + "...";
})