----------------------------------------

原文： 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 preset "Standard"
? Setup unit tests with Karma + Mocha? "No"
? Setup e2e tests with Nightwatch? "No"
$ cd vue-cropper
$ npm install

为jquery和Vue自定义指令配置webpack

为webpack配置添加jquery和Vue自定义指令的映射。

通常webpack已经引入了完整的jquery版本，但还是建议再一次引入一下。

您可以看到Vue的webpack模板已经添加到组件的文件夹中。我通常会添加很多其他文件夹像自定义指令，mixin等等。在这个例子中，我们只添加了自定义指令。

这将帮助我们引入依赖关系而无需知道其确切的路径。这也是有益的在你重构你的应用的时候。你也并不需要管理相对路径。

把下面高亮部分添加到build/webpack.base.conf文件中。

resolve: {
  extensions: ['', '.js', '.vue'],
  fallback: [path.join(__dirname, '../node_modules')],
  alias: {
    'src': path.resolve(__dirname, '../src'),
    'assets': path.resolve(__dirname, '../src/assets'),
    'components': path.resolve(__dirname, '../src/components'),
    'jquery': path.resolve(__dirname, '../node_modules/jquery/src/jquery'),
    'directives': path.resolve(__dirname, '../src/directives')
 一些需要重点注意的地方
 
我们引入jQuery也不需要处理组件的初始化。
把Cropper的设置选项当做原始绑定数据。
Cropper将在初始化时渲染，再销毁时使其消失。
组件的名字可以在template用作标签使用，MyCropper转变为my-cropper。
对它进行初始化时，我们必须添加v-my-cropper元素在组件的模板里。
 
 创建Cropper组件
 
 这是本教程的核心。我们要创建一个Cropper指令来处理低层代码的DOM操作。在这种情况下我们要初始化Cropper。
 
 　　自定义指令是用来提供一种机制来映射数据并任意操作DOM的行为。
 
 创建src/directives/Cropper.js
 
  update (options) {
    // Destroy in case it has been initialized already.
    jQuery(this.el).cropper('destroy')
    // Initializing directly after destroying
    // didn't work. Wrapping it in a setTimeout
    // seems to do the trick.
    setTimeout(() => {
      jQuery(this.el).cropper(options)
    }, 0)
  unbind () {
    jQuery(this.el).cropper('destroy')
 每一个Vue自定义组件的最核心部分是其提供可以用来绑定，更新，解绑相应方法。
 
bind：当元素在文档中生成时只触发一次。
update：当bind方法触发后和绑定数据改变时触发，在这种情况下cropOptions只是一个对象。Vue.js自定义指令需要知道如果它的相关属性也是一个对象。这就是为什么我们需要添加deep: true在这种情况下。
unbind：当DOM元素被移除时触发，在这个方法里可以销毁组件并且移除监听的事件。
 
 在Vue 2中会有些许变化。
 
 vm实例被作为函数参数传递，不会被设置为this。
 
 指令的update方法只能在数据改变后触发而不会在bind方法之后触发。
 
 第一次运行
 
 这是我们所能做的最小限度，让我们运行起来看看如何。
 
 这是很快做出来的，所以我们并没有添加cropper的样式，让我们添加并再一次运行。
 
 先添加高亮部分在src/main.js文件中
 
 
import '../node_modules/cropper/dist/cropper.css'
import Vue from 'vue'
import App from './App'
/* eslint-disable no-new */
new Vue({
  el: 'body',
  components: { App }
 切换 on/off
 
 从现在起一切都会很简单。我们将通过这个案件。使每件事都会简单起来。
 
 我们用一个按钮来启用和禁用cropper。页面开始用户选择一个文件切换为cropper的打开状态。证明了cropper可以在任何时候被初始化。
 
 编辑src/App.vue的script部分
 
添加一个按钮绑定@click
在img标签上添加v-if指令
 
 每一次图像的显示都会调用自定义cropper指令的bind和update方法。
 
 当showCropper设置为false时，cropper的unbind将被调用。
 
 这里不会使我们陷入困境。
 
 cropper将被加载在用户需要时和卸载后。
 
 我们已经拥有需要更新cropper的选项。如果我们有一个现有jQuery插件，并且会接收新选项，我们将不需要销毁当前实例来重新创建插件实例。不幸的是cropper不允许这样。
 
 让我们添加一个开关来控制图像缩放。
 
 编辑src/App.vue的template部分
 
    src="https://i.imgur.com/WcvkCxl.png"
    alt="Mustache">
  <input id="zoomable" type="checkbox" v-model="cropOptions.zoomable">
  <label for="zoomable">Zoomable?</label>
    // Destroy in case it has been initialized already.
    jQuery(this.el).cropper('destroy')
    // Initializing directly after destroying
    // didn't work. Wrapping it in a setTimeout
    // seems to do the trick.
    setTimeout(() => {
      jQuery(this.el).cropper(options)
    }, 0)
  unbind () {
    jQuery(this.el).cropper('destroy')
      src="https://i.imgur.com/WcvkCxl.png"
      alt="Mustache">
    <input id="zoomable" type="checkbox" v-model="cropOptions.zoomable">
    <label for="zoomable">Zoomable?</label>
    <pre id="output">
x: {{ cropData.x }}
y: {{ cropData.y }}
width: {{ cropData.width }}
height: {{ cropData.height }}
</template>
 
 正如您所看到的我选择从指令来发出事件来监听App组件。问问自己为什么选择这么做。我也可以选择在App组件上面创建一个方法，将其绑定到cropper的监听器中。 
 
 反模式。options.crop = this.vm.handleCrop
 
 操作其他action
 
 最后使事件从一个组件流向一个指令来改变显示状态。我们要用它来调用cropper的action。让我告诉你我将如何添加一个按钮来控制图片旋转。
 
 编辑App组件的temlpate部分并添加一个控制图片旋转的按钮
 
      src="https://i.imgur.com/WcvkCxl.png"
      alt="Mustache">
    <input id="zoomable" type="checkbox" v-model="cropOptions.zoomable">
    <label for="zoomable">Zoomable?</label>
    <button @click="$emit('rotate', 90)">Rotate 90°</button>
    <pre id="output">
x: {{ cropData.x }}
y: {{ cropData.y }}
width: {{ cropData.width }}
height: {{ cropData.height }}
</template>

// Destroy in case it has been initialized already. jQuery( this .el).cropper('destroy' ) // Initializing directly after destroying // didn't work. Wrapping it in a setTimeout // seems to do the trick. setTimeout(() => { jQuery( this .el).cropper(options) }, 0 ) unbind () { jQuery( this .el).cropper('destroy' ) this .vm.$off('rotate' )

Et voilà you’re done!

这样做的美妙之处在于，指令是用来解耦组件并在多个组件中使用，它会自动初始化并附加到DOM元素中，在DOM被移除之前销毁。

我希望你会喜欢这篇文章，如果你有问题和建议，可随时给我发消息或评论文章。

Best,
Christian

这个写法适用vue1.0，vue2.0方法基本一致。可参考vue2.0文档----------------------------------------原文：http://gambardella.info/2016/09/05/guide-how-to-use-vue-js-with-jquery-plugins使用Vue真的太棒了，但是也有可能使你头疼，当你

原文：http://gambardella.info/2016/09/05/guide-how-to-use- vue -js-with- jquery -plugins 使用 Vue 真的太棒了，但是也有可能使你头疼，当你试图使它与 jquery 插件 混用的时候。 问题的原因是 jquery 与 Vue 是完全不同的东西， Vue 是通过组件与数据绑定来进行渲染的， jquery 则主要是用来做简单的单击处理和...

正文1.安装 jquery 依赖npm install jquery --save2.修改两处配置文件module.exports = { // 其他代码... resolve: { extensions: ['', '.js', '. vue '], fallback: [path.join(__dirname, '../node_modules')],

import $ from '../../static/js/ jquery .min.js' window. jQuery = $; require('../../static/js/ jquery .zoom.js') 转载于:https://www.cnblogs.com/whlBooK/p/10603276.html