Vuejs 中使用 markdown

啊哈，又是來推薦一個 vuejs 的 package，miaolz123/vue-markdown。n對應的應用場景是：你想使用一個編輯器或者是在評論系統中支持 markdown。這個 package 的有點還是挺多了，比如默認就支持 emoji，這個就很完美啦！laravist 的新版就使用了 vue-markdown 來渲染評論。

安裝

直接使用 npm 來安裝：

npm install --save vue-markdownn

使用

也是很簡單的，可以直接這樣：

import VueMarkdown from vue-markdownnnnew Vue({n components: {n VueMarkdownn }n})n

或者是這樣，舉一個具象化的例子是：比如我們有一個 Comment.vue 組件用來渲染評論，可以在這個組件中直接指明：

import VueMarkdown from vue-markdown;n<template>n <div>n <vue-markdown :source="comment.body"></vue-markdown>n </div>n</template>nnexport default { // ... other codesn props:[comment],n data(){ n return {n comment : this.commentn }n }, n components: {n VueMarkdownn }, n// ... other codesn}n

然後在渲染的時候這個：

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

這裡我們首先通過 comment props 傳入整個 comment（這個comment其實就是一個對象） ，然後在 Comment.vue 通過 :source 來給 veu-markdown 組件傳入每個評論的 body 欄位內容，注意這裡的 comment.body 在資料庫中保存的就是評論的 markdown 格式的內容。

總結

本文介紹的 vue-markdown 在某些應用場景中其實超級好用，特別是對於評論系統想支持 markdown 這個需求來說，容易集成，優點多多。

最後

關注 codecasts 公眾號啊，不定期送書！

送書送書，本文下面留言，隨機抽一個送書。還是這本書，有什麼書你們也可以建議一波啊！

《深入PHP：面向對象、模式與實踐（第3版）》([美]Matt Zandstra)【摘要 書評 試讀】- 京東圖書