准备

本项目代码已托管在Github

代码分析

<div id="editor">
    <textarea :value="input" @input="update"></textarea>
    <div v-html="compiledMarkdown"></div>
</div>

    <script>
            new Vue({
                el: '#editor',
                data: {
                    input: '# hello'
                },
                computed: {
                    compiledMarkdown: function () {
                        return marked(this.input, { sanitize: true })
                    }
                },
                methods: {
                    update: _.debounce(function (e) {
                        this.input = e.target.value
                    }, 300)
                }
            })
    </script>

代码省略了样式部分以及marked.js和underscore.js的引入。

先从html结构来看，页面分成左右结构。左边为markdown编辑区，右边为markdown编译区。

编辑区用<textarea>标签来定义。在标签中通过v-bind:(缩写为:)绑定value属性，同时通过v-on(缩写为@)绑定事件监听，v-on:需要接收一个定义的方法来调用，此处的update正是在下面的methods属性中定义的。

通过v-on:指令来监听文本框的输入，获取内容的函数作为_.debounce参数，另一个作为时间参数的值为300，而输入的值会用户停止操作的300m后作为参数传给marked()然后被编译成html格式再返回。

所以本人认为<textarea>中的value属性负责返回文本框的内容，然后Vue实例中的update将输入的value传给compiledMarkdown属性中的方法，该方法返回经过编译的html。

以上大概就是vue制作markdown编辑器的大概分析。

本人刚开始接触Vue.js，对其功能实现的理解难免有误，若您在阅读本文时发现问题，可以在文章下方的评论中指出，也可以通过邮件将问题发送给我，我会第一时间处理，感谢。

本文参考

作者：hayato
文章版权：本站所有文章版权依赖于 CC BY-NC-SA 3.0 Unported License
本文链接：https://blog.axis-studio.org/2017/06/04/使用Vue构建Markdown编辑器/