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 相关文章推荐
多浏览器支持的右下角浮动窗口
Apr 01 Javascript
基于Asp.net与Javascript控制的日期控件
May 22 Javascript
js实现的map方法示例代码
Jan 13 Javascript
JS获取下拉框显示值和判断单选按钮的方法
Jul 09 Javascript
jquery验证邮箱格式并显示提交按钮
Nov 07 Javascript
详解为Bootstrap Modal添加拖拽的方法
Jan 05 Javascript
微信小程序实现人脸识别
May 25 Javascript
深入浅析js原型链和vue构造函数
Oct 25 Javascript
JavaScript实现的开关灯泡点击切换特效示例
Jul 08 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
Dec 12 Javascript
Vue filter 过滤器、以及在table中的使用介绍
Sep 07 Javascript
vue 自定义组件添加原生事件
Apr 21 Vue.js
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 array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
拖动一个HTML元素
2006/12/22 Javascript
FireFox中textNode分片的问题
2007/04/10 Javascript
js 获取中文拼音,Select自动匹配字母获取值的代码
2009/09/23 Javascript
div层的移动及性能优化
2010/11/16 Javascript
javascript 10进制和62进制的相互转换
2014/07/31 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
javascript实现依次输入input自动定焦
2014/12/23 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
浅谈Javascript数组索引
2015/07/29 Javascript
jquery实现多条件筛选特效代码分享
2015/08/28 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
Bootstrap图片轮播组件使用实例解析
2016/06/30 Javascript
深入探讨Vue.js组件和组件通信
2016/09/12 Javascript
JS对象的深度克隆方法示例
2017/03/16 Javascript
JS实现将链接生成二维码并转为图片的方法
2018/03/17 Javascript
Vue.js进阶知识点总结
2018/04/01 Javascript
对 Vue-Router 进行单元测试的方法
2018/11/05 Javascript
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
python根据文件大小打log日志
2014/10/09 Python
Pandas之groupby( )用法笔记小结
2019/07/23 Python
python 并发编程 非阻塞IO模型原理解析
2019/08/20 Python
Python中Subprocess的不同函数解析
2019/12/10 Python
pytorch: Parameter 的数据结构实例
2019/12/31 Python
Django密码存储策略分析
2020/01/09 Python
python报错TypeError: ‘NoneType‘ object is not subscriptable的解决方法
2020/11/05 Python
CSS3的transition和animation的用法实例介绍
2014/08/20 HTML / CSS
标签和贴纸印刷:Lightning Labels
2018/03/22 全球购物
西部世纪.net笔试题面试题
2014/04/03 面试题
人事部主管岗位职责
2013/12/26 职场文书
交警失职检讨书
2015/01/26 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
利用python进行数据加载
2021/06/20 Python