vue中使用codemirror
https://blog.csdn.net/oumaharuki/article/details/79268498 别人的记载,写的很不错,还有下载的方法
以下是自己使用过的,做出来的例子:
做出来的效果图:
记住使用之前要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的更多相关文章
- 在Vue中使用CodeMirror 格式显示错误 行数错乱 & 代码隐藏
项目需要在线展示和编辑Json文件,所以需要找一个代码编辑器,因为我们的项目直接使用的 vueAdmin-template 这个模板 json编辑器也是直接从 vue-element-admin 项目 ...
- 在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示
在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示) 1.使用npm安装依赖 npm install --save codemirror; 2.在页面中放入如下代码 ...
- vue中显示原网页代码--codemirror
在项目中遇到了一个需求,后台返回string类型的html源码,要求前端这边按照codeview这种类型把这个源码展示出来.现总结如下 1.如果没啥样式的需求,只是要求该缩进缩进的话,可以直接使用in ...
- vue(element)中使用codemirror实现代码高亮,代码补全,版本差异对比
vue(element)中使用codemirror实现代码高亮,代码补全,版本差异对比 使用的是vue语言,用element的组件,要做一个在线编辑代码,要求输入代码内容,可以进行高亮展示,可以切换各 ...
- vue中如何不通过路由直接获取url中的参数
前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...
- vue中的重要特性
一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Vue中comoputed中的数据绑定
Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...
- vue中使用stompjs实现mqtt消息推送通知
最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...
- Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理
基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...
随机推荐
- 1000! mod 10^250
1000! mod 10^250 =============== the answer is 2 ================ Hi I'm trying to solve the above ...
- LeetCode题解之Reverse Bits
1.题目描述 2.题目分析 使用bitset 类的方法 3.代码 uint32_t reverseBits(uint32_t n) { bitset<> b(n); string b_s ...
- Oracle EBS AP 供应商取值
SELECT --nvl(substr(po.vendor_name,1,instr(po.vendor_name,',',1)-1),po.vendor_name) vendor_name, po. ...
- Java简单的数据库连接
package test.postgre; import java.sql.Connection; import java.sql.DriverManager; import java.sql.Res ...
- 下拉刷新对象RefreshObject
下拉刷新对象RefreshObject 效果 说明 1. 分离了动画实现与刷新逻辑 2. 你可以根据自己的需要,设计自己的动画效果,你的动画只需要继承协议,实现协议里面的方法即可 3. 本设计方案是用 ...
- 最大公约数(GCD)与最小公倍数(LCM)的计算
给出两个数a.b,求最大公约数(GCD)与最小公倍数(LCM) 一.最大公约数(GCD) 最大公约数的递归: * 1.若a可以整除b,则最大公约数是b * 2.如果1不成立,最大公约数便是b ...
- 解决由于显卡驱动BUG导致桌面右键卡顿的问题:bat文件源码
@ ECHO OFF%1 mshta vbscript:CreateObject("Shell.Application").ShellExecute("cmd.exe&q ...
- $.ajax 在请求没有完成,是可以往下继续执行js代码的
$.ajax({ url:url, data:{}, success:function(arr) { var varHtml='<option value="" checke ...
- [T-ARA][yayaya]
歌词来源:http://music.163.com/#/song?id=22704449 U look at me Right T-ARA U Ready Let me seeya LaLaLaLa ...
- 学习python第三天数据库day2
day01回顾: 数据库: 定义:存储数据的仓库(database,简称db) 常用的数据库对象有哪些? 1).数据表(table) ***** 2).视图(view) 3).索引(index) 4) ...