我们在文本框中增加了一个 {{msg|toUpper(true)}} 写法，细心朋友能发下后面的toUpper就是我们刚才定义的过滤器的方法，传递了一个参数true，然后看下效果图：
通过使用不同参数的filter的对比，能看出我们过滤器在此实例中的效果，这里注意的是在msg后面直接使用‘|'隔开就可以增加我们定义的过滤器了，如果多个以此类推使用‘|'追加隔开就行了，还有就是我们定义的 toUpper: function (val, isUpper) 方法中有两个参数，第一个参数就是绑定的msg本身，第二个参数才是我们需要手动传递的，这个一定要分开；时间不多了，这里就不再讲解其他的常用的特性和属性了，直接来看下面vue使用webapi的数据体现的一个例子；
» WebApi + Vue.js 示例
首先，这里用到了Vue提供的组件概念component，她和js变量一样有全局和局部（私有）两种，代码方面差距不是很大效果也一样，这里我们用到的是局部方式来定义一个组件，下面先来看整体代码：
var blogApp = new Vue({ el: "#divBlogs", data: { blogs: [] }, methods: { getBlogs: function () { var that = this; $.getJSON("http://www.lovexins.com:1001/api/values?task=2", function (result) { if (!result) { return; } that.blogs = result; }); } }, components: { "div-blog": { props: ["item"], template: '<div>' + ' <h4>' + ' <a v-bind:href="item.Url" target="_blank">{{item.Title | toUpperOrLower(false)}}</a>' + ' </h4>' + ' <p>' + ' {{item.Des}}' + ' </p>' + ' <hr />' + ' <h5>' + ' 作者：<a v-bind:href="item.BlogUrl" target="_blank">{{item.NickName}}</a> 发布时间：<code>{{item.CreateTime}}</code> 推荐：<code>{{item.ZanNum}}</code> 阅读：<code>{{item.ReadNum}}</code> 评论：<code>{{item.CommiteNum}}</code>' + ' </h5>' + ' </div>', filters: { toUpperOrLower: function (val, isUpper) { if (!val) { return ""; } return isUpper ? val.toUpperCase() : val.toLowerCase(); } } } } });
这里定义的格式和上面第一小节使用到的差不多，只是多了一个components的定义，这个就是组件的关键字，咋们来逐一分析下代码步骤；
1. blogs: []是我们定义的一个博客信息数组
2. methods属性中getBlogs方法用到了一段 var that = this; 这样的代码，这里的this是上面创建的 var blogApp = new Vue() 对象，她可以直接使用data中定义的博客数据数组blogs，因此有了下面通过jquery的getJSON获取webapi数据后，直接赋值给博客数组bolgs
3. components组件中自定义了一个名为“div-blog”的组件，参数名称是props定义的item；template是对应的模板，里面可以直接使用item来获取对应的参数值；
4. 这里也定义了一个filters，同样是转大小写的，写法可以忽略了，主要注意的地方这里局部的定义的主键里面使用filters的时候也同样是 {{item.Title | toUpperOrLower(false)}} 格式
好了通过上面总结注意点，咋们再来看下怎么在html中使用这个自定义的组件呢，如下整体html代码：
<div> <div> <button v-on:click="getBlogs">查 询</button> <div-blog v-for="blog in blogs" v-bind:item="blog"></div-blog> <div> <img title="返 回" src="https://121.42.208.152/images/top.png"> </div> </div> </div>
引用自定义组件的代码就一句：
<div-blog v-for="blog in blogs" v-bind:item="blog"></div-blog>
这里的div-blog就是对应上面总结的第3点说的，自定义主键名称，需要注意的是如果自定义组件名称格式如divBlog(驼峰格式)，那么我们在html中使用格式就必须是div-Blog，通过‘-'分割开来，这个细节特别要注意不然页面不会有效果，好了说了这么多来看下运行的效果图：
