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

Question

如何在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"
});

Answer 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