vue使用codemirror的兩種用法
這是我自己做的一個左邊點擊對應(yīng)的標(biāo)題，右邊顯示相應(yīng)代碼的一個功能。代碼顯示這里用的是vue-codemirror插件。
第一種用法：
1、安裝：npm install vue-codemirror --save
2、在main.js中引入
import VueCodeMirror from 'vue-codemirror' import 'codemirror/lib/codemirror.css' Vue.use(VueCodeMirror)
3、在組件中使用
import { codemirror } from 'vue-codemirror'
import "codemirror/theme/ambiance.css"; // 這里引入的是主題樣式，根據(jù)設(shè)置的theme的主題引入，一定要引入?。?
require("codemirror/mode/javascript/javascript"); // 這里引入的模式的js，根據(jù)設(shè)置的mode引入，一定要引入??！
在組件中聲明：
components:{
codemirror
},
html代碼寫法：
<codemirror ref="mycode" :value="curCode" :options="cmOptions" class="code"> </codemirror>
data中cmOptions的配置，這里我寫的比較簡單，具體的配置項，可以去查官方文檔
curCode:'',
cmOptions:{
value:'',
mode:"text/javascript",
theme: "ambiance",
readOnly:true,
}
第二種用法：
第1步、第2步和第一種用法中的相同
3、在組件中使用
import CodeMirror from 'codemirror/lib/codemirror'
import "codemirror/theme/ambiance.css";
require("codemirror/mode/javascript/javascript");
在組件中寫法，要寫在 mounted中：
mounted(){
this.editor = CodeMirror.fromTextArea(this.$refs.mycode, {
mode:"text/javascript",
theme: "ambiance",
readOnly:true,
},
html代碼寫法：
<textarea ref="mycode" class="codesql public_text" v-model="code"></textarea>
在切換改變值的方法，需要用到setValue方法，而在第一種方式中直接改變v-model綁定的值就可以了
changeCode(value){
this.code = value;
this.editor.setValue(this.code);
}
總結(jié)
以上所述是小編給大家介紹的vue使用codemirror的兩種用法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
vue點擊按鈕跳轉(zhuǎn)到另一個vue頁面實現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue點擊按鈕跳轉(zhuǎn)到另一個vue頁面的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
vue3+element?plus中利用el-menu如何實現(xiàn)路由跳轉(zhuǎn)
這篇文章主要給大家介紹了關(guān)于vue3+element?plus中利用el-menu如何實現(xiàn)路由跳轉(zhuǎn)的相關(guān)資料,在Vue?Router中我們可以使用el-menu組件來實現(xiàn)菜單導(dǎo)航,通過點擊菜單項來跳轉(zhuǎn)到不同的路由頁面,需要的朋友可以參考下2023-12-12
關(guān)于vue使用ant design vue,打包后a-date-picker控件無法選擇日期的問題
這篇文章主要介紹了關(guān)于vite .env.test環(huán)境使用ant design vue,打包后a-date-picker控件無法選擇日期的問題,本文針對這個問題提供了解決方法,需要的朋友可以參考下2023-04-04
uni-app自定義導(dǎo)航欄按鈕|uniapp仿微信頂部導(dǎo)航條功能
這篇文章主要介紹了uni-app自定義導(dǎo)航欄按鈕|uniapp仿微信頂部導(dǎo)航條,需要的朋友可以參考下2019-11-11
Vue2.0使用嵌套路由實現(xiàn)頁面內(nèi)容切換/公用一級菜單控制頁面內(nèi)容切換(推薦)
這篇文章主要介紹了Vue2.0使用嵌套路由實現(xiàn)頁面內(nèi)容切換/公用一級菜單控制頁面內(nèi)容切換,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
這篇文章主要介紹了vue如何使用文件流進行下載(new Blob)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
在Vue3項目中使用VueCropper裁剪組件實現(xiàn)裁剪及預(yù)覽效果
這篇文章主要介紹了在Vue3項目中使用VueCropper裁剪組件（裁剪及預(yù)覽效果）,本文分步驟結(jié)合實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
Vue+Electron打包桌面應(yīng)用(超詳細完整教程)
這篇文章主要介紹了Vue+Electron打包桌面應(yīng)用超詳細完整教程,在這大家要記住整個項目的json文件不能有注釋,及時沒報錯也不行,否則運行命令時還是有問題,具體細節(jié)問題參考下本文詳細講解2024-02-02
vuejs數(shù)據(jù)超出單行顯示更多，點擊展開剩余數(shù)據(jù)實例
這篇文章主要介紹了vuejs數(shù)據(jù)超出單行顯示更多，點擊展開剩余數(shù)據(jù)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了vue深復(fù)制的相關(guān)資料，非常不錯，具有參考借鑒價值，需要的朋友參考下2018-01-01