官方示例不能直接粘贴使用,故自己补了些代码。方便初学者学习,节省时间,提高学习效率。
1、html代码:
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>20-vue3- markdown 编辑器.html</title>
<!-- 加载项,可以本地加载,也可网联加载(用ai提示生成网联代码)--><script src="./dist/vue.global.js"></script><script src="./lodash/lodash.js"></script><script src="./marked/marked.min.js"></script><script>// 动态标题var dynamicTitle = "20-vue3- markdown 编辑器.html".slice(0, -5);// 使用 JavaScript 修改 <title> 标签的内容document.title = dynamicTitle;</script>
</head>
<body><div id="app"><h1>{{input}}</h1><h1>{{output}}</h1>
<!--@keyup.enter="update" 在textarea的内容输入后,按enter按键触发 update方法--><div class="editor"><textarea class="input" :value="input" @keyup.enter="update"></textarea><div class="output" v-html="output"></div></div></div><script type="module">const { createApp, ref,computed } = Vue// marked 把textarea的内容进行解析,并返回html格式。// 如:“# hello” 会被解析为“<h1>hello</h1>”const { parse} = marked// lodash的debounce函数,防抖函数,单位为毫秒,默认为1000毫秒即1秒// 如:如这例子中,在1秒内,输入了多次,最终只会执行一次。const {debounce} = _createApp({components:{},setup() {const input = ref('# hello')const output = computed(()=>{return parse(input.value)})const update = debounce((e) => {input.value = e.target.value}, 1000)return {input,output,update}}}).mount('#app')</script></body>
</html>
2、结果: