Skip to content. | Skip to navigation

Personal tools

Navigation

You are here: Home / Tips / Vue.js

Vue.js

Circular Dependency 調整 import 順序可以避免錯誤

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

loader 重覆

Headless

什麼是 Headless? https://medium.com/@herbcaudill/a-web-application-with-no-web-server-61000a6aed8f

有人有用 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"

Generate Static Website

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 能拉回來的東西。

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

在父層加 transform 而導致子層的 fixed 失效, 這是因為 W3C 把控制範圍變成 div 範圍,而不在是視窗範圍了,請看規範 https://www.w3.org/TR/css-transforms-1/#transform-rendering 解決方法 多包一層 第一層 transform 不變 但要設定視窗範圍 別用 div 的控制範圍 https://codepen.io/hsucherng/pen/uBhft