Vue + jQuery 初體驗

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

Version

Vue 2.6.11
jQuery 3.5.1

Add jQuery

$ yarn add jquery

使用 Yarn 安裝 jQuery。

jQuery

overview000

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

<template>
  <div class="box">Hello jQuery</div>
</template>

<script>
import $ from 'jquery'

let mounted = function() {
  $('.box').addClass('show')
}

export default {
  name: 'App',
  mounted
}
</script>

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

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

第 6 行

import $ from 'jquery'

引用 jQuery 且 alias 成 $。

第 8 行

let mounted = function() {
  $('.box').addClass('show')
}

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

Conclusion

在 mounted hook 下基本上 HTML 與 CSS 都已經載入，因此不必如傳統 jQuery 需寫在 $(document).ready() 或 $(function() {}) 內