【Vue.js】用vue组件完成官网实时markdown示例

https://cn.vuejs.org/v2/examples/

官网这个示例是用普通js方式的引入的vue，直接在html文件上写的，不够vue

安装几个包

npm i lodash -S
npm i marked -S

路由

export default new Router({routes: [{path: '/',name: 'HelloWorld',component: HelloWorld},{path: '/liveupdatemarkdown',name: 'LiveUpdateMarkdown',component: LiveUpdateMarkdown}]
})

完整组件

<template><div id="editor"><textarea :value="input" @input="update"></textarea><div v-html="compiledMarkdown"></div></div>
</template><script>import marked from 'marked'let _ = require('lodash')// Vue.prototype._ = _export default {name: "LiveUpdateMarkdown",data () {return {input: "# hello"};},computed: {compiledMarkdown: function() {return marked(this.input, { sanitize: true });}},methods: {update: _.debounce(function(e) {this.input = e.target.value;}, 300)}}
</script><style scoped>
html,
body,
#editor {margin: 0;height: 100%;font-family: "Helvetica Neue", Arial, sans-serif;color: #333;
}textarea,
#editor div {display: inline-block;width: 49%;height: 100%;vertical-align: top;box-sizing: border-box;padding: 0 20px;
}textarea {border: none;border-right: 1px solid #ccc;resize: none;outline: none;background-color: #f6f6f6;font-size: 14px;font-family: "Monaco", courier, monospace;padding: 20px;
}code {color: #f66;
}
</style>

【Vue.js】用vue组件完成官网实时markdown示例相关推荐

vue手机端项目php,MintUI基于Vue.js移动端组件库详解
Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.接下来通过本文给大家分享Mint UI 基于 Vue.js 移动端组件库,需要的朋友参考下吧,希望能帮助到大家. 官网 ...
vue使用html渲染组件,Vue.js在渲染组件之前填充数据
我是Vue.js的新手,我试图创建一个没有成功的简单组件,它包含一个selectList,我试图填充它的选项数据来模拟Ajax请求,这是我的代码:Vue.js在渲染组件之前填充数据 HTML {{n. ...
动态添加组件_使用vue.js的动态组件模板
最近刚做完建站工具,准备总结里面使用到的一些技巧,同时会做一版简化的放在 github上. 先来一篇翻译的文章,和我在项目中使用的动态组件思路一样,不过缺少了演化的过程,直接给出了最终的解决方案.这篇 ...
vue图片裁剪组件_使用Vue-Rx的Vue.js图像裁剪组件
vue图片裁剪组件 Vuejs夹 (vuejs-clipper) Vue.js image clipping components using Vue-Rx. 使用Vue-Rx的Vue.js图像裁剪组 ...
Vue.js(一) Vue.js + element-ui 扫盲
Vue.js(一) Vue.js + element-ui 扫盲 2018年12月09日 20:32:59 vbirdbest 阅读数 7043更多分类专栏: Vue.js + ElementUI ...
vue.js报错 vue.js:597 [Vue warn]: Cannot find element: #app
刚开始使用vue的时候发现vue报vue.js:597 [Vue warn]: Cannot find element: #app的错误,初始以为是写的代码有错误导致,于是认真的对照了几遍发现代码和官 ...
vue.js:597 [Vue warn]: Error in callback for watcher dat: TypeError: Cannot read property 'call'
vue.js:597 [Vue warn]: Error in callback for watcher "dat": "TypeError: Cannot read p ...
vue.js:590 [Vue tip]: Event “removeitem“ is emitted in component ＜TodoItems＞ but the handler is regi
报错信息 vue.js:590 [Vue tip]: Event "removeitem" is emitted in component <TodoItems> bu ...
Vue.js教程-Vue项目的目录结构和.vue文件的构成
Vue.js教程-Vue项目的目录结构和.vue文件的构成前言 Vue项目的目录结构(Vue-cli3/4版本) .vue文件的构成 Html区域(template) script区域 export ...

【Vue.js】用vue组件完成官网实时markdown示例

【Vue.js】用vue组件完成官网实时markdown示例相关推荐

最新文章

热门文章