Vuejs verwendet Vue-Markdown zum Rendern von Kommentarmethoden-js-Tutorial-php.cn

Vuejs verwendet Vue-Markdown zum Rendern von Kommentarmethoden

小云云

Freigeben： 2018-05-18 14:42:45

Original

6451 Leute haben es durchsucht

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

Nach dem Login kopieren

Die Verwendung von

ist ebenfalls sehr hilfreich einfach Ja, es kann direkt so sein:

import VueMarkdown from &#39;vue-markdown&#39;

new Vue({
 components: {
  VueMarkdown
 }
})

Nach dem Login kopieren

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 &#39;vue-markdown&#39;;
<template>
 <p>
  <vue-markdown :source="comment.body"></vue-markdown>
 </p>
</template>

export default { // ... other codes
 props:[&#39;comment&#39;],
 data(){  
  return {
   comment : this.comment
  }
 }, 
 components: {
  VueMarkdown
 }, 
// ... other codes
}

Nach dem Login kopieren

Dann beim Rendern:

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

Nach dem Login kopieren

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(&#39;koa&#39;);
const _ = require(&#39;koa-route&#39;);
const vsr = require(&#39;vue-server-renderer&#39;);
const fs = require(&#39;fs&#39;);
const indexjs = require(&#39;./component/index.js&#39;);
const Vue = require(&#39;vue&#39;);
const MD = require(&#39;markdown-it&#39;)

const server = new Koa();

const route = {
  index: (ctx, id) => {
    // 解析markdown
    const md = new MD().render(fs.readFileSync(&#39;./markdown/&#39; + id + &#39;.md&#39;, &#39;utf-8&#39;));
    // 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(&#39;./template/index.template.html&#39;, &#39;utf-8&#39;)
    });
    // 渲染
    renderer.renderToString(app, context, (err, html) => {
      if (err) {
        ctx.response.status = 500;
      } else {
        ctx.response.body = html;
      }
    })
  }
};

server.use(_.get(&#39;/post/:id&#39;, route.index));
server.listen(8080);

Nach dem Login kopieren

<!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>

Nach dem Login kopieren

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!