DEV Community: 周柏諭 BO-YU CHOU

Vue Prop | 禁用Attribute繼承

周柏諭 BO-YU CHOU — Wed, 28 Sep 2022 09:07:15 +0000

前言

一般來說，當在父組件傳遞attribute給子組件時，

// parent
<basic-input disabled>

// child
<input>

經渲染後會變成

<input disabled>

但是我們的子組件結構有時不會只有一個節點，通常因為css需要，外層會再包一個標籤，例如:

<div class="container">
    <input>
</div>

經渲染後會變成

<div class="container" disabled>
    <input>
</div>

disabled屬性會直接繼承在子物件的根結點上。

這時如果不希望组件的根元素繼承 attribute，那該怎麼辦呢?

禁用Attribute繼承

這種情況就需要到組件的option中設置inheritAttrs: false，禁用attribute繼承。

Vue.component('my-component', {
  inheritAttrs: false,
  // ...
})

如果子組件是單一檔案的話，在子組件內設置:

export default {
  name: 'my-component',
  inheritAttrs: false,
  props: {
    disabled: Boolean
  }
}

設置完後，這時你就可以手動決定哪些attribute賦予哪個元素，把子物件改為:

<div class="container">
    <input disabled>
</div>

這樣disabled屬性就不會跑到根結點上

inheritAttrs: false在寫基礎組件的時候很常用到，例如input、select之類的功能型標籤，

有關他們屬性type、disabled、placehodler等都希望綁在子物件的特定標籤上。

也可以看看官方文件的範例:

Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on:input="$emit('input', $event.target.value)"
      >
    </label>
  `
})

// parent component 使用 <base-input>
<base-input
  label="Username:"
  v-model="username"
  required
  placeholder="Enter your username"
></base-input>

如果對於官方範例子物件v-bind:value、v-on:input有疑問
https://yubo0826.github.io/vue-blog/#/posts/6

對$attrs有疑惑的

https://v2.cn.vuejs.org/v2/api/#vm-attrs

總結

當設置inheritAttrs: true(預設)，子組件根節點會渲染出父節點傳遞過來的attrribute
當設置inheritAttrs: false，子組件根節點不會渲染出父節點傳遞過來的attrribute

參考

官方文件(Vue2、Vue3關於禁用屬性繼承基本一樣) https://v2.cn.vuejs.org/v2/guide/components-props.html
https://blog.csdn.net/weixin_41977619/article/details/116597022

Vue $emit 傳遞參數的各種情況

周柏諭 BO-YU CHOU — Tue, 27 Sep 2022 10:40:42 +0000

子組件不傳任何參數

// child
this.$emit('push')

// parent
@push='handlePush'

handlePush(){

}

子組件傳一個參數

// child
this.$emit('push', 1000)

// parent
@push='handlePush'

handlePush(param){
    console.log(param) // 1000
}

子組件傳多個參數，父組件接收需要使用arguments

// child
this.$emit('push', 1000, 500)

// parent
@push='handlePush(arguments)'

handlePush(params){
    console.log(params[0]) // 1000
    console.log(params[1]) // 500
}

子組件傳一個參數，父組件接收參數時還加上自己的一個參數，那麼父組件需要使用$event

// child
this.$emit('push', 1000)

// parent
@push='handlePush($event, '小美')'

handlePush(param, name){
    console.log(param) // 1000
    console.log(name) // 小美
}

子組件傳多個參數，父組件接收參數時還加上自己的一個參數，那麼父組件需要使用arguments

// child
this.$emit('push', 1000, 500)

// parent
@push='handlePush(arguments, '小美')'

handlePush(params, name){
    console.log(params[0]) // 1000
    console.log(params[1]) // 500
    console.log(name) // 小美
}

結論

如果子組件傳遞單個參數且父組件自己帶一個參數，則父組件需要使用名為$event的參數
如果子組件傳遞多個參數，則父組件需要使用名為arguments的參數

git 同步遠端數據庫(git pull、fetch、merge)

周柏諭 BO-YU CHOU — Wed, 14 Sep 2022 09:50:30 +0000

前言

上圖可以簡單理解git本地端與遠端的大致上的指令互動。

簡單概括:

git fetch 是把遠端數據庫的最新內容拉到本地，用戶在檢查後可決定是否與本地分支合併。

git pull是直接把最新內容拉下來直接合併，即為git fetch + git merge

git pull



$ git pull <遠端別名> <遠端分支名>:<本地分支名>

如果遠端分支是與當前分支合併，那冒號後面可以省略

ex:



$ git pull origin dev

git fetch + git merge



$ git fetch <遠端別名> <遠端分支名>

(省略遠端分支名會把遠端數據庫所有更新取回本地)

取回更新後，系統會自動建一個分支FETCH_HEAD

可以查看剛拉回來的信息(檢查是否有衝突之類的)



$ git log -p FETCH_HEAD

確定好後，可以把FETCH_HEAD合併本地分支



$ git checkout master          // 切換分支
$ git merge FETCH_HEAD
$ git branch -d FETCH_HEAD     // 刪除分支

Strapi upload image to Cloudinary

周柏諭 BO-YU CHOU — Wed, 07 Sep 2022 08:03:52 +0000

關於Cloudinary

https://cloudinary.com/

Cloudinary 是一個為網頁和行動裝置開發者提供的媒體管理平台，簡單來說就是一個基於雲端圖片處理、管理、儲存、美化於一體的平台，同时也具備影像抓取功能，提供API接口。

為甚麼要上傳到Cloudinary

當strapi部屬到heroku，由於heroku免費專案是如果30分鐘沒有api call，伺服器就會進入休眠，每當進入休眠，strapi local media內的圖片就會不見，所以需要另外存雲端平台上。

步驟

先創立一個strapi專案，並部屬到heroku
https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/deployment/hosting-guides/heroku.html#_2-login-to-heroku-from-your-cli
在Cloudinary新增一個資料庫，在dashboard內可以看到Account Details等等需要用到

到strapi專案資料夾，終端機輸入指令

npm install @strapi/provider-upload-cloudinary --save

./config/plugins.js路徑下加入以下code
*注意: plugins.js 檔名有s

module.exports = ({ env }) => ({
      // ...
      upload: {
        config: {
          provider: 'cloudinary',
          providerOptions: {
            cloud_name: env('CLOUDINARY_NAME'),
            api_key: env('CLOUDINARY_KEY'),
            api_secret: env('CLOUDINARY_SECRET'),
          },
          actionOptions: {
            upload: {},
            delete: {},
          },
        },
      },
      // ...
    });

然後在根目錄創建or修改.env，加入以下3行，資訊都在Cloudinary Dashboard內
```
CLOUDINARY_NAME = cloudinary-name
CLOUDINARY_KEY = cloudinary-key
CLOUDINARY_SECRET = cloudinary-secret
```
另外也要在heroku Settings → Config Vars 一樣要設置那三個變數

在./config/middlewares.js內，在module.exports 陣列內，增加以下一個元素

{
  name: 'strapi::security',
  config: {
    contentSecurityPolicy: {
      useDefaults: true,
      directives: {
        'connect-src': ["'self'", 'https:'],
        'img-src': ["'self'", 'data:', 'blob:', 'res.cloudinary.com'],
        'media-src': ["'self'", 'data:', 'blob:', 'res.cloudinary.com'],
        upgradeInsecureRequests: null,
      },
    },
  },
},

完成後應該會長這樣

module.exports = [
  'strapi::errors',
  'strapi::security',
  'strapi::cors',
  'strapi::poweredBy',
  'strapi::logger',
  'strapi::query',
  'strapi::body',
  'strapi::session',
  'strapi::favicon',
  'strapi::public',
  {
    name: 'strapi::security',
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          'connect-src': ["'self'", 'https:'],
          'img-src': ["'self'", 'data:', 'blob:', 'dl.airtable.com', 'res.cloudinary.com'],
          'media-src': ["'self'", 'data:', 'blob:', 'dl.airtable.com', 'res.cloudinary.com'],
          upgradeInsecureRequests: null,
        },
      },
    },
  },
];

完成後git add . → git commit 後，如果是用heroku cl 就輸入指令
```
git push heroku HEAD:main
```
如果是用heroku+github，就在heroku 手動deploy選好分支，然後按下deploy就好。

參考資料

JS 移除陣列元素錯誤案例 | 用forEach搭配splice

周柏諭 BO-YU CHOU — Wed, 07 Sep 2022 07:52:45 +0000

情況

移除不符合條件的陣列元素，例如移除’e’的元素

let list = ['a', 'b', 'c', 'e']

list.forEach((item, index, arr) => {
    if(item === 'e') {
        arr.splice(index, 1)
    }
})

(splice方法第一個參數是欲刪除元素的位置，第二個是欲刪除幾個元素)

錯誤原因

使用map或forEach等迴圈相關的方法時，不要在迴圈內移除或增加陣列長度，否則陣列的指向會錯誤。

解決方法

應使用filter()篩選符合的元素

let list = ['a', 'b', 'c', 'e']

let filterList = list.filter(item => {
    return item !== 'e'
})

v-for 數組資料順序變動和畫面渲染問題

周柏諭 BO-YU CHOU — Fri, 19 Aug 2022 10:07:00 +0000

問題 Q1

實作拖拉的元件，當拉(如下圖)名為name的theader物件，拉到number欄位

欄位名稱後面的數字代表該欄位在資料陣列的index

然後放開，照理說name欄位和number欄位應該要互換，但是...

可以看到theader欄位沒有發生變動，但tbody所應對的theader有正確渲染，然後欄位名稱後的數字也有正確變化，代表資料陣列是有正確改動的，但是畫面沒有正確渲染。

<table class="table table-bordered">
  <thead>
    <drag-wrap :list="headers" tag="tr" @watchData="watchData">
      <drag-item v-for="(header, index) in headers" :key="index" tag="th">
        {{ header }} , {{ index }}
      </drag-item>
    </drag-wrap>
  </thead>
  <tbody>
    <tr v-for="(item, index) in items" :key="item.number">
      <td v-for="(header, sindex) in headers" :key="sindex">
        {{ item[header] }}
      </td>
    </tr>
  </tbody>
</table>

data() {
    return {
      headers: ['number', 'name', 'sex', 'age', 'position'],
      items: [
        {
          number: 35,
          name: 'Durant',
          sex: 'male',
          age: 34,
          position: 'SF' 
        },
        {
          number: 23,
          name: 'James',
          sex: 'male',
          age: 37,
          position: 'SF' 
        },
        {
          number: 30,
          name: 'Curry',
          sex: 'male',
          age: 34,
          position: 'PG' 
        },
      ]
    }
  },

解決 for Q1

<table class="table table-bordered">
  <thead>
    <drag-wrap :list="headers" tag="tr" @watchData="watchData">
      <drag-item v-for="(header, index) in headers" :key="header" tag="th">
        {{ header }} , {{ index }}
      </drag-item>
    </drag-wrap>
  </thead>
  <tbody>
    <tr v-for="(item, index) in items" :key="item.number">
      <td v-for="(header, sindex) in headers" :key="sindex">
        {{ item[header] }}
      </td>
    </tr>
  </tbody>
</table>

第四行v-for的key屬性由index改成header(陣列元素本身 string)，詳細原因的原理還尚未弄明白，需要更知道key在v-for所代表的意義

https://cn.vuejs.org/v2/guide/list.html#维护状态

問題 Q2

跟Q1 類似，一樣是表格變動不如預期

解決 for Q2

先解釋程式flow :

在元件內部有用props接收外部data的資料(headers)，每次移動完成後，會觸發ondragend事件，

該事件執行的function會先拿到打亂資料的index，再去跟props的原始header陣列度對比，拿到拖拉完成後的新headers陣列。

但這樣就會發生問題..

因為我發現每次拖拉完成後，都會重新render內部元件(drag-wrap元件)，而重新render後，從父元件拿到的props資料header就不會是最原始的順序，而是每次拖拉前的header順序

所以..

在內部元件drag-wrap 的created階段先接收最原始的header，保存下來後，每次拖拉結束後，與打亂資料的index比對的headers就會是最原始的順序。

以下code:

created階段origin_list變數會接收props list(外部傳入參數是headers)

// drag-wrap.js 
import {h, defineComponent} from 'vue'

const drapWrapComponent = defineComponent({
    name: 'dragWrap',
    props: {
        list: {
            type: Array
        },
        tag: {
            type: String,
            default: 'div'
        }
    },
    emits: ['watchData'],
    data() {
        return {
            fromDom: null,
            toDom: null,
            children: [],
            origin_list: [],
        }
    },
    render() {
        try {
            // ES6 解構賦值
            const { $slots, tag } = this;
            return h(
                tag, 
                {
                    ref: 'wrap',
                    ondragenter: event => {
                        event.preventDefault()
                    },
                    ondragover: event => {
                        event.preventDefault()
                    }
                }, 
                $slots.default())
        } catch (err) {
            return h('pre', {style: {color: 'red'}}, err.stack)
        }
    },
    created() {
        this.emitter.on('dragstart', this.onDragstart)
        this.emitter.on('dragenter', this.onDragenter)
        this.emitter.on('dragend', this.onDragend)
        this.emitter.on('putChild', child => {
            this.children.push(child)
            console.log(child)
        })
        this.origin_list = this.list
        console.log(this.origin_list);
    },
    methods: {
        onDragstart(el) {
            this.fromDom = el
            console.log('拿起' + this.fromDom.innerHTML)
        },
        onDragenter(el) {
            this.toDom = el
            if(this.toDom === this.fromDom) return
            console.log('進入到' + this.toDom.innerHTML)
            // 判斷進入node是否在起始node前面
            if(this.isPrevNode(this.fromDom, this.toDom)) {
                // 把參數一放在參數二前面
                console.log('交換');
                this.$refs.wrap.insertBefore(this.fromDom, this.toDom)
            } else {
                console.log('交換');
                this.$refs.wrap.insertBefore(this.fromDom, this.toDom.nextSibling)
            }
        },
        onDragend() {
            // this.$emit('watchData', this.list)
            console.log('執行onDragend')
            if(!this.list.length) return
            // this.$el.children是偽陣列
            // 獲取drag-item的Dom
            console.log(this.$el.children);
            const realDomOrder = [...this.$el.children].filter(child => 
                child.classList.contains('__drag_item')
            )
            this.getDataOrder(realDomOrder, this.children)
        },
        // to是否在from的前面
        isPrevNode(from, to) {
            while(from.previousSibling != null) {
                if(from.previousSibling === to) {
                    return true
                }
                from = from.previousSibling
            }
        },
        getDataOrder(realList, originList) {
            // 拿到打亂item的index
            console.log(realList);
            console.log(originList);
            const order = realList.map(realItem => {
                return originList.findIndex(dragItem => realItem === dragItem)
            })
            console.log(order);
            const newData = []
            order.forEach((item, i) => {
                newData[i] = this.origin_list[item]
            })
            console.log(newData);
            this.$emit('watchData', newData)
        }
    },

})

export default drapWrapComponent

當Vue Array資料變動如何做到即時渲染

周柏諭 BO-YU CHOU — Fri, 19 Aug 2022 10:01:00 +0000

前言

在Vue中，Reactivity(響應式)是Vue的一大特色，但由于 JavaScript 的限制，有些情況Vue不能檢測array或object的變化來及時渲染頁面，這篇主要針對array來迴避這個問題，以及如何讓他及時渲染。

Array數據變動 ⇒ 甚麼情況不會Reactivity

Vue不能檢測以下數據變化:

直接賦值
```
vm.items[indexOfItem] = newValue
```
修改數組長度
```
vm.items.length = newLength
```

如何Reactivity

舉例

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是****Reactivity****
vm.items.length = 2 // 不是****Reactivity****

以下兩種方法都可以實現和vm.items[indexOfItem] = newValue同樣效果，同時也會在*Reactivity System觸發狀態更新*

vm.$set(vm.items, indexOfItem, newValue)

vm.items.splice(newLength)

Vue | v-bind:class&style 不同的表示法

周柏諭 BO-YU CHOU — Fri, 19 Aug 2022 10:00:30 +0000

1. 物件的表示 Object Syntax

<div v-bind:class="{a: isA, b: isB}"></div>

data: {
  isA: true,
  isB: false
}

這裡對 a 和 b 這兩個名稱的class，分別指定 isA 和 isB 的 Vue屬性名稱，改變這兩個屬性的value(bool)，即可以控制這個div標籤套用哪個class樣式，輕鬆實現toggle class。

2. 陣列的表示 Array Syntax

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

如果想實現toggle class

<div v-bind:class="[isA ? activeClass : '', errorClass]"></div>

又或者結合物件

<div v-bind:class="[{ activeClass: isA }, errorClass]"></div>

https://vuejs.org/v2/guide/class-and-style.html

JavaScript Function Definitions 函式定義種類

周柏諭 BO-YU CHOU — Fri, 19 Aug 2022 09:52:00 +0000

一般含名字類型

function myFunction(a, b) {
  return a * b;
}

匿名函式

const x = function (a, b) {return a * b};

建構函式、建構式、建構子:
被使用new來實體化物件的函式。

function person(name, age) {
    this.name = name;
    this.age = age;
}

let me = new person("David", 23); //此地的 person()就是個建構子

在建立 new這個實例(instance)的過程，new這個運算子做了幾件事:

- 建立新的記憶體空間與物件
- 將this指向新的物件
- 執行函式
- 回傳這個物件

建構式 (Constructor) 通常是使用在初始化物件，因為會執行函數，並且要自訂物件的屬性，例如上面範例的name和age屬性。

X++ & ++X 差別與其中的涵義

周柏諭 BO-YU CHOU — Fri, 19 Aug 2022 09:51:49 +0000

前言

在學習閉包時看到一段程式碼的輸出覺得不解:

function aFunc(x){
  function bFunc(){
    console.log( x++ )
  }
  return bFunc
}

const newFunc = aFunc(1)
newFunc()
newFunc()

output:

為啥不是輸出 2和3呢?

查了一下x++這個看過無數次的語法後，才發現對他有多不熟悉，

++x increments the value of x and then returns x
x++ returns the value of x and then increments

原來 x++代表先返回 x 再x+1

假如 x是 3，那 ++x 將把 x 設定為 4 並回傳 4，而 x++ 會回傳 3 ，接著才把 x 設定為 4。

完整點的例子:

var x = 5;

console.log( x++ ) // output x=5
console.log (x) //output x=6
console.log(++x) //output x=7
console.log(x) //output x=7

參考文章:

https://www.sololearn.com/Discuss/727179/x-x-i-cant-understand-it

https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_Operators

JS | 使用事件keypress遇到的問題

周柏諭 BO-YU CHOU — Fri, 19 Aug 2022 09:47:14 +0000

前言

使用vue，做輸入框過濾字的功能時，規定使用者只能打中文數字英文，不能打標點符號和空白字元。然而，不曉得甚麼原因抓不到文本框最新的value

<textarea 
  v-model="Msg" 
  name="text" 
  id="comment" 
  placeholder="Please Enter Characters." 
  maxlength="100"
  @keypress="Msg.replace(/[^0-9a-zA-Z\u4E00-\u9FA5]/,''), 200);"
  >
  </textarea>

因為規定能打中文但不能打標點符號，但是打中文時都會按到標點符號按鍵，就會觸發到事件函數，要解決這個問題，就必須用keypress事件，如果是輸入中文字(注音)的話，使用 keypress 事件都不會被觸發。

原因

js的鍵盤事件有三種，keydown、keypress、keyup，keydown是按下鍵盤觸發，keypress跟keydown類似，差別在於keypress只針對可以輸出文字符號的按鍵有效，按ESC、backspace、方向鍵等就無效，最後keyup是鍵盤放開的那霎那觸發。

而只有keyup事件是可以拿到最新的value。

所以使用keypress或keydown時，就需要用setTimeout函數，讓事件函數執行的晚一點，就可以了。

<textarea 
  v-model="Msg" 
  name="text" 
  id="comment" 
  placeholder="Please Enter Characters." 
  maxlength="100"
  @keypress="setTimeout(()=>{Msg.replace(/[^0-9a-zA-Z\u4E00-\u9FA5]/,'')}, 200);"
  >
  </textarea>

JS | 整理無關鍵字、let、var的不同

周柏諭 BO-YU CHOU — Fri, 19 Aug 2022 09:41:00 +0000

var是全域變數宣告?

這句可能你覺得很對的一句話，實際上是個的錯誤...

無關鍵字賦值、var 宣告、let 宣告最大的差別在於生存區域的不同。無關鍵字賦值意味著全域變數的宣告，當然你在全域範圍使用 var/let 宣告也是全域的。

原文網址:

https://tw.alphacamp.co/blog/javascript-var-let-const

裏頭有相當多詳細觀念

整理:

無關鍵字賦值: 意味著全域變數的宣告

function printG(){
  g = 1
  console.log(`printG: `, g)
}

printG() // => printG: 1
console.log(`Global G:`, g) // => Global G: 1

var宣告: 其生存範圍存在於函數內

function printV1(){
  var v = 2
  console.log(`printV1:`, v)
}

printV1() // => pritnV1: 2
try{
  console.log(v)// error  
} catch {
  console.log('not find v');
}

let宣告: 變數是屬於區塊的(block)

提升(Hoisting)

JavaScript 僅提升宣告的部分，而不是初始化。如果在使用該變數後才宣告和初始化，那麼該值將是 undefined。

下面code我一開始看以為是Output

但因為提升的關係，JS在執行printV0函式時，會優先將v1變數放入記憶體，但尚未初始化，所以第一個會log出undefined。

var v1 = 9

function printV0(){
  console.log(`printV2:`, v1) // undefined
  var v1 = 2
  console.log(`printV2:`, v1) // 2
}

printV0()