怎样在Vue.js中使用jquery插件

发布网友 发布时间：2022-04-23 17:10

我来回答

共1个回答

热心网友 时间：2022-04-20 07:21

原文：http://gambardella.info/2016/09/05/guide-how-to-use-vue-js-with-jquery-plugins

使用Vue真的太棒了，但是也有可能使你头疼，当你试图使它与jquery插件混用的时候。

问题的原因是jquery与Vue是完全不同的东西，Vue是通过组件与数据绑定来进行渲染的，jquery则主要是用来做简单的单击处理和强大的操纵DOM的能力。

我试图寻找一些东西来帮助自己解决这个问题，但是我发现一些组件所做的工作不是很让我满意，所以让我告诉你怎样使Vue与jquery插件混用。

这么做的目的是什么？

大多数情况下你能使用jquery和一些简单的Vue来满足你的需求，Modals, sliders等等和一些Vue组件结合起来是很快的。

所以我们的目标是用强大的jQuery插件与Vue快速结合。

我们将...

用Vue的自定义指令来构建jquery
当元素生成时初始化插件
当元素撤销时销毁插件
发送事件来通知组件
从组件接收事件并将它们传递给插件

教程时间

我选择Fengyuan Chen’s的cropper因为它是一个很棒的jQuery插件，如果时间*在60分钟之内的话你肯定不可能重写这个插件在不使用Vue的情况下。

DEMO：https://vue-jquery-cropper-demo.firebaseapp.com/

我将从最开始来演示，如果你已经完成请跳过这个部分。

创建项目

#
install vue-cli

$ npm install -g vue-cli

#
create a new project using the "webpack" boilerplate

$ vue init webpack vue-cropper

? Project name "
vue-cropper
"

? Project description "
A Vue.js project
"

? Author "
Christian Gambardella <christian@gambardella.info>
"

? Use ESLint to lint your code? "
Yes
"

? Pick an ESLint pre