使用带有 vuejs 的 jquery 插件，没有 webpack？答案

【问题标题】：Using jquery plugin with vuejs, without webpack?使用带有 vuejs 的 jquery 插件，没有 webpack？
【发布时间】：2017-02-01 17:33:17
【问题描述】：

我无法弄清楚如何在 vue 组件中使用 jquery 插件。我没有使用 webkit、browserify 或 ES2016。我还有办法使用插件并定位模板标签中的元素吗？谷歌没有产生任何有用的结果.. 有问题的插件是 jquery.payment for stripe

【问题讨论】：

标签： javascript jquery vue.js vue-component

【解决方案1】：

您可以在组件的ready 事件中使用该插件。简而言之，它看起来像这样：

new Vue({
  el: '#app',
  ready: function() {
    jQuery('.find-thing').payment('formatCardNumber')
  }
})

如果我别无选择，这就是我的处理方式。我没有测试，但应该比较接近：

<div id="app">
  <input class="payment-input" v-model="creditCardNumber">
  <div v-if="!creditCardNumberValid">BAD CC</div>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      creditCardNumber: '',
    },
    ready: function () {
      var paymentInput = this.$el.querySelector('.payment-input');
      jQuery(paymentInput).payment('formatCardNumber')
    },
    computed: {
      creditCardNumberValid: function () {
        return jQuery.payment.validateCardNumber(this.creditCardNumber)
      }
    }
  })

【讨论】：