Vue 2&3 分享 === ###### tags: `Vue` --- ### 內容 - Bean Searcher - Vue2 - view-design(iview) - ajax - Vue3 - primevue - vuex - axios - vite --- ### Bean Searcher - 透過簡單的方式查詢想要的資料 - 達到分頁、排序、過濾的功能 - [官網文件](https://searcher.ejlchina.com/guide/latest/start.html) --- ### Vue2(view-design) - 範例 wio: vincent/demo21(含dynamic tag: demo21_js) - 對 Array 的幾種操作 - map、filter、splice、find、findIndex、reduce、flat、concat、join、push - 對字串的幾種操作 - split、replace、indexOf、concat、slice - regular expression - test、match ---- ### Vue2 - component - template - props - data - methods - beforeCreate、mounted、watch、computed ---- ### Vue2 - vue 的資料傳遞是一種one way binding的設計 - v-if、v-for、v-on、v-bind、v-show - 父傳子(props)、子呼叫父(emit) - ajax - get、post ---- ### Vue2 - 它是一個套件,也可以說它是一個框架 - 支援vue的套件,都可以包進來用看看 - 活用程度在於對javascript的熟悉度 --- ### Vue3(primevue) - [範例](https://github.com/vt167098/demo21-primevue/archive/refs/heads/main.zip) - 專案結構 - public 存放靜態資源 - src/components 存放.vue檔 - src/store 存放持久性資料(狀態管理) - app.vue 初始vue頁面 - main.js 主啟動js - router.js 路由設定 ---- ### Vue3(primevue) - [theme](https://primefaces.org/primevue/showcase/#/setup) - [primeflex](https://primefaces.org/primevue/showcase/#/primeflex) - [main.js](https://primefaces.org/primevue/showcase/#/toast) - [router.js](https://next.router.vuejs.org/guide/#javascript) ---- ### Vue3(vuex) - 存放資料的容器 ==> state - 資料在 one-way binding 下只能透過commit mutation改變 - 透過 dispatch action 存取外部資料 - srv/store/index.js ==> 控制注入指定的vuex ---- ### Vue3(vuex) - 程式結構 - state - actions - mutations - getters ---- ### Vue3 - props ==> 父傳子 - emit ==> 子更新父 - provide ==> 宣告建立(可跨多層) - inject ==> 呼叫注入(可跨多層) ---- ### Vue3(axios) - http的library,支援promise - promise 非同步處理 - fun1(同步) -> fun2(非同步) -> fun3(同步) - fun1(同步) -> fun3(同步) -> fun2(非同步) - async & await - promise的Syntactic sugar(語法糖) ---- ### Vue3(vite) - [vite.config.js](https://vitejs.dev/config/#config-file-resolving) - proxy ==> 簡化call api繁雜的問題 - build ==> vite build --base=/my/public/path/ --- # END