Skip to content. | Skip to navigation

Personal tools

Navigation

You are here: Home / Tips / Vue.js

Vue.js

Circular Dependency 調整 import 順序可以避免錯誤 有時候為了把 CSS 插到 vuetify 裡面 component 最下面會同時有 <style scoped> 跟 <style> 前者穿不進 vuetify style 後者才有辦法…

同步/非同步 是指 computed 的取用,會是 sync 而 watch 裡面的 handler 是當值改變後,被 schedule 在 event queue 非同步執行的。cumputed 有變化到顯示這個階段是同步的,在這之前的ajax還是非同步的。如果透過 ajax 後才去誘發 computed 裡面的參考變化,整體來看還是非同步。應該是說被丟到下個 queue 處理,所以可以善用 $nextTick。

loader 重覆

Headless

什麼是 Headless? Contentful Gatsby over Next.js

有人有用 nuxt + typescript 嗎? 遇到用小老鼠@ 沒辦法引入 JS 的問題, 之前沒辦法引入.vue 用來這個方法:https://stackoverflow.com/questions/45555089/resolve-property-does-not-exist-on-type-vue-error 但是發現 JS 沒辦法引用

Vue 類似這樣用,用``字串模板

<img :src="require(`@/assets/images/img_${no}.png`)">

vue-cli vue.config.js 加進 laravel-mix 範例

Native Desktop Applications using Vue.js vue-js-best-practices

proxyTable changeOrigin Tools for Faster App Development static websites: headless CMS graphql Reusable Components Vue.js SaaS App; Task List Tutorial: #1 #2 Component Semantic UI + Vue.js Simple Todo Application Django + Vue.js Pyramid + Vue.js Vue.js v2 tutorial

Vuex: 全都用 Vuex 寫的話, 會讓團隊成員辨識程式碼的速度變慢, 沒必要傳到外層的東西留在上下層自己用, 可保有最小權限原則

slot 在 Vue.js 2.6 版本又更新語法了

Example Deploy a Vue.js Content Curation App in 3 Steps Vue Form Generator + Dexterity

Front-end Component

預設可以給空陣列,等 AJAX 完成後再塞入傳回值,時機選 created mounted 都可以。

v-if="object.item !== undefined"

子元件的 mounted 會比父元件的 mounted 還要早執行,在 mounted 使用 vue.$store 可取到資料,但卻無法直接選內部屬性,只讀到空值。

Generate Static Website Vue.js + GSAP = Animations

Going Serverless with Firebase

scroll-converter 禁止上下滑動但可左右滑動

Dynamically Load JS inside JS

Event 第一選擇是 props 傳遞, 第二是 this.$parent / this.$root 像 mixin 和 event submit 久了會難找到來源. eventBus: get unrelated sections of the app to talk to each other PubSubJS

關於使用者個資/結帳 這類的敏感資料,一定存在 backend, 你取得出來,代表 hacker 也可以取出來; 如果真的不得已,一定要用 HTTP header set-cookie 的方式 去 set httponly 而且要寫 domain,類似下列方式:

router.post('/payment', (req, res) =>  res.cookies('token', 'something').send(html) )

What Hooks Mean for Vue

dayjs().set('hour', '23').set('minute', '59');

像 locale i18n 相關的我會存本地端,但如果和內容相關的,除非你要作離線還可以看的東西,不然不太會存 API 能拉回來的東西。

how-to send Authorization Header with axios 在 Access-Control-Allow-Headers: Authorization 後端記得要加這個

輸入法選字啟動事件 Composition Event

有沒有辦法擁有一個 build 後還能修改的全局變量呢? 原理是把 config 獨立成一隻檔案並且 expose config 這個常數,有 import 的地方會變成去引用 global config variable

這是我的 webpack chain
```js
    if (ejectConfig) {
      config.entry('config').add(configPath);
      config.module
        .rule('config')
        .test(configPath)
        .use('expose')
        .loader('expose-loader')
        .options('config');
      config.externals({
        '#config': 'config',
      });
      config.output.filename(chunkData =>
        chunkData.chunk.name === 'config'
          ? 'assets/js/[name].js?[hash:8]'
          : 'assets/js/[name].[hash:8].js'
      );
      config.optimization.runtimeChunk(false);
    }
  },
```

Vue.js 前端工程師提出新UI開發方法論,要促進設計師與工程師更緊密的協作 | iThome - https://www.ithome.com.tw/news/133003 via "Tech News" by @imobaio

Vuex是為了解決單資料多相依的問題,如果你的components 有這個需求自然會用到,如果你覺得沒必要或是不合理那代表你目前的情境不需要,so 不用刻意去定義什麼情境要用什麼按需求使用即可

IE 11 不支援 template 的 tag 請服用 https://github.com/neovov/template-element-polyfill 我幫忙其他同事的專案處理這塊 結果發現 asp.net 語法的關係,所以連 @ 都會有問題 想了超久才想到 @ = v-on

swiper 降版本後可以處理 IE11 發生 SCRIPT1002: 語法錯誤

在父層加 transform 而導致子層的 fixed 失效, 這是因為 W3C 把控制範圍變成 div 範圍,而不在是視窗範圍了,請看規範 https://www.w3.org/TR/css-transforms-1/#transform-rendering 解決方法 多包一層 第一層 transform 不變 但要設定視窗範圍 別用 div 的控制範圍 https://codepen.io/hsucherng/pen/uBhft
應該是vue cli用express架伺服器,它幫你於背景提供http服務、熱加載、轉api等 到正式機就是看正式機所用的伺服器,vue cli編譯產出的前端code就是運行於瀏覽器

假設我的 data 裡面的某一筆資料沒有 name 的話要在姓名顯示一個預設值 如: 沒有名字 而不是空白 要怎麼改? https://codepen.io/hank-hsiao/pen/xxwxEGP?editors=1010

state切module放好選擇的master
因為 vuex 重新整理可能會失去資料 還是她重新整理重新跳回主檔
那問題應該是用戶重新整理.
作法應該是透過路由來紀錄當前master
路由沒有master id...那回到根畫面也是合情合理


我最近也在做圖片,處理的方式是
新增 -> 前端把圖裁切、縮圖、轉 EXIF 後,轉存成 base64 再發 API 給後端處理
編輯 -> 接收 API 傳的 url ,顯示的時候,要判斷一下是顯示預覽圖還是上傳按鈕
送出的時候:
1. 沒上傳新的檔案 -> 給空值 或 原圖的 url
2. 有傳 -> 新的 base64
3. 沒有圖 - 給 null

我是在點一個按鈕後,會將該 postData 傳到 vuex 的 states a 物件裡, component 會顯示 `$store.state.a.postData.id` 都可以抓到, 但是 `$store.state.a.postData.info.views` 就抓不到了, 我直接建立 `$store.state.a.testData.b.c` 的值,卻是可以抓到。 info 那一層不知道為什麼不能使用,但是從 devtool 看都是看得到資料的... 後來有朋友用這個方式有拿到... `(postData.info || {}).views`

你的 postData 如果是非同步,原本沒有預設 postData.info 的話, postData.info 在 render 畫面到時候拿到的是 undefined,造成瀏覽器 throw error 可以參考這篇 https://hackernoon.com/accessing-nested-objects-in-javascript-f02f1bd6387f

Vue CLI

Vue UI 是 CLI 的圖形化應用程式, 可以設定 https 支援.

可能你的navigation並不是相同object. 跑 navigation.goBack(); 時有沒有確定這個navigation是和上頁的同一個object?

我是這樣做的: 在index.js內用StackNavigator 然後內頁返回時用 this.props.navigation.goBack(); 轉頁時用this.props.navigation.dispatch(NavigationActions.reset({ 或是 this.props.navigation.navigate(

Windham Wong: 兩個object 在createbottomtabnavigator A的object detail頁面跳去B的object, 之後用戶按返回時,回去A detail保存頁面

Peter Lai: 如果是tabnavigator的話, navigate應該是同等級轉頁方式, 所以沒有加進stack內. stack的用意就是能疊加頁面(進門口後再進裡面門口), 給你回到前一頁, 而tabnavigator是同等級分頁(很多個門口選進那一個), 所以應該是架構上的問題

https://github.com/PanJiaChen/vue-element-admin/blob/master/src/router/index.js layout 的寫法