vue-codemirror使用教程

Vue Codemirror 是一个基于 Vue.js 的 CodeMirror 组件库，可以方便地在 Vue.js 项目中使用 CodeMirror 编辑器。

以下是 Vue Codemirror 的使用教程：

1. 安装

使用 npm 安装：

npm install vue-codemirror --save

2. 引入

在 Vue 组件中引入：

import Vue from 'vue'
import VueCodemirror from 'vue-codemirror'

// you can set default global options and events when use
Vue.use(VueCodemirror)

或者在 HTML 文件中引入：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/mode/javascript/javascript.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-codemirror"></script>

3. 使用

在 Vue 组件中使用：

<template>
  <div id="app">
    <vue-codemirror v-model="code" :options="codemirrorOptions"></vue-codemirror>
  </div>
</template>

<script>
export default {
  data () {
    return {
      code: '// your code here',
      codemirrorOptions: {
        tabSize: 4,
        mode: 'javascript',
        theme: 'monokai'
      }
    }
  }
}
</script>

其中，`v-model` 绑定了编辑器的内容，`options` 属性设置了编辑器的配置项。

另外，Vue Codemirror 还提供了一些事件回调函数，可以在需要的时候进行调用：

<vue-codemirror @input="handleInput" @focus="handleFocus"></vue-codemirror>

更多详细的使用方法可以参考 Vue Codemirror 的官方文档：https://www.npmjs.com/package/vue-codemirror.