怎样在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
