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 相关文章推荐
ppk谈JavaScript style属性
Oct 10 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
Aug 02 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
JS实现的省份级联实例代码
Jun 24 Javascript
JS正则表达式比较常见用法
Jan 26 Javascript
jQuery点击头像上传并预览图片
Feb 23 Javascript
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
深入浅析Vue.js计算属性和侦听器
May 05 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
Jul 19 Javascript
微信小程序http连接访问解决方案的示例
Nov 05 Javascript
Vue.js组件使用props传递数据的方法
Oct 19 Javascript
微信小程序弹窗禁止页面滚动的实现代码
Dec 30 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
重置版战役片段
2020/04/09 魔兽争霸
thinkphp实现图片上传功能
2016/01/13 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
jQuery 使用手册(六)
2009/09/23 Javascript
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
2013/08/21 Javascript
Js nodeType 属性全面解析
2013/11/14 Javascript
javascript unicode与GBK2312(中文)编码转换方法
2013/11/14 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
JS获取表格内指定单元格html内容的方法
2015/03/31 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
浏览器兼容性问题大汇总
2015/12/17 Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
2016/03/11 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
2017/02/08 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
2017/05/26 Javascript
使用react-router4.0实现重定向和404功能的方法
2017/08/28 Javascript
使用cropper.js裁剪头像的实例代码
2017/09/29 Javascript
Angularjs中date过滤器失效的问题及解决方法
2018/07/06 Javascript
微信小程序用户信息encryptedData详解
2018/08/24 Javascript
对Vue beforeRouteEnter 的next执行时机详解
2018/08/25 Javascript
python删除列表中重复记录的方法
2015/04/28 Python
Python实现计算字符串中出现次数最多的字符示例
2019/01/21 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
Python通过zookeeper实现分布式服务代码解析
2020/07/22 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
捷克汽车配件和工具销售网站:TorriaCars
2018/02/26 全球购物
PHP如何自定义函数
2016/09/16 面试题
药品业务员岗位职责
2014/04/17 职场文书
人事任命书怎么写
2014/06/05 职场文书
2014物价局群众路线对照检查材料思想汇报
2014/09/21 职场文书
上课迟到检讨书
2015/05/06 职场文书
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python