Vue3.0中如何引入jQuery并使用

作者：System 时间：2024年08月26日分类：所有,jquery 字数：718

这篇文章距离上次修改已过438天，其中的内容可能已经有所变动。

在Vue 3.0中引入jQuery并使用，首先需要安装jQuery：




npm install jquery

然后，在Vue组件中使用jQuery，可以在<script setup>标签中或者在<script>标签中使用import引入：




// 在<script setup>中使用jQuery
import $ from 'jquery';
 
// 示例：在Vue组件的onMounted生命周期钩子中使用jQuery
import { onMounted } from 'vue';
 
export default {
  setup() {
    onMounted(() => {
      // jQuery代码
      $('selector').somePlugin();
    });
  }
};

或者在普通的<script>标签中：




import $ from 'jquery';
 
export default {
  mounted() {
    // jQuery代码
    $('selector').somePlugin();
  }
};

请注意，在Vue 3中，建议尽可能避免使用jQuery，因为Vue 3推荐使用组合式API（如ref、reactive、onMounted等）来编写响应式和组件逻辑，而不是操作DOM。如果需要操作DOM，可以使用Vue提供的ref属性或者$el属性。

Vue3.0中如何引入jQuery并使用

评论已关闭

推荐阅读