自定义指令 Example

在这个例子中，Vue.js 与一个第三方 jQuery 插件(select2) 整合，通过将它包装到一个自定义指令中实现。

html

<div id="el">
  <p>Selected: {{selected}}</p>
  <select v-select="selected" :options="options">
    <option value="0">default</option>
  </select>
</div>

js

Vue.directive('select', {
  twoWay: true,
  priority: 1000,

  params: ['options'],

  bind: function () {
    var self = this
    $(this.el)
      .select2({
        data: this.params.options
      })
      .on('change', function () {
        self.set(this.value)
      })
  },
  update: function (value) {
    $(this.el).val(value).trigger('change')
  },
  unbind: function () {
    $(this.el).off().select2('destroy')
  }
})

var vm = new Vue({
  el: '#el',
  data: {
    selected: 0,
    options: [
      { id: 1, text: 'hello' },
      { id: 2, text: 'what' }
    ]
  }
})

css

select {
  min-width: 300px;
}