vue使用codemirror的两种用法


Posted in Javascript onAugust 27, 2019

vue使用codemirror的两种用法

这是我自己做的一个左边点击对应的标题,右边显示相应代码的一个功能。代码显示这里用的是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);
}

总结

以上所述是小编给大家介绍的vue使用codemirror的两种用法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
js中格式化日期时间型数据函数代码
Nov 08 Javascript
document.getElementById介绍
Sep 13 Javascript
javascript学习笔记(十一) 正则表达式介绍
Jun 20 Javascript
javascript错误的认识不用关心内存管理
Dec 15 Javascript
jquery 按钮状态效果 正常、移上、按下
Aug 12 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
Nov 23 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 Javascript
JavaScript必知必会(十) call apply bind的用法说明
Jun 08 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 Javascript
简单实现AngularJS轮播图效果
Apr 10 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
Oct 27 Javascript
微信小程序实现弹出菜单功能
Jun 12 Javascript
微信小程序中为什么使用var that=this
Aug 27 #Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
Aug 27 #Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
Aug 27 #Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 #jQuery
JS多个表单数据提交下的serialize()应用实例分析
Aug 27 #Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 #Javascript
原生javascript自定义input[type=radio]效果示例
Aug 27 #Javascript
You might like
PHP 金额数字转换成英文
2010/05/06 PHP
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
PHP编程获取各个时间段具体时间的方法
2017/05/26 PHP
PHP钩子与简单分发方式实例分析
2017/09/04 PHP
laravel中的一些简单实用功能
2018/11/03 PHP
PHP 多进程与信号中断实现多任务常驻内存管理实例方法
2019/10/04 PHP
php正则表达式使用方法整理集合
2020/01/31 PHP
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
指定js可访问其它域名的cookie的方法
2007/09/18 Javascript
JS 获取span标签中的值的代码 支持ie与firefox
2009/08/24 Javascript
javascript dom 基本操作小结
2010/04/11 Javascript
jQuery中add实现同时选择两个id对象
2010/10/22 Javascript
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
jquery div拖动效果示例代码
2013/12/08 Javascript
Jquery 点击按钮自动高亮实现原理及代码
2014/04/25 Javascript
JavaScript 模块化编程(笔记)
2015/04/08 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
关于foreach循环中遇到的问题小结
2017/05/08 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
2017/07/03 Javascript
vuejs使用FormData实现ajax上传图片文件
2017/08/08 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
2018/05/07 Javascript
记React connect的几种写法(小结)
2018/09/18 Javascript
Vuex mutitons和actions初使用详解
2019/03/04 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
win7 下搭建sublime的python开发环境的配置方法
2014/06/18 Python
Python基于回溯法子集树模板解决马踏棋盘问题示例
2017/09/11 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
python中pop()函数的语法与实例
2020/12/01 Python
毕业生求职简历的自我评价
2013/10/07 职场文书
班班通项目实施方案
2014/02/25 职场文书
文秘求职信范文
2014/04/10 职场文书
Mysql数据库值的添加、修改、删除及清空操作实例
2021/06/20 MySQL