Автор оригинала: Anthony Gore.
Это не отличная идея использовать jQuery и vue.js в том же интерфейсе. Не делай этого, если вы можете избежать этого.
Но вы, вероятно, читаете это не потому, что вы хочу использовать jQuery и Vue вместе, но потому что вы надо Отказ Возможно, клиент настаивает на том, чтобы использовать определенный плагин jQuery, который у вас не будет времени переписать для Vue.
Если вы берете осторожность о том, как вы это делаете, вы можете безопасно использовать jQuery и Vue вместе. В этой статье я собираюсь продемонстрировать, как добавить jquery ui datepicker плагин к проекту Vue.
И просто чтобы показать немного, я даже собираюсь отправлять данные между этим плагином jQuery и Vue!
Увидеть это работает в этом JS Bin Отказ
jquery ui datepicker.
Примечание: эта статья была первоначально опубликована здесь на блоге разработчиков Vue.js 2017/05/22.
Проблема с использованием jQuery и Vue вместе
Почему делает это потенциально опасным?
Vue – ревнивая библиотека в том смысле, что вы должны позволить ему полностью владеть патчком DOM, которую вы его даете (определяетесь тем, что вы передаете на EL ). Если jQuery изменится на элемент, что Vue управляет, скажем, добавляет класс к чему-то, Vue не будет знать об изменении и собирается идти прямо вперед и перезаписать его в следующем цикле обновления.
Решение: используйте компонент в виде обертки
Зная, что Vue и jQuery никогда не собираются поделиться частью DOM, мы должны сообщить Vue Cordon от площади и отдать его jQuery.
Используя компонент, чтобы обернуть плагин jQuery, похоже на путь, потому что:
- Мы можем использовать жизненные циклы для настройки и разрыва кода jQuery
- Мы можем использовать интерфейс компонента для связи с остальным приложением Vue с помощью реквизитов и событий
- Компоненты могут отказаться от обновлений
V-образ
Настройка DatePicker jQuery UI
Очевидно, что вам необходимо сначала включить библиотеки jQuery и jQuery UI в вашем проекте. Как только у вас есть те, дата DatyPicker просто требует вход элемент, чтобы прикрепить себя к:
Date:
Затем он может быть создан, выбрав его и вызова метода:
$('#datepicker').datepicker();
Компонент DatePicker
Чтобы сделать наш компонент DatePicker, шаблон будет этим вход элемент:
Vue.component('date-picker', function() {
template: ''
});
new Vue({
el: '#app'
});
Date:
Примечание. Этот компонент должен быть не более чем оберткой для плагина. Не задавайте свои удачи и дайте ему какие-либо свойства данных или используйте директивы или слоты.
Расположенный виджет
А не дать нашему вход ID и выбирая его, мы можем использовать Это. $ El , поскольку каждый компонент может получить доступ к собственному узлу корневого узла. Коренный узел, конечно, будет вход Отказ
Затем мы можем обернуть ссылку узла в селекторе jQuery для доступа к DatePicker Метод I.e. $ (это. $ EL) .datePicker () Отказ
Обратите внимание, что мы используем монтируется Крюк жизненного цикла как Это. $ El не определен, пока компонент не установлен.
Vue.component('date-picker', function() {
template: '',
mounted: function() {
$(this.$el).datepicker();
}
});
Срывать
Чтобы разложить датушина, мы можем следовать аналогичному подходу и использовать крючок жизненного цикла. Обратите внимание, что мы должны использовать BeForeestestroy Чтобы обеспечить нашу вход все еще находится в доме и, таким образом, может быть выбран (он не определен в Уничтожить крючок).
Vue.component('date-picker', {
template: '',
mounted: function() {
$(this.$el).datepicker();
},
beforeDestroy: function() {
$(this.$el).datepicker('hide').datepicker('destroy');
}
});
Пасс конфигурация с реквизитом
Чтобы сделать наш компонент многоразовый, было бы неплохо разрешить пользовательскую конфигурацию, например, уточнение формата даты с свойством конфигурации DateFormat Отказ Мы можем сделать это с реквизит :
Vue.component('date-picker', {
template: '',
props: [ 'dateFormat' ],
mounted: function() {
$(this.$el).datepicker({
dateFormat: this.dateFormat
});
},
beforeDestroy: function() { ... }
});
Позвольте обновлениям рукоятки JQuery
Допустим, вместо того, чтобы пройти свой DateFormat опора как строка, вы сделали его данные Свойство вашего корневого экземпляра I.E.:
var vm = new Vue({
data: {
...
dateFormat: 'yy-mm-dd'
}
});
Это означало бы DateFormat будет реактивным свойством данных. Вы можете обновить его значение в какой-то момент в жизни вашего приложения:
// change the date format to something new vm.dateFormat = 'yy-dd-mm';
Так как DateFormat Пропорция является зависимостью компонента DatePicker монтируется Крюк, обновление. Это будет вызвать компонент для переназначения. Это не было бы круто. jQuery уже настроил ваше свидание на вход И сейчас управляется этим с собственными пользовательскими классами и слушателями событий. Обновление компонента приведет к вход Быть замененным и, таким образом, установка jQuery будет мгновенно сброшен.
Нам нужно сделать это, чтобы реактивные данные не могли вызвать обновление в этом компонент …
V-образ
v-один раз Директива используется для кэширования компонента в случае, если у него много статического содержания. Это в действии делает компонент отказаться от обновлений.
Это на самом деле идеально подходит для использования на нашем компоненте плагина, так как он будет эффективно, сделает VUE игнорировать его. Это дает нам некоторую уверенность в том, что jQuery будет иметь неосторожный контроль над этим элементом во время жизненного цикла приложения.
Передача данных от jQuery для Vue
Было бы довольно бесполезно иметь DatePicker, если бы мы не могли извлечь выбранную дату и использовать его где-то еще в приложении. Давайте сделаем это, чтобы после того, как значение выбрано, он напечатан на странице.
Мы начнем сдавая наш корневой экземпляр A Дата имущество:
new Vue({
el: '#app',
data: {
date: null
}
});
{{ date }}
Виджет DatePicker имеет onselect Обратный вызов, который называется, когда дата выбрана. Затем мы можем использовать наш компонент для излучения этой даты через пользовательское событие:
mounted: function() {
var self = this;
$(this.$el).datepicker({
dateFormat: this.dateFormat,
onSelect: function(date) {
self.$emit('update-date', date);
}
});
}
Наш корневой экземпляр может слушать пользовательское событие и получить новую дату:
{{ date }}
new Vue({
el: '#app',
data: {
date: null
},
methods: {
updateDate: function(date) {
this.date = date;
}
}
});
Благодаря Этот стек переполняет ответ для вдохновения.
Стать старшим Vue Developer в 2020 году.
Учитесь и осваивайте, какие профессионалы знают о строительстве, тестировании и развертывании, полностью стековых Vue Apps в нашем последнем курсе.
Учить больше