Đưa các thư viện vào VueJs Component


# Tiền đâu 
Lúc mới bắt đầu dùng VueJs, việc sử dụng VueJs cùng với các thư viện khác đôi lúc làm cho các huynh đệ bối rối. Vì để sử dùng được các thư viện khác thì cần đưa nó vào VueJS, tuy nhiên kĩ năng đơn giản đó đôi khi lại khiến các huynh đệ mới bắt đầu với VueJS bị bối rối. Vậy nên tại hạ mạnh bạo chia sẻ đoạn code để huynh đệ nào cần tham khảo thì tham khảo, ko cần tham khảo thì cười đếu cái rồi đi. 

# Vue Component Datepicker 
- `Datepicker`Thư viện: https://jqueryui.com/datepicker/
- Html Template

```html

  <script type="text/x-template" id="date-picker">
      <input placeholder="YYYY-MM-DD" style="width: 100%" type="text">
  </script>
```

- Tạo Component tại Javascript

```javascript

    Vue.component('datepicker', {
        props: ['value'],
        template: '#date-picker',
        mounted: function () {
            var vm = this;
            // Init datepicker
            $(this.$el).datepicker({
                dateFormat: 'yy-mm-dd',
                onSelect: function(dateText) {
                    vm.$emit('input', dateText);
                }
            });
        },
        watch: {
            value: function (value) {
                // update value
                $(this.$el).val(value)
            }
        },
        destroyed: function () {
            //$(this.$el).off().select2('destroy')
        }
    });
```

- html thực thi Component

```html
<datepicker v-bind:value="value" v-model="value"></datepicker>
```

# Vue Component Select2
- `Select2`Thư viện: https://select2.org/
- Html Template

```
    <script type="text/x-template" id="select2-template">
        <select style="width: 100%">
            <slot></slot>
        </select>
    </script>
```

- Tạo Component tại Javascript

```javascript

    Vue.component('select2', {
        props: ['options', 'value'],
        template: '#select2-template',
        mounted: function () {
            var vm = this;
            $(this.$el)
            // init select2
                .select2({ data: this.options })
                .val(this.value)
                .trigger('change')
                // emit event on change.
                .on('change', function () {
                    vm.$emit('input');
                });
        },
        watch: {
            value: function (value) {
                // update value
                $(this.$el).val(value)
            },
            options: function (options) {
                // update options
                $(this.$el).empty().select2({ data: options })
            }
        },
        destroyed: function () {
            $(this.$el).off().select2('destroy')
        }
    });
```

- Html thực thi Component

```html
 options = [
    {
        id: 0,
        text: 'enhancement'
    },
    {
        id: 1,
        text: 'bug'
    },
    {
        id: 2,
        text: 'duplicate'
    },
    {
        id: 3,
        text: 'invalid'
    },
    {
        id: 4,
        text: 'wontfix'
    }
  ];

    <select2 :options="options" v-model="idValue">
    </select2>
```

# Lời cuối 
Trên đây là chia sẻ đoạn code để componetent hoá 2 thư viện `Select2`và`Datepicker`tuy nhiên với các thư viện khác cũng hoàn toàn tương tự vậy.

Cuối lời, chém gió thế thôi chứ thực tế kiểu thư viện tích hợp sẵn cho VueJs cũng có sẵn rồi, trước lúc component hoá thư viện gì thì huynh đệ nên google trước xem vueJs đã có sẵn chưa rồi hẵng làm nhé. 

Ví dụ:
- `Vue Select` https://sagalbot.github.io/vue-select/
- `Vuejs-datepicker` https://www.npmjs.com/package/vuejs-datepicker