Vuejs 中使用 markdown

Posted 2021-05-01 编程新一

啊哈，又是来推荐一个 vuejs 的 package，miaolz123/vue-markdown。
对应的应用场景是：你想使用一个编辑器或者是在评论系统中支持 markdown。这个 package 的有点还是挺多了，比如默认就支持 emoji，这个就很完美啦！laravist 的新版就使用了 vue-markdown 来渲染评论。

安装

直接使用 npm 来安装：

npm install --save vue-markdown

使用

也是很简单的，可以直接这样：

import VueMarkdown from 'vue-markdown'

new Vue({
  components: {
    VueMarkdown
  }
})

或者是这样，举一个具象化的例子是：比如我们有一个 Comment.vue 组件用来渲染评论，可以在这个组件中直接指明：

import VueMarkdown from 'vue-markdown';
<template>
 <div>
    <vue-markdown :source="comment.body"></vue-markdown>
 </div>
</template>

export default {  // ... other codes
  props:['comment'],
  data(){   
   return {
     comment : this.comment
   }
  }, 
  components: {
    VueMarkdown
  },  
// ... other codes
}

然后在渲染的时候这个：

<div class="comments">
  <div class="comments" v-for="comment in comments">
    <comment :comment="comment">
    </comment>
  </div>
</div>

这里我们首先通过 comment props 传入整个 comment（这个comment其实就是一个对象） ，然后在 Comment.vue 通过 :source 来给 veu-markdown 组件传入每个评论的 body 字段内容，注意这里的 comment.body 在数据库中保存的就是评论的 markdown 格式的内容。

总结

本文介绍的 vue-markdown 在某些应用场景中其实超级好用，特别是对于评论系统想支持 markdown 这个需求来说，容易集成，优点多多。

最后

 送书送书，本文下面留言，随机抽一个送书。还是这本书，有什么书你们也可以建议一波啊！