如果你想使用編輯器或是在評論系統中支援 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中文網其他相關文章!