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>