Wenn Sie einen Editor verwenden oder Markdown im Kommentarsystem unterstützen möchten. Dieses Paket hat einige Vorteile, zum Beispiel unterstützt es standardmäßig Emoji, was perfekt ist! Die neue Version von Laravist verwendet Vue-Markdown zum Rendern von Kommentaren. In diesem Artikel werden hauptsächlich Beispiele für die Verwendung von Markdown in Vuejs vorgestellt. Ich werde es jetzt mit Ihnen teilen und hoffe, dass es Ihnen helfen kann.
Installation
Verwenden Sie npm direkt zur Installation:
npm install --save vue-markdown
Die Verwendung von
ist ebenfalls sehr hilfreich einfach Ja, es kann direkt so sein:
import VueMarkdown from 'vue-markdown'
new Vue({
components: {
VueMarkdown
}
})Oder so, ein konkretes Beispiel ist: Wir haben zum Beispiel eine Comment.vue-Komponente, die zum Rendern von Kommentaren verwendet wird, Sie können sie hier direkt angeben Komponente:
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
}Dann beim Rendern:
<p class="comments"> <p class="comments" v-for="comment in comments"> <comment :comment="comment"> </comment> </p> </p>
Hier übergeben wir zuerst den gesamten Kommentar über Kommentar-Requisiten (dieser Kommentar ist tatsächlich ein Objekt) und übergeben dann: Quelle Comment.vue Übergeben wir den Inhalt des Textfelds jedes Kommentars an die Veu-Markdown-Komponente. Beachten Sie, dass comment.body hier den Inhalt des Kommentars im Markdown-Format in der Datenbank speichert.
Vuejs serverseitiges Rendering-Markdown-Beispiel
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>Zusammenfassung
Der in eingeführte Vue-Markdown Dieser Artikel ist in einigen Anwendungsszenarien tatsächlich sehr einfach zu verwenden, insbesondere für das Kommentarsystem, das Markdown unterstützen möchte. Es ist einfach zu integrieren und bietet viele Vorteile. Ich hoffe, dass es für das Studium aller hilfreich sein wird.
Verwandte Empfehlungen:
vue.js-Rendering und Schleifenwissenserklärung
AngularJS-Dropdown-Feld zur Implementierung von Rendering-HTML
Zusammenfassung darüber, wie Browser Seiten rendern
Das obige ist der detaillierte Inhalt vonVuejs verwendet Vue-Markdown zum Rendern von Kommentarmethoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
