Codemirror in use in two uses vue

This is a left to do my own tap its title, the right to display a corresponding function code. Code shown here is vue-codemirror plug.

The first usage:

1, the installation: the install VUE NPM-CodeMirror --save
2, incorporated in main.js

import VueCodeMirror from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
Vue.use(VueCodeMirror)

3, used in the assembly

import { codemirror } from 'vue-codemirror'
import "codemirror/theme/ambiance.css";  // 这里引入的是主题样式，根据设置的theme的主题引入，一定要引入！！
require("codemirror/mode/javascript/javascript"); // 这里引入的模式的js，根据设置的mode引入，一定要引入！！

Statement in the assembly:

components:{
      codemirror
 },

html code writing:

<codemirror
      ref="mycode"
      :value="curCode"
      :options="cmOptions"
      class="code">
 </codemirror>

data in cmOptions configuration, I write here is relatively simple, specific configuration items, you can go check the official documentation

curCode:'',
cmOptions:{
    value:'',
     mode:"text/javascript",
    theme: "ambiance",
    readOnly:true,
 }

The second usage:

Step 1, Step 2 and the same as the first usage
3, used in the assembly

import CodeMirror from 'codemirror/lib/codemirror'
  import "codemirror/theme/ambiance.css";
  require("codemirror/mode/javascript/javascript");

Written in the assembly, to write in the mounted:

 mounted(){
      this.editor = CodeMirror.fromTextArea(this.$refs.mycode, {
      mode:"text/javascript",
      theme: "ambiance",
      readOnly:true,
},

html code writing:

<textarea ref="mycode" class="codesql public_text" v-model="code"></textarea>

In the process of changing the value of the switching, the need to use methods setValue, v-model value is changed directly bound in the first embodiment can be a

changeCode(value){
  this.code = value;        
  this.editor.setValue(this.code);
}