Andy的前後端技術筆記、生活紀錄
codemirror 設定(註冊)事件觸發Codemirror.on
發佈於: 2023-01-16 更新於: 2024-04-21 分類於: frontend

codemirror

什麼是codemirror,它是一款可以實現在前端網頁上的編輯器。
如同現在網路上看到的文字編輯器一樣,但你可以去設定當使用者做哪些操作時codemirror做哪些對應的行為。
CodeMirror v5

閱讀更多

在JS中複製object-深拷貝/淺拷貝
發佈於: 2023-01-14 更新於: 2024-04-21 分類於: frontend

在JS複製object

在寫code有時候會需要使用某些變數或是object,但是又不希望直接對其做操作,因為可能在其他地方會繼續使用原始的object,
這時候就會宣告一個新的變數去把原先的object assign過去。

1
2
3
4
5
6
7
8
9
const source = {name:'Andy',coutry:'Taiwan',phone:'0911-111-111'}
//原始資料

const destination = source
//新變數
destination.name = 'Rendy';

console.log(destination.name); //結果: Rendy
console.log(source.name); //結果: Rendy
閱讀更多
在vue中把變數傳進css
發佈於: 2023-01-14 更新於: 2024-04-21 分類於: frontend

某些時候會希望動態改變css的樣式高度、寬度、顏色…等等的
在vue中可以宣告一個ref變數(composition API),然後把搭丟到vue檔案中的

中,又或者透過inline的方式直接插入到html tag中,舉例如下:

1
2
3
4
setup(){
const mdSize = ref("100px");

}
閱讀更多
如何修改NPM下載的程式碼
發佈於: 2023-01-11 更新於: 2024-04-21 分類於: frontend

嘗試對npm下載的node_modules裡面的套件的code做修改,但是發現不論怎麼改都不會生效。
才發現在vite & vue3的環境下,vite把一些預先編譯好的東西放到node_modules/.vite中,
所以需要手動刪除這個資料夾去讓編譯器去編譯修改過的程式碼,又或者透過 npm run dev --force

閱讀更多
在vue中一次watch多個變數
發佈於: 2023-01-10 更新於: 2024-04-21 分類於: frontend

在Vue3 & Composition下,想一次watch多個變數的實現方法

1
2
3
4
5
6
7
8
setup(){
const message = ref('');
const name = ref('');
watch([message,name],([newValueMessage,newValueName],[oldValueMessage,oldValueName])=>{
//do something
})
}

閱讀更多
如何在vue上建立codemirror編輯器
發佈於: 2023-01-09 更新於: 2024-04-21 分類於: frontend

什麼是codemirror

codemirror是一個可以應用在web頁面的程式碼編輯器。

如何使用?

前一陣子為了寫一個markdown編輯器尋尋覓覓的網路上搜尋資料,找到codemirror,後來在vue上實現它。

閱讀更多
JS中的Async/Sync
發佈於: 2023-01-01 更新於: 2024-04-21 分類於: frontend

同步與非同步?

什麼是同步

一般來說JS都是以 同步synchronous 的方式執行程式碼,以圖中左邊來說,由上而下的時間軸順序執行程式碼,每次只做一件事,
同步的字面上來說很像是同時做很多件事,但其實是一次只執行一件事。...

閱讀更多