無聊看看

摘要 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 :...

摘要 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> ...

使用 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 摘要 標籤參考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 不用使用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...

摘要 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" ...

摘要 Vuex 使用的方式 摘要 專案結構下通常會有多個組件，組件內可能又有組件，組件之間的溝通，通常會用到 emit 和 props，emit 回來，在維護與開發會造成元件之間耦合度太高，本次介紹Vuex框架主要是將資料、處理邏輯集中化處理，視為網站的全域狀態管理，簡化vue元件之間溝通成本，我們主要介紹核心方法:state、getter、mutation、actions，這四個概念，在大型前端系統開發，利用vuex框架可以減少UI之間的資訊傳遞導致程式碼的複雜度。 單個組件的狀態非常好管理，但當遇到多個組件共享 state 時，單向數據流的簡潔性就很容易被破壞，主要解決下列應用場景，例如： 多個view依賴同一個state 來自不同view的actions需要變更同一個state vuex使用限制 只有 mutation 可以改變 state，action --> commit --> mutation action: 可以處理 非同步 的事件，再利用  commit  與 mutation 溝通 mutation: 在處理事件是 同步 的 vuex應用架構: 開發時需要使用架構 import Vue from 'vue' import Vuex from 'vuex' Vue . use ( Vuex ); export const store = new Vuex . Store ({ //共享物件資訊 state :{ }, //物件計算屬性 getters :{ }, //用來同步state的方法 mutations :{ }, //使用非同步呼叫 actions :{ } }); State（data） 響應式的資料狀...