vue中使用codemirror的实例详解

 更新时间:2018年11月01日 16:03:45   作者:遇你温柔如初  
这篇文章主要介绍了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')

当然组件需要先声明

  components:{
    codemirror
  }

 html代码这样写:

js:

 

style:

总结

以上所述是小编给大家介绍的vue中使用codemirror的实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • element-ui tooltip修改背景颜色和箭头颜色的实现

    element-ui tooltip修改背景颜色和箭头颜色的实现

    这篇文章主要介绍了element-ui tooltip修改背景颜色和箭头颜色的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • VUE实现大转盘抽奖

    VUE实现大转盘抽奖

    营运三宝(九宫格、大转盘、老虎机,当然此三宝当然是最基础的营销运营手段),本片文章聊聊大转盘,转盘的实现逻辑应该是营销方案较为简单的一种了,本文将介绍如何实现大转盘抽奖,感兴趣的朋友可以参考下
    2021-05-05
  • 浅谈Vue 性能优化之深挖数组

    浅谈Vue 性能优化之深挖数组

    这篇文章主要介绍了浅谈Vue 性能优化之深挖数组,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12
  • vite+element-plus项目基础搭建的全过程

    vite+element-plus项目基础搭建的全过程

    最近看完Vue3和Vite文档之后,就写了个小demo,整体感觉下来还是很丝滑的,下面这篇文章主要给大家介绍了关于vite+element-plus项目基础搭建的全过程,需要的朋友可以参考下
    2022-07-07
  • Vue虚拟Dom到真实Dom的转换

    Vue虚拟Dom到真实Dom的转换

    本文主要介绍了Vue虚拟Dom到真实Dom的转换,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2021-07-07
  • elementui使用el-upload组件实现自定义上传的详细步骤

    elementui使用el-upload组件实现自定义上传的详细步骤

    upload上传是前端开发很常用的一个功能,在Vue开发中常用的Element组件库也提供了非常好用的upload组件,这篇文章主要给大家介绍了关于elementui使用el-upload组件实现自定义上传的详细步骤,需要的朋友可以参考下
    2023-12-12
  • vue导出excel的两种实现方式代码

    vue导出excel的两种实现方式代码

    这篇文章主要给大家介绍了关于vue导出excel的两种实现方式,在项目中我们可能会碰到导出Excel文件的需求,文中给出了详细的代码示例,需要的朋友可以参考下
    2023-08-08
  • vite项目如何从0开始配置eslint

    vite项目如何从0开始配置eslint

    这篇文章主要介绍了vite项目如何从0开始配置eslint问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue/react单页应用后退不刷新方案

    vue/react单页应用后退不刷新方案

    本文主要介绍了vue/react单页应用后退不刷新方案,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • Vue2.0实现组件数据的双向绑定问题

    Vue2.0实现组件数据的双向绑定问题

    这篇文章主要介绍了Vue2.0实现组件数据的双向绑定问题,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-03-03

最新评论