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 相关文章推荐
jquery判断checkbox(复选框)是否被选中的代码
Oct 20 Javascript
详谈JavaScript内存泄漏
Nov 14 Javascript
Javascript基础教程之while语句
Jan 18 Javascript
jquery.map()方法的使用详解
Jul 09 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 Javascript
javascript 用函数实现继承详解
May 28 Javascript
bootstrap switch开关组件使用方法详解
Aug 22 Javascript
JavaScript生成简单等差数列
Nov 28 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 Javascript
一些可能会用到的Node.js面试题
Jun 15 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 Javascript
在Angular项目使用socket.io实现通信的方法
Jan 05 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
php _autoload自动加载类与机制分析
2012/02/10 PHP
PHP扩展开发入门教程
2015/02/26 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
js读取注册表的键值示例
2013/09/25 Javascript
浅谈JavaScript正则表达式分组匹配
2015/04/10 Javascript
jQuery的css() 方法使用指南
2015/05/03 Javascript
JavaScript实现将UPC转换成ISBN的方法
2015/05/26 Javascript
简介JavaScript中search()方法的使用
2015/06/06 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
2016/02/18 Javascript
javascript计时器编写过程与实现方法
2016/02/29 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
2016/09/23 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
vue使用原生swiper代码实例
2020/02/05 Javascript
Python 中pandas.read_excel详细介绍
2017/06/23 Python
分享一个可以生成各种进制格式IP的小工具实例代码
2017/07/28 Python
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
Python管理Windows服务小脚本
2018/03/12 Python
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
elasticsearch python 查询的两种方法
2019/08/04 Python
CSS3教程(7):CSS3嵌入字体
2009/04/02 HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
比较基础的php面试题及答案-填空题
2014/04/26 面试题
说出数据连接池的工作机制是什么?
2013/04/19 面试题
个人对照检查材料
2014/02/12 职场文书
竞选学习委员演讲稿
2014/04/28 职场文书
中考百日冲刺决心书
2015/09/22 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书
vue的项目如何打包上线
2022/04/13 Vue.js