recherche

Maison  >  Article  >  interface Web  >  Vuejs utilise vue-markdown pour afficher les méthodes de commentaires

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

小云云
小云云original
2018-05-18 14:42:456445parcourir

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

Utiliser

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

import VueMarkdown from 'vue-markdown'

new Vue({
 components: {
  VueMarkdown
 }
})

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 'vue-markdown';
<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
}

Puis lors du rendu : 

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

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

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment obtenir des nœuds dans Angular2Article suivant：Comment obtenir des nœuds dans Angular2

Articles Liés

Voir plus