Skip to main content

1-10

CSS border-collapse​

  • 為 table 元素使用
  • 三種屬性可用: separate 、 collapse 、 inherit
  • separate 為預設，如下圖 separate 效果圖
  • collapse 效果如下圖 separate 效果圖

AVIF​

  • 新的一種影像格式，更輕量且畫質不差，怕瀏覽器不支援的話可設多組 image source 標籤抓取其他傳統格式圖片

<script type=“component”>​

vm.$forceUpdate()​

  • 當要響應的資料層級太裡面而畫面無法更新時，可以用 this.$forceUpdate() 強制重新渲染畫面
  • 文章節錄

Vue computed 怪狀​

  • 在 computed 或 getters 動態計算中，做過於複雜的運算後，陣列內元素會出現重複的情況
  • 暫時不知道根本原因，目前解決方式是盡量不要在動態計算中做複雜處理，改用 call function 產出需要的資料，需要時在產一次，並覆蓋舊的

AWS Cognito trigger​

  • Cognito 自訂觸發 lambda function 時傳入的 event 物件， event.triggerSource 可得知觸發時的情況
  • 利用此值得知觸發 lambda 時是使用者驗證成功、成功換密碼或成功登入等等來判斷該寄哪些信 (目前產品寄信是串接三方服務來發送)

Vue Router Name Views​

  • 讓多個視圖佈局能在同一個路徑下組合而成， 沒命名時預設顯示 default
  • <router-view name="nav"/> 為視圖命名後可在 route.js 內定義特定路徑下顯示
{
  path: '/settings',
  component: UserSettings,
  children: [{
    path: 'emails',
    component: UserEmailsSubscriptions
  }, {
    path: 'profile',
    components: { // 注意多個 router view 情況下 component 需加s
      default: UserProfile,
      nav: UserProfilePreview
    }
  }]
}

Vue Router redirect​

  • 重定向為 replace 路由紀錄

Vue Router alias​

  • 使具有別名的路徑顯示對應別名的視圖
  • 多個路徑會共用同一份視圖佈局，舉例場景為：FB 個人頁面有一般網址和短網址(都是顯示個人頁面)、提供不同視角的頁面(同份元件佈局，但可以用路徑參數做不同的狀態)

HTML 標籤中的 Aria 系列屬性​

AWS Cognito Custome Message​

  • 觸發傳自訂信件時，給AWS的信件 template 如果是中文會有機率發生轉換成亂碼的情況而報錯，解法將中文轉換成 unicode

CSS Flex 迭代兼容​

  • 節錄文章總結

CSS ellipsis 效果​

.ellipsis { //這三個屬性需一起設置才會有效果
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: no-wrap;
}
  
.limit-line {
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  display: -webkit-box; // 用 line-clamp 必設的
  -webkit-line-clamp: 1; // 可限制幾行才...
  -webkit-box-orient: vertical; // 用 line-clamp 必設的 (此屬性元素的內容元素如何排列)
}

Tailwind CSS 安裝和注意​

  • vue cli 安裝後可直接下 vue add tailwind
  • 會產生 tailwind.config.js、postcss.config.js、tailwind.css，只要專案是用 webpack 打包輸出的，使用 tailwind 一定要用 postcss
  • tailwind 內建 purge CSS(打包時能過濾無用到的CSS)，但 vue add tailwind 後所增加的 vue-cli-plugin-tailwind 會在 postcss.config.js 中加入 vue-cli-plugin-tailwind/purgecss 做使用，目前效果比 tailwind 內建還好，所以 tailwind.config.js 的 purge 選項先註解掉
  • 若安裝最新 autoprefixer 套件 (用於 postcss 將 css 加瀏覽器前綴)，會有綁定 postcss 8 版本的錯誤，目前 vue cli 是使用 7，解法是安裝 autoprefixer 版本 9
  • postcss 會遍歷 .vue 和 .html 檔案中的 css，但僅限打完整的 class 名稱，若像： :class="h${level}" 這樣是變數形式的 class，postcss 會查不到導致正式環境沒有需要的 class，解法只能寫完整的 class 名稱，像：:class="['h1', 'h2', 'h3', 'h4', 'h5', 'h6'][level - 1]"

PostCSS 簡介​

  • 為 CSS 的後編譯器，可加套件對 CSS 加上瀏覽器前綴、將先進語法轉換為主流瀏覽器通用的等等
  • SCSS LESS 為預編譯器，提供更好用並類似CSS語法撰寫並能輸出成真正的CSS
  • Vue cli 天生支持 PostCSS 和 Sass、Less、Stylus 等等處理器

指數運算 **​

  • 以前用 Math.pow(2,3) //8 ，現在ES7 提供了指數運算子，3**3 //27
  • ＾在 JS 為位元運算用
  • 指數運算前面不能直接使用一元運算子，要先包起來：-(2**10) 或 (-2)**10 //-1024
  • ** 才能運算 BigInt 型別得值
  • 用 NaN Undefuned 會得 NaN，用 null 會轉 0

以前問題解答​

  • [].apply() 為何不行？ 因為 apply 要接在函式物件後面，如 Math.max.apply(null, numbers)

(ES8) padStart(), padEnd()​

  • 字串型別用的方法，加前後綴至指定字數
  • '19'.padStart(4, '0') // 0019
  • 若第二個參數為空字串或第一個參數數字小於對象字串的長度，則返回原字串
  • 不給第二個參數預設為加空格

Async Function​

  • async function 本身為回傳 promise，return 任何值會進 resolve()，throw 任何值會進 reject()
  • Promise.all() 兩種用法：
function normalFunc() {
  return Promise.all([
    fakeFetch(),
    fakeFetch()
  ])
  .then(([result1, result2]) => {
    console.log(result1);
    console.log(result2);
  })
  .catch(error => {
    console.log(error);
  });
}
// ==========
async function asyncFunc() {
  try {
    const [result1, result2] = await Promise.all([
      fakeFetch(),
      fakeFetch()
    ]);
    console.log(result1);
    console.log(result2);
  } catch (error) {
    console.log(error);
  }
}

performance.now()​

  • 取得網頁載入以來的 timestamp

Vue :is​

  • 某些標籤如 ul 底下只能使用指定標籤 li ，用一般的方式插入 component 會無法正常渲染
  • 故需用 is 綁定要渲染的組件：<li is="your-component"></li>
  • https://segmentfault.com/q/1010000007205176

Vue v-for​

  • :key 建議是綁跟內容相關的值，若渲染的組件沒有動態變動的可能可用 index 就好，但若綁定的內容會變動，此時用 index 當 key 的話會無法讓畫面響應 (在需響應變化的值在內容物件深層， vue 偵測不到變化的情況下)，故用內容值綁定會正常讓畫面變化

Vue & setTimeout​

  • setTimeout 是在全域物件上，故在 Vue 裡面使用時，就算原先呼叫該 setTimeout 的組件已經銷毀，計時仍然會持續，故需要在該組件 beforeDestroy 時 clearTimeout

Promise.all(array)​

  • 此函式接取一個含 promise 的陣列並返回 promose
  • 接取時得到的值為陣列裡各 promise 回傳結果的陣列，如果有一個 promise reject 將會進錯誤處理，全部完成才會進 reslove
Last updated on