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

【问题标题】：How to use jQuery script inside vue.js app?如何在 vue.js 应用程序中使用 jQuery 脚本？
【发布时间】：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 的？

标签： jquery vue.js vuejs2

【解决方案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
        ...
        }
    }

【讨论】：