Vuejs uses vue-markdown to render comment methods-JS Tutorial-php.cn

Vuejs uses vue-markdown to render comment methods

小云云

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

Original

6436 people have browsed it

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

Copy after login

It is also very simple to use

, It can be like this directly:

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

new Vue({
 components: {
  VueMarkdown
 }
})

Copy after login

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 &#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
}

Copy after login

Then when rendering:

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

Copy after login

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(&#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);

Copy after login

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

Copy after login

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!