Home >Web Front-end >JS Tutorial >Vuejs uses vue-markdown to render comment methods

Vuejs uses vue-markdown to render comment methods

小云云Original: 2018-05-18 14:42:456483browse

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

It is also very simple to use

, It can be like this directly:

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

new Vue({
 components: {
  VueMarkdown
 }
})

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
}

Then when rendering:

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

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

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

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to get nodes in angular2Next article：How to get nodes in angular2

See more

Vuejs uses vue-markdown to render comment methods

Related articles