如何在 vue.js 应用程序中使用 jQuery 脚本？

Posted 2023-02-22

【中文标题】如何在 vue.js 应用程序中使用 jQuery 脚本？

【英文标题】：How to use jQuery script inside vue.js app?

【发布时间】：2019-04-24 04:48:36

【问题描述】：

如何在 vue.js 应用中使用 jQuery 脚本？

var app = new Vue( 
    el: '#app',
    data: 
        users: ['my_date': '']
    
);

<div id="app">
    <input class="form-control pickadate" v-model="user.my_date" placeholder="My Date">
</div>

我像这样运行 jQuery 脚本，但是当我将 .pickadate 类添加到我的输入时，它没有反应并且 datepicker 没有出现：

$('.pickadate').pickadate(
    max: Date.now(),
    format: "yyyy-mm-dd"
);

【问题讨论】：

你是如何包含 jquery 的？

【参考方案1】：

您需要挂钩 Vue 的生命周期挂钩（mounted 和 beforeDestroy）。然后，您可以使用this.$el 访问组件的根元素。这是一个例子：

<template>
    <div>
        <input class="form-control pickadate" v-model="user.my_date" placeholder="My Date">
    </div>
</template>

<script>
export default 
    data: 
        users: ['my_date': '']
    ,
    mounted() 
        $('.pickadate', this.$el).pickadate(
            max: Date.now(),
            format: "yyyy-mm-dd"
        );
    ,
    beforeDestroy() 
        // remove pickadate according to its API
    
;
</script>

有关 Vue 的生命周期钩子，请参阅官方文档：https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

【参考方案2】：

同样，我需要在 Vue 组件中运行自定义的 jQuery 扩展脚本，以重用一些非常复杂的功能（用 es5 编写）。搜索并尝试了很多，最后以下解决方案救了我：

    mounted () 
        const script0 = document.createElement('script')
        script0.setAttribute(
          'src',
          'https://xxx/jquery-2.2.4.min.js'
        )
        script0.async = true
        document.head.appendChild(script0)

        const script1 = document.createElement('script')
        script1.setAttribute(
          'src',
          'https://yyy/jquery.kdzzz.js'
        )
        script1.async = true
        document.head.appendChild(script1)
    ,
    methods: 
        methodA () 
          window.$.extfunctionA()   // the extended function is defined in the jquery.kdzzz.js
        ...