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

image description

【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>
    ArithmeticJia         0         478         Vue.js         267    

Related Posts

You may like these post too

image description

Vue.js入门(四)---用Pycharm创建你的第一个完整的HelloVue

### 一、在Pycharm中下载Vue.js插件 ![](/media/articlebodypics/1571819210811.jpg) ###二、新建一个Vue.js项目 ![](/media/articlebodypics/1571819312914.jpg) 然后等待安装启动完成

Comments on this post

0 comments

Leave a comment

it’s easy to post a comment

image description
image description
image description
image description
image description
image description
image description
image description
image description

Copyright © 2019.Company name All rights reserved.苏ICP备19007197号