一个将 Vue HTML 编译为 JavaScript 的工具（有助于 Debug 和理解 Vue）

https://vuejs-tips.github.io/compiler

v-model 在编译之后会变成这样：

参考 fullName 这个变量

但如果我像这样使用 <input type="checkbox" v-model="fullName"> 多选框，它会编译成这样：

深入学习 Vue 是如何把 HTML 编译成 JavaScript有助于让你了解上述情况的原理。

有一天，有人问我为什么不可以创建像这样的 debounce 过滤器 <input @input="submit | debounce(500)">

在你看到这编译后的 javascript 代码后你就会知道为什么这过滤器是不可能实现的：

Vue 并不了解这过滤器的语法。

为了能够理解它和其它的指令，我创建了这个工具可实时把 html 编译成 javascript：

https://vuejs-tips.github.io/compiler

你可以输入自定义的 html ，或者从旁边菜单中选择标签。

例如，可以查看 v-for 是如何编译成 javascript的。

本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

原文地址：https://medium.com/vuejs-tips/vue-html-t...

译文地址：https://learnku.com/vuejs/t/23284/a-tool...