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 动态调整图片尺寸实现代码
Dec 28 Javascript
js中function()使用方法
Dec 24 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
JavaScript也谈内存优化
Jun 06 Javascript
js简单判断移动端系统的方法
Feb 25 Javascript
BootStrap的JS插件之轮播效果案例详解
May 16 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
Mar 13 Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 Javascript
详解使用mocha对webpack打包的项目进行"冒烟测试"的大致流程
Apr 27 Javascript
浅谈js数组splice删除某个元素爬坑
Oct 14 Javascript
全面解析Vue中的$nextTick
Dec 24 Vue.js
一定要知道的 25 个 Vue 技巧
Nov 02 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
咖啡冲泡指南 咖啡有哪些制作方式 单品咖啡 意式咖啡
2021/03/06 冲泡冲煮
PHP session有效期session.gc_maxlifetime
2011/04/20 PHP
PHP时间格式控制符对照表分享
2013/07/23 PHP
PHP fopen()和 file_get_contents()应用与差异介绍
2014/03/19 PHP
浅谈PHP eval()函数定义和用法
2016/06/21 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
Jquery cookie操作代码
2010/03/14 Javascript
jQuery使用ajaxSubmit()提交表单示例
2014/04/04 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
浅谈JS继承_借用构造函数 & 组合式继承
2016/08/16 Javascript
详解微信小程序 template添加绑定事件
2017/06/23 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
原生js实现移动端Touch轮播图的方法步骤
2019/01/03 Javascript
详解微信小程序获取当前时间及日期的方法
2019/04/28 Javascript
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
2020/09/16 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
深入理解Python变量与常量
2016/06/02 Python
Python实现对字符串的加密解密方法示例
2017/04/29 Python
python爬取网页转换为PDF文件
2018/06/07 Python
PyCharm代码整体缩进,反向缩进的方法
2018/06/25 Python
利用python list完成最简单的DB连接池方法
2019/08/09 Python
Keras: model实现固定部分layer,训练部分layer操作
2020/06/28 Python
html5的input的required使用中遇到的问题及解决方法
2018/04/24 HTML / CSS
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
Piercing Pagoda官网:耳环、戒指、项链、手链等
2020/09/28 全球购物
一份软件工程师的面试试题
2016/02/01 面试题
装修施工安全责任书
2014/07/24 职场文书
起诉状范本
2015/05/20 职场文书
Redis读写分离搭建的完整步骤
2021/09/14 Redis
详解Go语言中配置文件使用与日志配置
2022/06/01 Golang
如何利用python创作字符画
2022/06/25 Python