Javascript в Laravel (единственный экземпляр Vue)

Один экземпляр Vue

Обновление, май 2021 г.

Обратите внимание, что этому сообщению в настоящее время 3 года. Как вы знаете, в нашем технологическом мире и событиях все идет быстро, хотя принципы, описанные в этом посте, все еще актуальны, могут быть более эффективные способы достижения того же результата; Вы можете продолжить чтение, но я недавно написал сообщение о нашем текущем подходе.

Кроме того, в Laravel 8 есть новый стартовый комплект, который поможет быстро сформировать интерфейс вашего следующего проекта. Он называется Laravel Jetstream, и на него определенно стоит взглянуть. Для своего следующего проекта я выберу Laravel Jetstream с каркасом Inertia.

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

Исходное сообщение

Это четвертый пост в нашей серии о Javascript в Laravel. Мы обсудили обзор серии и образец проекта, обсудили способ jQuery и продолжили использование Laravel Mix в качестве сборщика модулей. Наконец, мы представили Vue.

В этом посте мы будем использовать Vue для реализации поведения Javascript, которое мы изначально разработали с помощью jQuery. Мы создадим один экземпляр Vue для нашего примера приложения, который будет загружен в основной файл макета app.blade.php.

Детали кода

Начиная с предыдущей базы кода jQuery (ветка Introduction-webpack), нам нужно импортировать Vue для запуска. Мы сделаем это в файле bootstrap.js и сделаем его глобальной переменной, прикрепив к окну.

import Vue from vue;
window.Vue = Vue;

Далее идет app.js. Нам нужен файл bootstrap.js и мы создаем новый экземпляр Vue вот так

const app = new Vue({
    el: '#app',
    data: {},
    methods: {},
});

Чтобы иметь возможность реализовать то же поведение, что и раньше, нам нужно внести некоторые изменения:

Добавьте в форму директивы v-model.
Добавьте индикатор загрузки и убедитесь, что он отображается в нужный момент.
Добавьте информацию / сообщения об ошибках, чтобы пользователь знал, все ли введены правильно.

Ниже представлена новая версия формы form.blade.php, которую может использовать Vue.

Затем пришло время показать код Vue, который делает вид лезвия интерактивным:

Как вы можете видеть в разделе data кода, у нас есть логическое значение для индикатора загрузки в l. 24 из form.blade.php.

Кроме того, следующие 4 переменные (пол, адрес электронной почты, почтовый индекс и страна) используются для 4 полей формы:

gender используется как v-модель для радиокнопок, где пользователь может выбрать свой пол.
email - это объект, свойство value - это v-модель для поля ввода электронной почты, а свойства msg и class предназначены для правильного отображения информации или сообщения об ошибке.
То же самое верно для zipcode и country.

В form.blade.php мы добавили различные обратные вызовы событий, которые суммированы в объекте methods. Логика этих функций обратного вызова сравнима с рассмотренной ранее версией jQuery. Основное отличие состоит в том, что нам больше не нужно напрямую манипулировать DOM. Вместо этого мы изменяем свойство данных во Vue, и это вызывает повторную визуализацию (частей) формы.

В целом я думаю, что реализация поведения Javascript таким образом имеет гораздо больше смысла для мозга. Мы просто меняем некоторые данные (на основе бизнес-логики приложения), а об остальном позаботится Vue.

О чем подумать

В этом очень простом примере у нас есть только одна страница, для которой нужен Javascript.

Обычно веб-приложение состоит из нескольких страниц, к каждой из которых применен некоторый Javascript. Продолжение описанного выше пути приведет к app.js файлу, который станет очень большим. Кроме того, количество элементов в объектах данных и методов резко увеличится, что затруднит сопровождение кода.

Итак, возможно, мы могли бы использовать подход один экземпляр Vue на странице?

Один экземпляр Vue на странице

Этот подход означает, что мы создаем app.js файл для каждой страницы (конечно, мы называем эти файлы по-разному 😊). Впоследствии нам нужно обновить файл webpack.mix.js, чтобы можно было скомпилировать все эти файлы. Это довольно просто, мы просто добавляем еще несколько таких строк

mix.js('resources/assets/js/page1.js', 'public/js')
   .js('resources/assets/js/page2.js', 'public/js')
   .js('resources/assets/js/page3.js', 'public/js')
   .js('resources/assets/js/page4.js', 'public/js')

А затем мы использовали бы скомпилированную версию прямо в представлении вот так. Обратите внимание, что мы больше не загружаем app.js в основной макет, поскольку каждая страница получает свою версию:

<!-- page1.blade.php -->
@extends('layouts.app')
@section('content')
   ...
<script src="{{ mix('/js/page1.js') }}"></script>
@stop

Такой подход гарантирует, что загружается только код Javascript для страницы, на которой мы находимся, и ничего более. Однако, если мы используем один и тот же datepicker на нескольких страницах, потребуется много повторений кода, чтобы заставить его работать.

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

Нам обязательно нужны комплектующие

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