Vuejs中使用markdown服务器端渲染的示例
啊哈，又是来推荐一个 vuejs 的 package，miaolz123/vue-markdown。 对应的应用场景是：你想使用一个编辑器或者是在评论系统中支持 markdown。这个 package 的有点还是挺多了，比如默认就支持 emoji，这个就很完美啦！laravist 的新版就使用了 vue-markdown 来渲染评论。
安装
直接使用 npm 来安装：
npm install --save vue-markdown
使用
也是很简单的，可以直接这样：
import VueMarkdown from 'vue-markdown'
new Vue({
components: {
VueMarkdown
}
})
或者是这样，举一个具象化的例子是：比如我们有一个 Comment.vue 组件用来渲染评论，可以在这个组件中直接指明：
import VueMarkdown from 'vue-markdown';
<template>
<div>
<vue-markdown :source="comment.body"></vue-markdown>
</div>
</template>
export default { // ... other codes
props:['comment'],
data(){
return {
comment : this.comment
}
},
components: {
VueMarkdown
},
// ... other codes
}
然后在渲染的时候这个：
<div class="comments"> <div class="comments" v-for="comment in comments"> <comment :comment="comment"> </comment> </div> </div>
这里我们首先通过 comment props 传入整个 comment（这个comment其实就是一个对象） ，然后在 Comment.vue 通过 :source 来给 veu-markdown 组件传入每个评论的 body 字段内容，注意这里的 comment.body 在数据库中保存的就是评论的 markdown 格式的内容。
Vuejs服务器端渲染markdown示例
const Koa = require('koa');
const _ = require('koa-route');
const vsr = require('vue-server-renderer');
const fs = require('fs');
const indexjs = require('./component/index.js');
const Vue = require('vue');
const MD = require('markdown-it')
const server = new Koa();
const route = {
index: (ctx, id) => {
// 解析markdown
const md = new MD().render(fs.readFileSync('./markdown/' + id + '.md', 'utf-8'));
// vue插入html代码
const app = new Vue({
data: {
main: md
},
template: `
<div>
<div class="main" v-html="main"></div>
</div>`
});
// 其他变量设置
const context = {
htmlTitle: id
};
// 加载模板html文件
const renderer = vsr.createRenderer({
template: fs.readFileSync('./template/index.template.html', 'utf-8')
});
// 渲染
renderer.renderToString(app, context, (err, html) => {
if (err) {
ctx.response.status = 500;
} else {
ctx.response.body = html;
}
})
}
};
server.use(_.get('/post/:id', 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>
总结
本文介绍的 vue-markdown 在某些应用场景中其实超级好用，特别是对于评论系统想支持 markdown 这个需求来说，容易集成，优点多多。希望对大家的学习有所帮助，也希望大家多多支持我们。
您可能感兴趣的文章:
- VUEJS实战之构建基础并渲染出列表（1）
- Vuejs第一篇之入门教程详解（单向绑定、双向绑定、列表渲染、响应函数）
- Vue.JS入门教程之列表渲染
- 用v-html解决Vue.js渲染中html标签不被解析的问题
- 详解如何使用Vue2做服务端渲染
- vue-router 中router-view不能渲染的解决方法
- 详解vue服务端渲染(SSR)初探
- 详解vue数据渲染出现闪烁问题
- 浅谈vue.js中v-for循环渲染
相关推荐
-
Vuejs第一篇之入门教程详解（单向绑定、双向绑定、列表渲染、响应函数）
什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 接下来给大家介绍vuejs单向绑定.双向绑定.列表渲染.响应函数基础知识,具体详情如下所示: (一)单向绑定 <div id="app"> {{ message }} </div> <sc
-
vue-router 中router-view不能渲染的解决方法
最近在做一个vue的项目,其中使用了vue2.0,vue-router2.0.在使用vue-router的时候跳了一个很大的坑,router-view不能渲染,花费了好多时间终于发现了原因. 项目目录结构 其中main.js import Vue from 'vue'; import App from './App'; import router from './router'; /* eslint-disable no-new */ new Vue({ el: '#app', router,
-
详解vue数据渲染出现闪烁问题
今天在使用vue进行数据渲染的时候发现当我不停的按F5刷新的时候出现了{{message}}的情况.经过多方查找我知道了要解决这个问题需要添加v-cloak指令,这时有一个问题困扰了我很久,我明明按照大家所说的加了v-for为什么还是没有用.后来折腾了很久才发现原因,先不说为什么,看看代码来: 在html中: <ul v-for="item in person"> <li v-cloak>{{item.name}}</li> </ul>
-
浅谈vue.js中v-for循环渲染
这两天学习了Vue.js 感觉v-for循环渲染这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 一.简介 vue.js 的循环渲染是依赖于 v-for 指令,它能够根据 vue 的实例里面的信息,循环遍历所需数据,然后渲染出相应的内容.它可以遍历数组类型以及对象类型的数据,js 里面的数组本身实质上也是对象,这里遍历数组和对象的时候,方式相似但又稍有不同. (一)遍历对象 <div id="app"> <ul> <li v-for="
-
详解vue服务端渲染(SSR)初探
前言 首先来讲一下服务端渲染,直白的说就是在服务端拿数据进行解析渲染,直接生成html片段返回给前端.具体用法也有很多种比如: 传统的服务端模板引擎渲染整个页面 服务渲染生成htmll代码块, 前端 AJAX 获取然后js动态添加 服务端渲染的优劣 首先是seo问题,前端动态渲染的内容是不能被抓取到的,而使用服务端渲染就可以解决这个问题.还有就是首屏加载过慢这种问题,比如在SPA中,打开首页需要初始加载很多资源,这时考虑在首屏使用服务端渲染,也是一种折中的优化方案.但是使用SSR时,势必会增加服
-
VUEJS实战之构建基础并渲染出列表（1）
前言 我的JavaScript水平比较一般.好吧,是相当的一般.因此,对于最新的前端框架技术,实在是有点困难,但现实让我必须面对.因此,学习是唯一的出路. 纵向比较了N款前端框架,最终选择了VUE,为什么呢?理由如下: 1.angular 前途不明,1.x学习曲线高,并且好像被放弃了,而2则还没有正式推出. 2.react 比较厉害,但是没接触. 3.VUE简单,通过上手,比较适合我的思维和水平. 4.vue有中文文档,我看起来比较舒服. 既然决定学习vue,那么最好的学习方法就是实战.
-
Vue.JS入门教程之列表渲染
你可以使用 v-repeat 指令来基于 ViewModel 上的对象数组渲染列表.对于数组中的每个对象,该指令将创建一个以该对象作为其 $data 对象的子 Vue 实例.这些子实例继承父实例的数据作用域,因此在重复的模板元素中你既可以访问子实例的属性,也可以访问父实例的属性.此外,你还可以通过 $index 属性来获取当前实例对应的数组索引. <ul id="demo"> <li v-repeat="items" class="ite
-
详解如何使用Vue2做服务端渲染
花费了一个月时间,终于在新养车之家项目中成功部署了vue2服务端渲染(SSR),并且使用上了Vuex 负责状态管理,首屏加载时间从之前4G网络下的1000ms,提升到了现在500-700ms之间,SSR的优势有很多,现在让我来跟你细细道来. 技术栈 服务端:Nodejs(v6.3) 前端框架 Vue2.1.10 前端构建工具:webpack2.2 && gulp 代码检查:eslint 源码:es6 前端路由:vue-router2.1.0 状态管理:vuex2.1.0 服务端通信:axi
-
用v-html解决Vue.js渲染中html标签不被解析的问题
前言 最近在工作中遇到一个问题,在网页中后台传来的json数据中包含html标签,将该json数据绑定到Vue.js中对象中,对该对象进行for循环,发现数据中的html标签不能被解析,而是当作字符显示出来. 问题如下所示: 解决方法: Vue.js中提供了v-html这个指令来解决这个问题,或者对数据对象使用{{{vm.data}}}三个大括号来包裹对象,就可以正常解析了. 代码改动如下: 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家都 学习或者工作能带来一定的帮助,如果有疑问大家
-
Vuejs中使用markdown服务器端渲染的示例
啊哈,又是来推荐一个 vuejs 的 package,miaolz123/vue-markdown. 对应的应用场景是:你想使用一个编辑器或者是在评论系统中支持 markdown.这个 package 的有点还是挺多了,比如默认就支持 emoji,这个就很完美啦!laravist 的新版就使用了 vue-markdown 来渲染评论. 安装 直接使用 npm 来安装: npm install --save vue-markdown 使用 也是很简单的,可以直接这样: import VueMark
-
Next.js实现react服务器端渲染的方法示例
说明 实现 路由跳转.redux 文件版本 "next": "^4.2.3", "react": "^16.2.0", "react-dom": "^16.2.0" Next.js GitHub 文档 项目源码 使用 Next.js 使用文件体统作为API,可以自动进行服务器端渲染和代码分割 1. 安装 yarn add next react react-dom 2. package.j
-
Vue单页面应用中实现Markdown渲染
之前渲染 Markdown 的时候, 笔者使用的是 mavonEditor 的预览模式, 使用起来比较爽, 只需要引入组件即可, 但是在最近的开发中, 遇到了困难. 主要问题在于作为单页面应用, 站内链接必须是使用 router-link 跳转, 如果使用 mavonEditor 默认渲染的 a 标签, 就会重新加载页面, 用户体验较差. 动态渲染 想要实现在前端动态地根据用户内容渲染router-link , 需要使用动态渲染, 根据 官方文档, 直接修改vue.config.js 即可: /
-
Thinkphp5框架中引入Markdown编辑器操作示例
本文实例讲述了Thinkphp5框架中引入Markdown编辑器操作.分享给大家供大家参考,具体如下: 编辑器下载地址以及演示:https://pandao.github.io/editor.md/ 1.把下载的项目放在public目录下 2.页面中引入jquery.js,editormd.js,editormd.css demo <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu
-
详解VueJs中的V-bind指令
引子 v-bind 主要用于属性绑定,Vue官方提供了一个简写方式 :bind,例如: <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> 一.概述 v-bind 主要用于属性绑定,比方你的class属性,style属性,value属性,href属性等等,只要是属性,就可以用v-bind指令进行绑
-
vue ssr+koa2构建服务端渲染的示例代码
之前做了活动投放页面在百度.360等渠道投放,采用 koa2 + 模版引擎的方式.发现几个问题 相较于框架开发页面效率较低,维护性差 兼容性问题,在页面中添加埋点后发现有些用户的数据拿不到,排查后发现通过各个渠道过来的用户的设备中仍然包含大量低版本的浏览器. 服务端渲染 服务端渲染和单页面渲染区别 查看下面两张图,可以看到如果是服务端渲染,那么在浏览器中拿到的直接是完整的 html 结构.而单页面是一些 script 标签引入的js文件,最终将虚拟dom去挂在到 #app 容器上. @vue/c
-
vue3中的透传attributes教程示例详解
目录 引言 绑定样式 对象 数组 透传的attributes 透传 attributes 之样式绑定 透传 attributes 之事件绑定 特殊1:组件嵌套 特殊2:禁用透传attributes 特殊3:在 javascript 中访问透传的attributes 总结 引言 最近两年都是在使用 react 进行项目开发,看技术博客都是针对 react 和 javaScript 高级方面的,对 vue 的知识基本上遗忘的差不多了.最近开始慢慢回顾 vue 的知识以及对新的语法进行学习,为后面的计
-
关于vuejs中v-if和v-show的区别及v-show不起作用问题
1.官网概念描述 v-if 是'真正的'条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建. v-if 也是惰性的,如果在初始渲染时条件为假,那么什么都不做- - 直到条件第一次为真的时候才会开始渲染条件块,相比之下,v-show就简单得多- - 不管初始条件是什么,元素总会被渲染,并且只是简单的基于css进行切换. 一般来说,v-if 有更高的切换开销,而 v-show 有更高的出事渲染开销.因此,如果需要非常频繁的切换,那么使用v-show好一点;如果在运行时条
-
细说Vue组件的服务器端渲染的过程
声明:需要读者对 NodeJs.Vue 服务器端渲染有一定的了解 现在,前后端分离与客户端渲染已经成为前端开发的主流模式,绝大部分的前端应用都适合用这种方式来开发,又特别是 React.Vue 等组件技术的发展,更是使这种方式深入人心. 但有一些应用,客户端渲染就会遇到一些问题了: 需要做 SEO(搜索引擎优化),但客户端渲染的 html 中几乎没有可用的信息 需要首屏快速加载,但客户端渲染一般是长时间的加载动画或者白屏 如果能把客户端渲染的组件化技术(React.Vue 等)与传统的后端渲染的
-
深入浅析Vue.js 中的 v-for 列表渲染指令
1 基本用法 当遍历一个数组或枚举一个对象进行迭代循环展示时,就会用到列表渲染指令 v-for. 它的表达式需要结合 in 来使用,类似 item in items 的形式. 1.1 遍历数组 html: <div id="app"> <ul> <li v-for="n in news">{{n.title}}</li> </ul> </div> js: <script> var a