Skip to content. | Skip to navigation

Personal tools

Navigation

You are here: Home / Tips / Vue.js

Vue.js

一個是你A用箭頭函數，下方B用一般函數，裡面this指向不同，存取的對象就會不同，可參: https://pjchender.blogspot.com/2017/01/es6-arrow-function.html 二是要從A直接return數據，得也要使用Promise串接，可參: https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Promise/then 另外個人建議盡量別用return(等式)，雖然的確就是可回傳等式右邊的值，但對我來說是會有點難理解 若數據有需要就存data，但能的話盡量了解Promise機制，會比較能順手操作它們 https://github.com/CedarXi/All-in-one

Learn Vue 3 for Beginners

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

watch 不能監控全域變數, 可以用 proxy 這方法不是 timer 形式

loader 重覆 CURRY Circular Dependency 調整 import 順序可以避免錯誤

https://blog.darkthread.net/blog/vue-3-release/ https://blog.darkthread.net/blog/vue-lab-chkbox-list/

有時候為了把 CSS 插到 vuetify 裡面
component 最下面會同時有 <style scoped> 跟 <style>
前者穿不進 vuetify style 後者才有辦法…

Headless

什麼是 Headless? Contentful Gatsby over Next.js

Nuxt Image is a plug-and-play image optimization module designed to give developers access to powerful components that will make image optimization a natural part of your workflow. https://communications.netlify.com/e2t/tc/VVB6Wp4KBQBMW7j07v63SWQRjW5BVC1m4tHvw2M7WCR_3p_9LV1-WJV7CgNqvN1KRjZJx0dr0VzjPHz36t3z5W19np1735wkXsW62x0_L8JQjRFW8c1W5Z8PlfpLVqQh_m2jVt1TW5pySj04Fp9jwN6pT3Zp7SlpNW10kGWY6_nhK8W1h05pW36Z6NpW8SqvPJ6hkxKYW58_-212gN4WwW3f4k_W3nSZhHW4vvhTY8w-PsVVzzT-996SPZNW4ySKL38sCg8KW158fdW60frl8W6b9fH545xk1pMZ7FJQcPyD8W9j5ksh4tPnHDW3TSTKR1KJSgLW8Lwh9V6VV6yFW6H2W6M6VfFmtN76CRwTB4VpSN2ZWVRzfJCYsW7mqDwW7cH_TVW3JY8Fh4vr9MmW71LF666dMLGb3jy51

有人有用 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 版本又更新語法了

Vue3.0 先備知識改版 by Mike https://link.medium.com/Xa6y38m5B8

Vue 3 Composition API

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 可取到資料，但卻無法直接選內部屬性，只讀到空值。

<el-table-column label="Name">
  <template slot-scope="scope">
    <span v-if="scope.row.name">{{scope.row.name}}</span>
    <span v-else>No Name</span>
  </template>
</el-table-column>

v-bind title 換行 Generate Static Website Vue.js + GSAP = Animations

Going Serverless with Firebase

scroll-converter 禁止上下滑動但可左右滑動 slot有另外寫func去parse跟render

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 的寫法

import Card from '@/components/Card' 中間的小老鼠符號代表甚麼意思? 是 alias; @ at 一個絕對位置的概念 vue cli 初始是從 src開始

要怎麼把tableData[0]裡面的channelTags.tagName印在畫面上阿

prop.row.channelTags

re-render-static-content

Banksy Artwork Shredder