Блог

Сегодня я изучаю Vue.js и у меня есть несколько идей о том, где это может быть действительно полезно в новом проекте, который является побочным продуктом существующего, живого проекта.

Мне нравится идея попытаться заменить некоторые из моих существующих функций на Vue, и я вижу, что компоненты могут быть весьма удобными, поскольку многие функции используются повторно (например, поиск по почтовому индексу).

Один из элементов функциональности, который я использовал целую вечность, предназначен для недопустимых элементов формы — в настоящее время в jQuery, когда ввод формы или текстовое поле размыто, я добавляю класс form__blurred , и это сопровождается некоторой дерзостью, такой как:

 .form__blurred {
    amp;:not(:focus):invalid {
        border-color:$danger;
    }
}
  

Это делается для того, чтобы избежать стилизации всех требуемых входных данных как ошибок сразу при загрузке страницы.

Я полностью согласен с выполнением этого в jQuery, но я подумал, что, возможно, это можно было бы сделать в Vue.

У меня есть идея о том, как я мог бы сделать это с компонентами благодаря серии laracasts, но все мои входные данные формы отображаются Blade на основе данных, полученных из Laravel, и по ряду причин (отсутствие JS, путаница в том, где найти шаблоны ввода и т.д.) Не кажется хорошим решением отображать некоторые входные данные на Javascript.

Я подумал, что было бы удобно использовать что-то вроде следующего упрощенного примера

 <input type="text" class="form__text" v-on:blur="blurred" v-bind:class="{ form__blurred : isBlurred }" />

<script>
    var form = new Vue({
        el : '.form__input',
        data : {
            isBlurred : false
        },
        methods : {
            blurred : function() {
                this.isBlurred = true;
            }
        }
    });
</script>
  

На самом деле это отлично работает, но, как и ожидалось, похоже, что при использовании селектора классов выбирается только первый экземпляр, и даже если бы это было не так, я предполагаю, что изменение свойств будет применяться ко всем элементам, а не к каждому в отдельности.

Итак, вопрос в том, возможно ли это с предварительно отрисованным HTML-кодом, более разумным способом, чем просто перебирать селектор?

Если это так, есть ли способ создать Vue для .form элемента и применить эту функцию к обоим .form__input и .form__textarea ?

Или, как это, вероятно, и имеет место, это просто не лучший вариант использования для Vue (поскольку на самом деле это намного больше кода, чем решение jQuery).

Звучит как отличный вариант использования для пользовательской директивы.

Vue позволяет вам регистрировать ваши собственные пользовательские директивы. Обратите внимание, что в Vue 2.0 основной формой повторного использования кода и абстракции являются компоненты — однако могут быть случаи, когда вам просто нужен некоторый низкоуровневый доступ DOM к простым элементам, и именно здесь пользовательские директивы все еще были бы полезны.

 <div id="app">
    <input type="text" name="myforminput" v-my-directive>
</div>

<script>
    Vue.directive('my-directive', {
        bind: function (el) {
            el.onblur = function () {
                el.classList.add('form__blurred');
            }
        }
    });

    var app = new Vue({
        el: '#app'
    });
</script>
  

Вы также можете добавить директиву локально к родительскому компоненту, если это имеет смысл для вашего приложения.