如果你想使用編輯器或是在評論系統中支援 markdown。這個 package 的有點還蠻多了，像是預設就支援 emoji，這個就很完美啦！ laravist 的新版本就使用了 vue-markdown 來渲染評論。本文主要介紹了Vuejs 中使用 markdown的範例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考，希望能幫助到大家。
安裝
直接使用npm 來安裝：
npm install --save vue-markdown
使用
也是很簡單的，可以直接這樣：
import VueMarkdown from 'vue-markdown'
new Vue({
components: {
VueMarkdown
}
})或是這樣，舉一個具象化的例子是：例如我們有一個Comment.vue 元件用來渲染評論，可以在這個元件中直接指明：
import VueMarkdown from 'vue-markdown';
<template>
<p>
<vue-markdown :source="comment.body"></vue-markdown>
</p>
</template>
export default { // ... other codes
props:['comment'],
data(){
return {
comment : this.comment
}
},
components: {
VueMarkdown
},
// ... other codes
}然後在渲染的時候這個：
<p class="comments"> <p class="comments" v-for="comment in comments"> <comment :comment="comment"> </comment> </p> </p>
這裡我們先透過comment props 傳入整個comment（這個comment其實就是一個物件） ，然後在Comment.vue 透過:source 來給veu-markdown 元件傳入每個評論的body 欄位內容，注意這裡的comment.body 在資料庫中保存的就是評論的markdown 格式的內容。
Vuejs伺服器端渲染markdown範例
const Koa = require('koa');
const _ = require('koa-route');
const vsr = require('vue-server-renderer');
const fs = require('fs');
const indexjs = require('./component/index.js');
const Vue = require('vue');
const MD = require('markdown-it')
const server = new Koa();
const route = {
index: (ctx, id) => {
// 解析markdown
const md = new MD().render(fs.readFileSync('./markdown/' + id + '.md', 'utf-8'));
// vue插入html代码
const app = new Vue({
data: {
main: md
},
template: `
<p>
<p class="main" v-html="main"></p>
</p>`
});
// 其他变量设置
const context = {
htmlTitle: id
};
// 加载模板html文件
const renderer = vsr.createRenderer({
template: fs.readFileSync('./template/index.template.html', 'utf-8')
});
// 渲染
renderer.renderToString(app, context, (err, html) => {
if (err) {
ctx.response.status = 500;
} else {
ctx.response.body = html;
}
})
}
};
server.use(_.get('/post/:id', route.index));
server.listen(8080);<!DOCTYPE html>
<html lang="CH-ZN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{{htmlTitle}}</title>
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>總結
本文介紹的vue-markdown 在某些應用程式場景中其實超級好用，特別是對於評論系統想支援markdown 這個需求來說，容易集成，優點多多。希望對大家的學習有所幫助。
相關推薦：
以上是Vuejs使用 vue-markdown 來渲染評論方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
