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 相关文章推荐
全面接触神奇的Bootstrap导航条实战篇
Aug 01 Javascript
如何在Angular.JS中接收并下载PDF
Nov 26 Javascript
DWR3 访问WEB元素的两种方法实例详解
Jan 03 Javascript
Vue中添加过渡效果的方法
Mar 16 Javascript
删除table表格行的实例讲解
Sep 21 Javascript
AngularJS中scope的绑定策略实例分析
Oct 30 Javascript
node 命令方式启动修改端口的方法
May 12 Javascript
layer设置maxWidth及maxHeight解决方案
Jul 26 Javascript
vue+axios实现post文件下载
Sep 25 Javascript
Vue 打包体积优化方案小结
May 20 Javascript
ztree+ajax实现文件树下载功能
May 18 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
ThinkPHP的URL重写问题
2014/06/22 PHP
php cli配置文件问题分析
2015/10/15 PHP
详解PHP的Yii框架中自带的前端资源包的使用
2016/03/31 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
javascript parseInt与Number函数的区别
2010/01/21 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
2016/06/09 Javascript
js两种拼接字符串的简单方法(必看)
2016/09/02 Javascript
Javascript的this用法
2017/01/16 Javascript
H5图片压缩与上传实例
2017/04/21 Javascript
react native 获取地理位置的方法示例
2018/08/28 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
javascript实现的字符串转换成数组操作示例
2019/06/13 Javascript
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
Python及Django框架生成二维码的方法分析
2018/01/31 Python
Python3 replace()函数使用方法
2018/03/19 Python
Php多进程实现代码
2018/05/07 Python
python 不以科学计数法输出的方法
2018/07/16 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
pyqt5利用pyqtDesigner实现登录界面
2019/03/28 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
图解python全局变量与局部变量相关知识
2019/11/02 Python
手把手教你安装Windows版本的Tensorflow
2020/03/26 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
python如何调用php文件中的函数详解
2020/12/29 Python
使用简单的CSS3属性实现炫酷读者墙效果
2014/01/08 HTML / CSS
EMPHASIS艾斐诗官网:周生生旗下原创精品珠宝品牌
2020/12/17 全球购物
介绍java中初始化块的使用
2012/09/11 面试题
遇到的Mysql的面试题
2014/06/29 面试题
鲜果饮品店创业计划书
2014/01/21 职场文书
环保建议书作文
2014/03/12 职场文书
我的求职择业计划书
2014/04/04 职场文书
慈善捐赠倡议书
2014/08/30 职场文书
2019年个人工作总结范文
2019/03/25 职场文书
Django+Nginx+uWSGI 定时任务的实现方法
2022/01/22 Python