無聊看看

發表文章

Vue 3.0 -5 slot

摘要 Vue 3.0 -5 slot 摘要 slot用來將組件定義插槽使用，可將組件的插槽內容，由上層元件(呼叫層)所決定顯示的內容，分為三種 (1) 默認插槽: 默認組件插入的位置 (2) 具名插槽:插入具名的插槽 (3) 作用域插槽:由父組件來決定顯示的樣式例如:提供圖片使用可以命名為useImage；默認插槽我們利用slot將商品內容，可以根據我們需要擺放資料格式來擺放這是商品的圖卡，支援文字、圖片、影像，將 slot顯示內容檔案路徑: slot\Category.vue <template> < div class = "category" > < h2 > {{ title}} </ h2 > < slot > </ slot > </ div > </template> < script setup lang = "ts" name = "category" > defineProps ([ "title" ]) </ script > < style scoped > .category { background-color : aqua; border-radius : 10px ; box-shadow : 0 0 10px ; padding : 10px ; margin : 0px 10px 0px 10px ; width : 200px ; height : 300px ; } h2 { background-color : orange;

閱讀完整內容

Vue 3.0 -4 hooks自定義

摘要 Vue 3.0 -4 hooks自定義摘要 hooks 直譯是"鉤子"，hooks命名方式為useXXXX，以use為開頭。所以Hooks是一種自訂的獨立的組件其將封裝內部邏輯，讓該hooks可以重複使用。例如:提供圖片使用可以命名為useImage； hooks範例 Hook宣告方式檔案路徑: hooks\useCalculate.ts import { ref } from "vue" ; /** * @description 計算總和的參數 * @param { number } interval 間隔 * @param { number } initValue 初始值 **/ interface useCountParam{ interval : number ; initValue?: number ; } export default function useCalculate ( {initValue= 0 , interval}:useCountParam ){ const sum = ref (initValue) ; function increase ( ): void { sum. value += interval ; } function decrease ( ): void { sum. value -= interval ; } return { sum, increase, decrease } } HooksView.vue <template> <div> <hr> <img v-for=

閱讀完整內容

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 ``` 這條命令將安裝 `n`，這是一個 npm

閱讀完整內容

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 (); //只會抓到自己的titl

閱讀完整內容

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 = "高雄市" console . log (n

閱讀完整內容

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" > import

閱讀完整內容

無聊看看

搜尋此網誌

發表文章

Vector Search and Embeddings 向量搜尋與生成嵌入

Vue 3.0 -5 slot

Vue 3.0 -4 hooks自定義

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

Vue 3.0 -4 標籤參考ref

Vue 3.0 -2 Ref&reactive教學

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