跳到主要內容

發表文章

目前顯示的是 8月, 2024的文章

node版本更新方法(mac平台)

使用 brew命令更新node出現錯誤Error,訊息,可以使用下列方法解決 Bryantde-MBP:Documents bryantlin$ brew upgrade node Error :     homebrew-core is a shallow clone. To `brew update`, first run:   git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core fetch --unshallow This command may take a few minutes to run due to the large size of the repository. This restriction has been made on GitHub's request because updating shallow clones is an extremely expensive operation due to the tree layout and traffic of Homebrew/homebrew-core and Homebrew/homebrew-cask. We don't do this for you automatically to avoid repeatedly performing an expensive unshallow operation in CI systems (which should instead be fixed to not use shallow clones). Sorry for the inconvenience! Warning: node 17.0.1 already installed 在 Mac 上的 更新 Node  方法 1. 打開終端並使用以下命令檢查當前的 Node 版本: ``` node -v ```  2. 使用以下命令清理 npm 緩存: ``` npm cache clean --force ``` 這樣可以減少在更新過程中發生問題的可能性。 3. 使用以下命令安裝 `n` 包: ``` npm install -g n ``` 這條命令將...

Vue 3.0 -4 標籤參考ref

摘要 Vue 3.0 -4 標籤參考ref 摘要 標籤參考ref用來 id=title2相同名稱衝突 解決母子組件當有相同名稱衝突時,宣告ref只有自己的頁面才可以訪問 組件使用ref時,必須組件定義defineExport({})才可以讓上層的組件可以訪問 App.vue <template> < div class = "app" > < div ref = "title2" > 您好 </ div > < button @ click = "showLog" > 顯示id=title的值 </ button > < button @ click = "showSubRef" > 顯示組件的ref值 </ button > < main-watch-tag-ref ref = "subRef" > </ main-watch-tag-ref > </ div > </template> < script lang = "ts" setup name = "App" > import MainWatchTagRef from '@/components/MainWatchTagRef.vue' ; import { ref } from 'vue' //建立title2用於儲存ref的標籤內容 let title2 = ref (); //抓取組件的ref值 let subRef = ref (); ...

Vue 3.0 -2 Ref&reactive教學

摘要 Vue 3.0 -2 Ref&reactive教學 摘要 Vue 3 不用使用data()的方式去定義響應式數據,我們利用ref()和reactive()來定義響應式數據 ref 當我們宣告 let name= ref("張三") 可以使用 console.log(name) 打印出來,發現張三被宣告為一個RefImpl對象。而address 就是一般的字串,表示該屬性未來不會做任何變更。 ref建立的響應式對象必須使用.value來取得/更新數據 ref()用來宣告基本類型數據 <template> < div class = "person" > < h2 > Ref 宣告範例 </ h2 > < br > < h3 > 姓名: {{name}} </ h3 > < h3 > 地址: {{address}} </ h3 > < button @ click = "UpdateName" > 更改為李四 </ button > </ div > </ template > < script lang = "ts" setup name = "MainPersonRef" > import {ref} from 'vue' //加上ref宣告為響應式數據 let name= ref ( "張三" ) let address = "高雄市" c...

Vue3 第一堂 安裝與setup語法糖教學

摘要 Vue 3.0 -1 摘要 vue 3.0 2020年9月18日所發布,最新公開版本為v3.3.4,(1)性能提升 (2)支援TypeScript (3)新增setup語法糖 建立一個Vue3的專案 官方建議vite建立vue專案,快速建立、按需求編譯、快速熱重載 使用vite建立專案,需要先安裝nodejs 安裝指令: npm create vue@latest 安裝流程如下,依照自己需求安裝 < styl 安裝VS code 套件 (1) Vue - Official (2) Vue 3 Support - All In One 需要安裝專案裡面的npm套件,安裝完後,重開VS code,可以看到index.html為web application的入口 npm i 執行web application npm run dev 我們只要開發網頁應用程式元件、配置等等,都會在src資料夾 首先認識main.ts,將vue框架引入並掛載#app,#app為index.html的id=app,這是網站的根目錄 src/ /assets 靜態css、圖檔 /components vue元件 Composition API 風格 優勢相對於vue2使用的opton API的方式,利用函數的方式來組織代碼,可以將相關的功能寫在一起。 App.vue <template> < div class = "app" > < hl > 您好 </ hl > < main-person > </ main-person > </ div > </template> < script lang = "ts" ...