vue使用codemirror的兩種用法

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

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

這是我自己做的一個左邊點擊對應的標題，右邊顯示相應代碼的一個功能。代碼顯示這里用的是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ù)設置的theme的主題引入，一定要引入??！
require("codemirror/mode/javascript/javascript"); // 這里引入的模式的js，根據(jù)設置的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);
}

總結

以上所述是小編給大家介紹的vue使用codemirror的兩種用法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！

您可能感興趣的文章:

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