在vue里使用codemirror的两种用法

更新日期: 2019-07-27阅读: 3.1k标签: 用法

这是我自己做的一个左边点击对应的标题,右边显示相应代码的一个功能。代码显示这里用的是vue-codemirror插件。


第一种用法:

1、安装:

npm install vue-codemirror --save

2、在main.js中引入

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

3、在组件中使用

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

在组件中声明:

components:{
      codemirror
 },

html代码写法:

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

data中cmOptions的配置,这里我写的比较简单,具体的配置项,可以去查官方文档

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

第二种用法:

第1步、第2步和第一种用法中的相同
3、在组件中使用

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

在组件中写法,要写在 mounted中:

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

html代码写法:

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

在切换改变值的方法,需要用到setValue方法,而在第一种方式中直接改变v-model绑定的值就可以了

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

链接: https://fly63.com/article/detial/4968

8种你可能正在写错的SQL用法

分页查询是最常用的场景之一,但也通常也是最容易出问题的地方。比如对于下面简单的语句,一般 DBA 想到的办法是在 type, name, create_time 字段上加组合索引。这样条件排序都能有效的利用到索引,性能迅速提升

你可能不知道的JSON.stringify用法

JS 中有许多常见的函数,我们可能每天都在使用它们,但是却不知道它们的一些额外功能。JSON.stringify 就是这样的一个函数,今天就来看下它的特殊用法。

vue中ref的用法

ref 加在普通的元素上,用 this.$refs.name 获取到的是dom元素;ref 加在子组件上,用 this.$refs.name 获取到的是子组件实例,父组件可以使用子组件的所有方法(在上篇博客已介绍);如何利用 v-for 和 ref 获取一组数组或者dom 节点

vue中provide和inject 用法

provide和inject是成对出现的,用于父组件向子孙组件传递数据,provide在父组件中返回要传给下级的数据,inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。

MutationObserver用法

Mutation Observer API 用来监视 DOM 变动。比如节点的增减、属性的变动、文本内容的变动。MutationObserver使用observe方法进行监听指定的元素节点变化

MutationObserver是什么?

MutationObserver概览MutationObserver interface可以用来监测DOM树的变化。MutationObserver 是旧的DOM3事件规范Mutation Events特性的一个替换。

JavaScript中document.write()用法

在JavaScript中document.write()函数可以向文档写入HTML表达式或JavaScript代码,用法“document.write(exp1,exp2,exp3,....)”,该函数可接受任何多个参数,并将其写入文档中。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!