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 相关文章推荐
jQuery弹出层插件简化版代码下载
Oct 16 Javascript
JavaScript 面向对象的之私有成员和公开成员
May 04 Javascript
javascript调试说明
Jun 07 Javascript
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
May 24 Javascript
验证手机号码的JS方法分享
Sep 10 Javascript
javascript制作sql转换为stringBuffer的小工具
Apr 03 Javascript
JavaScript多图片上传案例
Sep 28 Javascript
JavaScript获取对象在页面中位置坐标的方法
Feb 03 Javascript
js基于cookie方式记住返回页面用法示例
May 27 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
Feb 27 Javascript
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
微信小程序swiper实现滑动放大缩小效果
Nov 15 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
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
php中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
Zend Framework动作助手Redirector用法实例详解
2016/03/05 PHP
PHP实现微信支付(jsapi支付)流程步骤详解
2018/03/15 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
初窥JQuery(二)事件机制(2)
2010/12/06 Javascript
JavaScript的漂亮的代码片段
2013/06/05 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
2013/12/03 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
2015/03/31 Javascript
javascript实现图片上传前台页面
2015/08/18 Javascript
jQuery实现文本框邮箱输入自动补全效果
2015/11/17 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
JavaScript与java语言有什么不同
2016/09/22 Javascript
Javascript中常用的检测方法小结
2016/10/08 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
2020/08/10 Javascript
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
Python编程使用NLTK进行自然语言处理详解
2017/11/16 Python
[原创]Python入门教程5. 字典基本操作【定义、运算、常用函数】
2018/11/01 Python
django页面跳转问题及注意事项
2019/07/18 Python
解决Python命令行下退格,删除,方向键乱码(亲测有效)
2020/01/16 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
荷兰男士时尚网上商店:Suitable
2017/12/25 全球购物
高尔夫球鞋、服装、手套和装备:FootJoy
2018/12/15 全球购物
Dr. Martens马汀博士法国官网:马丁靴鼻祖
2020/01/15 全球购物
大学生四年生活自我鉴定
2013/11/21 职场文书
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
信息技术专业大学生职业生涯规划书
2014/01/24 职场文书
电气自动化个人求职信范文
2014/02/03 职场文书
舞蹈比赛获奖感言
2014/02/04 职场文书
献爱心倡议书
2014/04/14 职场文书
2014年班主任工作总结
2014/11/08 职场文书