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中令你抓狂的魔术变量
Nov 30 Javascript
js模拟弹出效果代码修正版
Aug 07 Javascript
Bootstrap每天必学之按钮(一)
Nov 24 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 Javascript
js实现显示手机号码效果
Mar 09 Javascript
Vue.js bootstrap前端实现分页和排序
Mar 10 Javascript
Angular中管道操作符(|)的使用方法
Dec 15 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
Jan 05 Javascript
微信小程序 checkbox使用实例解析
Sep 09 Javascript
Vue3.0 响应式系统源码逐行分析讲解
Oct 14 Javascript
JS创建自定义对象的六种方法总结
Dec 15 Javascript
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
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验证码
2015/05/04 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
PHP dirname简单使用代码实例
2020/11/13 PHP
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
详解AngularJS Filter(过滤器)用法
2015/12/28 Javascript
Bootstrap每天必学之轮播(Carousel)插件
2016/04/25 Javascript
jQuery简单获取DIV和A标签元素位置的方法
2017/02/07 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
微信小程序checkbox组件使用详解
2018/01/31 Javascript
create-react-app构建项目慢的解决方法
2018/03/14 Javascript
js贪心算法 钱币找零问题代码实例
2019/09/11 Javascript
微信小程序实现上传多个文件 超过10个
2020/03/30 Javascript
[01:35]2018年度CS GO最佳战队-完美盛典
2018/12/17 DOTA
python3实现ftp服务功能(服务端 For Linux)
2017/03/24 Python
Python编程中flask的简介与简单使用
2018/12/28 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
Python List列表对象内置方法实例详解
2019/10/22 Python
Python random模块制作简易的四位数验证码
2020/02/01 Python
PyCharm永久激活方式(推荐)
2020/09/22 Python
python3.7调试的实例方法
2020/07/21 Python
美国钻石商店:Zales
2016/11/20 全球购物
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
优秀应届生推荐信
2013/11/09 职场文书
旅游管理专业个人求职信范文
2013/12/24 职场文书
大学毕业生个人自荐信范文
2014/01/08 职场文书
《问银河》教学反思
2014/02/19 职场文书
施工质量承诺书范文
2014/05/30 职场文书
城市创卫标语
2014/06/17 职场文书
2015年小学生自我评价范文
2015/03/03 职场文书
端午节寄语2015
2015/03/23 职场文书
体育委员竞选稿
2015/11/21 职场文书
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python
golang操作rocketmq的示例代码
2022/04/06 Golang