vue使用codemirror的兩種用法

更新時(shí)間：2019年08月27日 13:33:59 作者：kristy1993

這篇文章主要介紹了在vue里使用codemirror的兩種用法,每種方法通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

這是我自己做的一個(gè)左邊點(diǎn)擊對(duì)應(yīng)的標(biāo)題，右邊顯示相應(yīng)代碼的一個(gè)功能。代碼顯示這里用的是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引入，一定要引入?。?/pre>

在組件中聲明：

components:{
   codemirror
 },

html代碼寫法：

<codemirror
   ref="mycode"
   :value="curCode"
   :options="cmOptions"
   class="code">
 </codemirror>

data中cmOptions的配置，這里我寫的比較簡(jiǎn)單，具體的配置項(xiàng)，可以去查官方文檔

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的兩種用法,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章:

相關(guān)文章

vue配置多頁(yè)面的實(shí)現(xiàn)方法
本篇文章主要介紹了vue配置多頁(yè)面的實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-05-05
vue中使用element日歷組件的示例代碼
這篇文章主要介紹了vue中如何使用element的日歷組件，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2021-09-09
VUE3基礎(chǔ)學(xué)習(xí)之click事件詳解
由于vue是一個(gè)雙向數(shù)據(jù)綁定的框架,它的點(diǎn)擊事件與以前常用的還是有很大的差別的,下面這篇文章主要給大家介紹了關(guān)于VUE3基礎(chǔ)學(xué)習(xí)之click事件的相關(guān)資料,需要的朋友可以參考下
2022-01-01
Vue router錯(cuò)誤跳轉(zhuǎn)到首頁(yè)("/")的問(wèn)題及解決
這篇文章主要介紹了Vue router錯(cuò)誤跳轉(zhuǎn)到首頁(yè)("/")的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue中mint-ui的使用方法
這篇文章主要為大家詳細(xì)介紹了vue中mint-ui的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-04-04
Vue 組件的掛載與父子組件的傳值實(shí)例
這篇文章主要介紹了Vue 組件的掛載與父子組件的傳值實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-09-09
vue關(guān)于重置表單數(shù)據(jù)出現(xiàn)undefined的解決
這篇文章主要介紹了vue關(guān)于重置表單數(shù)據(jù)出現(xiàn)undefined的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
詳解Vue.use自定義自己的全局組件
本篇文章主要介紹了Vue.use自定義自己的全局組件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06
Vue深入理解插槽slot的使用
最近被問(wèn)起是否了解vue的插槽（slot），咋一想發(fā)現(xiàn)，似乎很少用到這玩意。所以整理了下slot的一些用法
2022-08-08
vue深度優(yōu)先遍歷多層數(shù)組對(duì)象方式(相當(dāng)于多棵樹(shù)、三級(jí)樹(shù))
這篇文章主要介紹了vue深度優(yōu)先遍歷多層數(shù)組對(duì)象方式(相當(dāng)于多棵樹(shù)、三級(jí)樹(shù))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08