vue中使用codemirror的实例详解


Posted in Javascript onNovember 01, 2018

这篇文章在vue里使用codemirror遇到的问题,写的很不错,还有下载的方法,大家可以点击查看。

以下是自己使用过的,做出来的例子:

做出来的效果图:

vue中使用codemirror的实例详解

记住使用之前要npm下载哦

npm install vue-codemirror --save

main.js

import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'

Vue.use(VueCodemirror)

再到组件中使用 

import { codemirror } from 'vue-codemirror'

require("codemirror/mode/python/python.js")

require('codemirror/addon/fold/foldcode.js')

require('codemirror/addon/fold/foldgutter.js')

require('codemirror/addon/fold/brace-fold.js')

require('codemirror/addon/fold/xml-fold.js')

require('codemirror/addon/fold/indent-fold.js')

require('codemirror/addon/fold/markdown-fold.js')

require('codemirror/addon/fold/comment-fold.js')

vue中使用codemirror的实例详解

当然组件需要先声明

components:{


codemirror

}

 html代码这样写:

vue中使用codemirror的实例详解

vue中使用codemirror的实例详解

js:

vue中使用codemirror的实例详解

 vue中使用codemirror的实例详解

style:

vue中使用codemirror的实例详解

总结

以上所述是小编给大家介绍的vue中使用codemirror的实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
纯js网页画板(Graphics)类简介及实现代码
Dec 24 Javascript
jQuery焦点图切换特效插件封装实例
Aug 18 Javascript
Express作者TJ告别Node.js奔向Go
Jul 14 Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
Jan 06 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
Jan 16 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 Javascript
Vue隐藏显示、只读实例代码
Jul 18 Javascript
JavaScript对象的特性与实践应用深入详解
Dec 30 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
Sep 17 Javascript
微信小程序实现点击图片放大预览
Oct 21 Javascript
vue-lazyload使用总结(推荐)
Nov 01 #Javascript
vue 中基于html5 drag drap的拖放效果案例分析
Nov 01 #Javascript
Vue列表渲染的示例代码
Nov 01 #Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 #Javascript
Vue表单输入绑定的示例代码
Nov 01 #Javascript
浅谈Angular 观察者模式理解
Nov 01 #Javascript
详解vuex状态管理模式
Nov 01 #Javascript
You might like
PHP解耦的三重境界(浅谈服务容器)
2017/03/13 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
PHP实现抽奖功能实例代码
2020/06/30 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
JS学习之一个简易的日历控件
2010/03/24 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
2013/02/01 Javascript
JS限制Textarea文本域字符个数的具体实现
2013/08/02 Javascript
js与运算符和或运算符的妙用
2014/02/14 Javascript
JavaScript定时器和优化的取消定时器方法
2015/07/03 Javascript
几句话带你理解JS中的this、闭包、原型链
2016/09/26 Javascript
vue使用watch 观察路由变化,重新获取内容
2017/03/08 Javascript
关于JavaScript的单双引号嵌套问题
2017/08/20 Javascript
详解vue axios中文文档
2017/09/12 Javascript
vue单页应用加百度统计代码(亲测有效)
2018/01/31 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
理解 JavaScript EventEmitter
2018/03/29 Javascript
微信小程序实现授权登录
2019/05/15 Javascript
vue+django实现一对一聊天功能的实例代码
2019/07/17 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
2020/05/31 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
[02:36]DOTA2英雄基础教程 帕格纳
2014/01/20 DOTA
Python中无限元素列表的实现方法
2014/08/18 Python
Python 经典面试题 21 道【不可错过】
2018/09/21 Python
对python的unittest架构公共参数token提取方法详解
2018/12/17 Python
Python3离线安装Requests模块问题
2019/10/13 Python
Django restframework 框架认证、权限、限流用法示例
2019/12/21 Python
详解CSS3的box-shadow属性制作边框阴影效果的方法
2016/05/10 HTML / CSS
CPB肌肤之钥美国官网:Clé de Peau Beauté
2017/09/05 全球购物
eBay荷兰购物网站:eBay.nl
2020/06/26 全球购物
简述安装Slackware Linux系统的过程
2012/01/12 面试题
护士见习期自我鉴定
2014/02/08 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
户外活动总结
2015/02/04 职场文书
初中团委工作总结
2015/08/13 职场文书
三好学生主要事迹怎么写
2015/11/03 职场文书