Vue + jQuery 初體驗 | 點燈坊

雖然使用 jQuery 的機會不多，但還是可在 Vue 使用 jQuery。

Version

Vue 3.0.11
jQuery 3.5.1

Vue Project

$ yarn create @vitejs/app vue3-jquery --template vue

使用 Vite 直接建立 Vue。

Add jQuery

$ yarn add jquery

使用 Yarn 安裝 jQuery。

jQuery

使用 jQuery 控制 CSS class 顯示 Hello jQuery。

<template lang='pug'>
  .box Hello jQuery
</template>

<script setup>
import S from 'jquery'
import { onMounted } from 'vue'

onMounted(() => S('.box').addClass('show'))
</script>

<style scoped>
.box {
  display: none;
}

.show {
  display: block;
}
</style>

第 ６行

import S from 'jquery'

引用 jQuery 且 alias 成 S。

Vue 3 會警告 $ 已在內部使用，因此只能改成 S

第 9 行

onMounted(() => S('.box').addClass('show'))

在 mounted hook 中使用 jQuery 找到使用 .box class 的 element，並動態新增 show class 使其顯示。

Point-free

結果不變，但使用 Point-free 改寫。

<template lang='pug'>
  .box Hello jQuery
</template>

<script setup>
import { onMounted } from 'vue'  
import S from 'jquery'
import { pipe, always } from 'ramda'

let addClass = sel => x => S(sel).addClass(x)

let mount = pipe(
  always('show'),
  addClass('.box')
)

onMounted(mount)
</script>

<style scoped>
.box {
  display: none;
}

.show {
  display: block;
}
</style>

10 行

let addClass = sel => x => S(sel).addClass(x)

以 currying 形式準備 addClass() 配合 Point-free。

12 行

let mount = pipe(
  always('show'),
  addClass('.box')
)

onMounted(mount)

使用 pipe() 組合 mount()：

• always('show')：準備要傳入的 show class
• addClass('.box')：對 .box element 動態新增 CSS class

Conclusion

• $ 已經在 Vue 3 內部使用，所以 jQuery 只能改用 S
• 在 mounted hook 下基本上 HTML 與 CSS 都已經載入，因此不必如傳統 jQuery 需寫在 $(document).ready() 或 $(function() {}) 內
• 也可以 Point-free 使用 jQuery