Home > Article > Web Front-end > Vuejs uses vue-markdown to render comment methods
If you want to use an editor or support markdown in the comment system. This package has quite a few advantages. For example, it supports emoji by default, which is perfect! The new version of laravist uses vue-markdown to render comments. This article mainly introduces examples of using markdown in Vuejs. The editor thinks it is quite good. Now I will share it with you and give you a reference. I hope it can help you.
Installation
Use npm directly to install:
npm install --save vue-markdown
It is also very simple to use
, It can be like this directly:
import VueMarkdown from 'vue-markdown'
new Vue({
components: {
VueMarkdown
}
})Or like this, a concrete example is: For example, we have a Comment.vue component used to render comments. You can directly specify it in this component:
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
}Then when rendering:
<p class="comments"> <p class="comments" v-for="comment in comments"> <comment :comment="comment"> </comment> </p> </p>
Here we first pass in the entire comment through comment props (this comment is actually an object), and then pass it in to the veu-markdown component through :source in Comment.vue The content of the body field of each comment. Note that comment.body here saves the content of the comment in markdown format in the database.
Vuejs server-side rendering markdown example
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>Summary
The vue-markdown introduced in this article can be used in certain application scenarios In fact, it is super easy to use, especially for the comment system that wants to support markdown. It is easy to integrate and has many advantages. I hope it will be helpful to everyone's study.
Related recommendations:
vue.js rendering and loop knowledge explanation
angularjs drop-down box to implement rendering html
Summarize the method of browser rendering page
The above is the detailed content of Vuejs uses vue-markdown to render comment methods. For more information, please follow other related articles on the PHP Chinese website!