Vuejs utilise vue-markdown pour afficher les méthodes de commentaires-js tutoriel-php.cn

Vuejs utilise vue-markdown pour afficher les méthodes de commentaires

小云云

Libérer： 2018-05-18 14:42:45

original

6433 Les gens l'ont consulté

Si vous souhaitez utiliser un éditeur ou prendre en charge le démarque dans le système de commentaires. Ce package présente de nombreux avantages. Par exemple, il prend en charge les emoji par défaut, ce qui est parfait ! La nouvelle version de laravast utilise vue-markdown pour afficher les commentaires. Cet article présente principalement des exemples d'utilisation de markdown dans Vuejs. L'éditeur pense que c'est plutôt bien. Maintenant, je vais le partager avec vous et vous donner une référence, j'espère que cela pourra vous aider.

Installation

Utilisez npm directement pour installer :

npm install --save vue-markdown

Copier après la connexion

Utiliser

est également très simple Oui, ça peut être comme ça directement :

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

new Vue({
 components: {
  VueMarkdown
 }
})

Copier après la connexion

Ou comme ça, un exemple concret est : Par exemple, nous avons un composant Comment.vue utilisé pour rendre les commentaires, vous pouvez le spécifier directement dans ce composant :

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
}

Copier après la connexion

Puis lors du rendu :

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

Copier après la connexion

Ici, nous transmettons d'abord l'intégralité du commentaire via les accessoires de commentaire (ce commentaire est en fait un objet), puis passons : source dans Comment.vue Passons le contenu du champ body de chaque commentaire au composant veu-markdown. Notez que comment.body enregistre ici le contenu du commentaire au format markdown dans la base de données.

Exemple de démarque de rendu côté serveur Vuejs

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);

Copier après la connexion

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

Copier après la connexion

Résumé

Le vue-markdown introduit dans cet article est en fait très facile à utiliser dans certains scénarios d'application, en particulier pour le système de commentaires qui souhaite prendre en charge le démarque. Il est facile à intégrer et présente de nombreux avantages. J'espère que cela sera utile à l'étude de chacun.

Recommandations associées :

Rendu vue.js et explication des connaissances en boucle

boîte déroulante angulaire js pour implémenter le rendu html

Résumé de la façon dont les navigateurs affichent les pages

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!