Vue

指南：如何使用vue.js jQuery插件

使用Vue可真棒。但你知道，它也可以让你头痛，当你试图将它与jQuery插件或其他图书馆。

问题是，jQuery的作品比Vue根本不同。Vue渲染基于组件的核心数据的一切。jQuery是大多是做简单的点击操作，具有强大的能力操纵DOM。
当我寻找帮助我发现一些不令人满意的解决方案组件做所有的初始化工作。
让我告诉你我是如何将vue.js jQuery。

目标是什么？

在大多数情况下，你可以省去使用jQuery和找到一个简单的基于Vue对你的问题的解决方案。情态动词、滑块等相当简单与Vue组件和CSS。

所以我们的目标是使用强大的jQuery插件，不能写很快在Vue。

我们将…

…使用VUE指令建立一个桥梁，jQuery。
……当元素被连接时初始化这个插件。
当元素被分离时，破坏它。
……发送事件通知组件。
……从组件中接收事件并将它们传递给插件。

教程的时间

我拿起冯元辰的农作物的插件，因为它是一个写得很好的jQuery插件，你可能不能改写接下来的60分钟。vue.js单独使用。
它的复杂和演示了如何vue.js可以与它进行交互。
演示：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

恭喜你有一个vue.js项目。

安装jQuery和cropper.js

1 2	# install jQuery & cropper $ npm install jquery cropper --save

配置WebPACK jQuery和Vue指令

添加jQuery源和指令到WebPACK别名地图文件夹。
通常会包括WebPACK的编译版本的jQuery。建议是有源码包括而不是。
你可以看到，Vue WebPACK模板添加组件的文件夹。我通常添加其他文件夹一样的指令，混入，等这个例子中我们只需要添加指令。

这将有助于我们导入依赖关系，而不必知道确切的路径。这也有利于当你重构你的应用程序的路上。你不需要管理相对路径。
编辑生成/ webpack.base.conf.js添加高亮线。

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')
  }
},

别忘了在组件线的末端加一个逗号。

准备应用程序组件

我将开始与组件，因为我相信这是更容易理解的美丽和简单的组件。你可以立即开始写指令，因为你知道如何在组件中使用它们。
在SRC / app.vue更换模板

<template>
  <div id="app">
    <img
      v-cropper="cropOptions"
      src="https://i.imgur.com/WcvkCxl.png"
      alt="jQuery Meme">
  </div>
</template>

在SRC / app.vue更换模板

<script>
import Cropper from './directives/Cropper'

export default {
  directives: {
    Cropper
  },

  data () {
    return {
      cropOptions: {
        viewMode: 0,
        zoomable: false
      }
    }
  }
}
</script>

这里有几个重要的事情要注意。

我们不进口jQuery也没有处理组件的初始化。
农作物的可供选择的原始数据。
农作物将被初始化时，这个被渲染，将当视图不可见了破坏。
该指令的名字将在模板中可作为一个串精装版。mycropper会成为我的割草机。初始化，我们已经添加v-my-cropper在构件的模板的一个元素。
创建农作物指令
这是本教程的核心。我们要创建一个农作物的指令，与较低的DOM操作的交易代码。在这种情况下我们要初始化的农作物。
自定义指令提供测绘数据的变化任意DOM的行为机制。
http://vuejs.org/guide/custom-directive.html

创建src /指令/ Cropper.js

JavaScript
import jQuery from 'jquery'
import 'cropper'
export default {
  deep: true,
  bind () {},
  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')
  }
}
import jQuery from 'jquery'
import 'cropper'
 
export default {
  deep: true,
 
  bind () {},
 
  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.js指令的核心是一个绑定更新、绑定功能简单的对象。

绑定：一旦元素被连接到文档上，将被调用。
更新：绑定后调用一次，每次当有线数据改变时。在这种情况下cropoptions是一个对象。的vue.js指令需要知道它是一个对象。这就是为什么我们需要加深：在这种情况下，真的。
取消绑定：当DOM元素将被删除。我们在这里摧毁一切，并删除所有的事件侦听器。
会有一对夫妇在Vue 2的变化。

的虚拟机实例将作为函数参数传递，不会被设置为。

指令的更新功能只会被调用在更新，而不是最初绑定后。

第一次运行

我们只是做了最低限度的。让我们看看它是否工作到目前为止。

只有一个快速的东西失踪。我们没有增加农作物的样式呢。让我们这样做，并运行应用程序。

添加第一，强调线的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 }
})

启动服务器。

$ npm run dev

拨动开关

从这里开始一切都会很容易。我们将通过它的情况下。但每一个都会几乎太简单。
让我们来启用和禁用农作物与按钮。想从网页或打开农作物在用户选择了一个文件。这表明，农作物可以在任何时间进行初始化。
编辑在SRC / app.vue 脚本

import Cropper from './directives/Cropper'
 
export default {
  directives: {
    Cropper
  },
 
  data () {
    return {
      cropOptions: {
        viewMode: 0,
        zoomable: false
      },
      showCropper: false
    }
  },
 
  methods: {
    toggleCropper () {
      this.showCropper = !this.showCropper
    }
  }
}

添加showcropper：虚假数据。
添加一个方法来切换showcropper。

编辑在SRC / app.vue 模板

<div id="app">
  <button id="toggle" @click="toggleCropper">Toggle Cropper</button>
  <img
    v-if="showCropper"
    v-cropper="cropOptions"
    src="https://i.imgur.com/WcvkCxl.png"
    alt="Mustache">
</div>

添加一个“单击处理程序”按钮。
添加一个v-if指令img标签。

每一次的图像显示了自定义指令的结合收割机和更新功能将被称为。

当showcropper设置为false农作物的绑定函数将被调用。

没有太多我们可以从这里搞砸了。

农作物将装在需要卸载后用户完成。

改变选项

我们已经都有更新的农作物的选项。如果我们有一个插件，会接受新的选择现有的jQuery实例，那么我们就不会产生破坏和重建的插件。不幸的是，也不允许。

让我们添加一个开关，改变图像是否是可缩放。
编辑在SRC / app.vue 模板

<div id="app">
  <button id="toggle" @click="toggleCropper">Toggle Cropper</button>
  <img
    v-if="showCropper"
    v-cropper="cropOptions"
    src="https://i.imgur.com/WcvkCxl.png"
    alt="Mustache">
  <input id="zoomable" type="checkbox" v-model="cropOptions.zoomable">
  <label for="zoomable">Zoomable?</label>
</div>

容易，对吗？

从指令中获取数据

农作物有农作物的回调函数。每当回调将被调用时，我们将发出一个事件。
编辑SRC /指令/ Cropper.js

import 'cropper'
 
export default {
  deep: true,
 
  bind () {},
 
  update (options) {
    options.crop = (event) => {
      this.vm.$emit('crop', event)
    }
    // 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')
  }
}
Edit the App component’s script to handle crop events.
import Cropper from './directives/Cropper'
export default {
  directives: {
    Cropper
  },
  data () {
    return {
      cropData: {},
      cropOptions: {
        viewMode: 0,
        zoomable: false
      },
      showCropper: false
    }
  },
  events: {
    crop (event) {
      this.cropData = {
        x: event.x,
        y: event.y,
        width: event.width,
        height: event.height
      }
    }
  },
  methods: {
    toggleCropper () {
      this.showCropper = !this.showCropper
    }
  }
}
import Cropper from './directives/Cropper'
 
export default {
  directives: {
    Cropper
  },
 
  data () {
    return {
      cropData: {},
      cropOptions: {
        viewMode: 0,
        zoomable: false
      },
      showCropper: false
    }
  },
 
  events: {
    crop (event) {
      this.cropData = {
        x: event.x,
        y: event.y,
        width: event.width,
        height: event.height
      }
    }
  },
 
  methods: {
    toggleCropper () {
      this.showCropper = !this.showCropper
    }
  }
}

编辑 应用组件的模板来显示作物数据。

<template>
  <div id="app">
    <button id="toggle" @click="toggleCropper">Toggle Cropper</button>
    <img
      v-if="showCropper"
      v-cropper="cropOptions"
      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 }}
    </pre>
  </div>
</template>

正如你所看到的，我选择了从指令中发射事件，并在应用程序组件中听他们的。问你自己为什么我选择这样做。我也可以选择创建一个方法在应用程序组件和使用该绑定到农作物的作物的倾听者。

反模式options.crop = this.vm.handlecrop

唤起行动从外面

这个最终的更改显示事件如何从一个组件流到一个指令。我们要用那把农作物的行为。让我给你展示我如何添加一个旋转按钮。

编辑 应用程序组件的模板，并添加旋转按钮。

<template>
  <div id="app">
    <button id="toggle" @click="toggleCropper">Toggle Cropper</button>
    <img
      v-if="showCropper"
      v-cropper="cropOptions"
      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 }}
    </pre>
  </div>
</template>

编辑SRC /指令/ cropper.js添加和移除事件侦听器。

import jQuery from 'jquery'
import 'cropper'
 
export default {
  deep: true,
 
  bind () {
    this.vm.$on('rotate', (deg) => {
      jQuery(this.el).cropper('rotate', deg)
    })
  },
 
  update (options) {
    options.crop = (event) => {
      this.vm.$emit('crop', event)
    }
    // 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')
  }
}

总结

等你做à圈！

这个设置的美丽是，该指令是从组件解耦，可以使用每一个组件的多次。它将自动初始化后，元素被附加到DOM将之前被删除销毁。

我希望你喜欢这篇文章。如果你有问题的建议，随时给我留言或发邮件给评论部分。

最好的，

转载自(并翻译于)：http://gambardella.info/2016/09/05/guide-how-to-use-vue-js-with-jquery-plugins

2016-11-22