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

如何在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>

---

您需要连接到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>

导出默认值{
数据：{
用户：[{'my_date'：''}]
},
安装的（）{
$（'.pickadate'，this.$el）.pickadate({
max:Date.now（），
格式：“yyyy-mm-dd”
});
},
在…之前{
//根据其API移除pickadate
}
};

---

请参阅Vue生命周期挂钩的官方文档：

您如何包括jquery？

<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>