过滤器其实在开发过程中用得倒是不多，因为更多时候可以通过计算属性来对数据做一些转换和筛选。这里只是简单提及一下并没有什么可以深究的知识点。
在模板中的用法如下：
<!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | formatId"></div>
在jsx中使用方法为：
<div>{this.$options.filters('formatDate')('2019-07-01')}</div>
注意：由于Vue全局的过滤器只用于模板中，如果需要用于组件的方法中，可以把过滤器方法单独抽离出一个公共Js文件，然后引入组件中，然后用于方法中。
一些简单经验分享
并不是说我们在开发Vue项目的时候一定要使用jsx的方式来写，但是多掌握一种方式来灵活变通，提高工作效率，扩展思路何尝不值得一试。而且，在有些场景下释放js的完全编程能力会让你更加能够得心应手。其实在使用模板方式的时候我们并没有完全采用组件的思维方式来做，或者说是做得不彻底，不纯粹，拆分的粒度不够。更多 的时候并没有考虑到组件怎么切分和抽象，多人协作的时候如何处理依赖并明确自己的功能点。
关于DOM属性、HTML属性和组件属性
在React中所有数据均挂载在props下，Vue则不然，仅属性就有三种：组件属性props，普通html属性attrs和DOM属性domProps。在Angular的文档中关于插值绑定部分是重点说明了DOM属性和HTML属性的区别，在大多数情况下两者都有对应的同名属性，也就是1:1映射关系，但是也有例外的情况，比如HTML中colspan，DOM中的textContent。HTML属性的值指定了初始值，并且不能改变，而DOM属性的值表示当前值，是可以改变的。
然后在Vue的模板语法中是不区分DOM属性和HTML属性的，例如：
<template> <div> <div>输入的值：{{ title }}</div> <input type="text" value="我是DOM属性值" v-model="title" @input="logTitle" /> </div> </template> <script> export default { data() { return { title: '' } }, methods: { logTitle(e) { // 输出DOM属性 console.log(e.target.value) // 输出HTML属性 console.log(e.target.getAttribue('value')) } } } </script>
运行示例可以看到input的初始值被设置为了“我是DOM属性值"，当我们在输入框中添加或者删除文字时，HTML属性始终没有变化，而绑定的DOM值一值在变动。然后再看一下在jsx中的实现：
<div>输入值：{ this.title }</div> <input type="text" value="我是DOM属性" v-model={this.title} onInput={this.logTitle} />
同样运行后会发现在jsx写法中并没有直接将HTML属性初始化为DOM属性值，即输入框中当前值为空字符串，这符合预期的行为。
此外在模板语法中是无法区分HTML属性和DOM属性命名一样的场景，但是在jsx中可以很好的区分：
<Demo title="我是组件属性" domPropsTitle="我是DOM属性" />
结果会就是在HMTL中显示title="我是DOM属性，而"我是组件属性”传递给了组件。
在React中CSS的样式写义在jsx中的语法是以className="xx"的形式，而在Vue的jsx中可以直接写成class="xx"。实际上由于class是Js的保留字，因此在DOM中其属性名为className而在HTML属性中为class，我们可以在Vue中这样写，经过Babel转译后得到正确的样式类名：
<div domPropsClassName="mt__xs"></div>
注意：如果同时写了class="xx" domPropsClassName="yy"那么后者的优先级较高，和位置无关。所以尽量还是采用class的写法。
有使用过Bootstrap经验的可能会注意到它里面包含了很多ARIA属性，这些属性并不属于DOM，在jsx中可以通过attrsXX或者直接aria-xx的方式来添加:
<label aria-label="title"></label> <label attrsAria-label="title"></label>
但是上面的换成domPropsAria-label就没有任何效果。
注意：在jsx中所有DOM属性(Property)语法为domPropsXx, HTML特性(Attribute)语法为attrsXx。更多的时候建议还是少使用，或者说合理使用。
在jsx中还可以使用混用的写法，例如在组件中写了<Demo title="demo" />，还可以定义一个属性对象，然后使用{...props}的方式写在一起，这个时候就会出现属性合并的问题，同样的事件多个地方声明事件处理函数，都会触发。
最后需要提及一点的是，在Vue中当给一个组件传了很多props，但是有的并不是组件声明的，也有可能是一些通用的HTML或者DOM属性，但是在最终编译后的HTML中会直接显示这些props，如果不希望这些属性显示在最终的HTML中，可以在组件中设inheritAttrs: false。虽然不显示了，但是我们依然可以通过vm.$attrs获取所有（除class和style)绑定的属性，包括不在props中定义的。
关于事件
前面已经把事件相关的知识点都介绍了，这里主要是提及一下关于jsx事件绑定语法onXx和组件属性（主要是函数prop)以on开头的情况如何处理。