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 相关文章推荐
javascript函数库-集合框架
Apr 27 Javascript
ExtJs 3.1 XmlTreeLoader Example Error
Feb 09 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
Jan 24 Javascript
javascript间隔刷新的简单实例
Nov 14 Javascript
js实现select下拉框菜单
Dec 08 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
Jan 18 Javascript
完美的js图片轮换效果
Feb 05 Javascript
vue之数据交互实例代码
Jun 16 Javascript
微信小程序实现图片放大预览功能
Oct 22 Javascript
把vue-router和express项目部署到服务器的方法
Feb 21 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
Aug 20 Javascript
JS计算斐波拉切代码实例
Sep 12 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
使ecshop模板中可引用常量的实现方法
2011/06/02 PHP
PHP setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
2011/11/09 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
2014/12/05 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
2015/04/06 Javascript
正则表达式替换html元素属性的方法
2016/11/26 Javascript
Javascript中常用类型的格式化方法小结
2016/12/26 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
ES6解构赋值的功能与用途实例分析
2017/10/31 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
2018/02/01 Javascript
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
checkbox在vue中的用法小结
2018/11/13 Javascript
layDate日期控件使用方法详解
2018/11/15 Javascript
使用JS实现动态时钟
2020/03/12 Javascript
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
在Python中使用PIL模块处理图像的教程
2015/04/29 Python
Python用模块pytz来转换时区
2016/08/19 Python
Python 内置函数complex详解
2016/10/23 Python
Python实现按当前日期(年、月、日)创建多级目录的方法
2018/04/26 Python
python中ASCII码字符与int之间的转换方法
2018/07/09 Python
详解Pandas之容易让人混淆的行选择和列选择
2019/07/10 Python
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
开办加工厂创业计划书
2014/01/03 职场文书
坚定理想信念心得体会
2014/03/11 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
出纳工作检讨书范文
2014/12/27 职场文书
MySQL中正则表达式(REGEXP)使用详解
2022/07/07 MySQL
如何用H5实现好玩的2048小游戏
2022/07/23 HTML / CSS