Vue

26 советов для Vue, которые сэкономят ваше время

Эта публикация является любительским переводом статьи «26 Time Saving Tips for Vue» от Майкла Тиссена.

Никто не любит тратить своё время зря. При написании приложений на Vue вы можете потратить лишнее время на неправильные подходы. Новичку, а порой и опытному разработчику, не всегда известно, что станет камнем преткновения. В этой статье вы узнаете 26 полезных советов о разработке Vue-приложений, которые сэкономят ваше время и нервы!

Читать далее

Как в Blade вывести переменную Vue

Иногда возникает необходимость написать что-то вроде {{ $route.name }} внутри blade-шаблона в Laravel-приложении. Laravel тут же поругается, что такой переменной нет. Выход такой:

<div class="custom-block">
    @{{ $route.name }}
    ...
</div>

Используйте синтаксис @{{ }} для такой задачи.

Как скрыть шаблон Vue.js пока он не отрендерится. Директива [v-cloak]

Бывают ситуации, когда вы загружаете страницу с каким-то компонентом Vue, и при этом страница при загрузке «прыгает»: сначала показывает синтаксис шаблона Vue, а потом рендерит сам шаблон. Вот пример:

Страница загрузилась, а компонент Vue ещё не отрендерился
Читать далее

В чём разница между props и data в Vue.js

Во Vue предусмотрено два способа хранения данных в компоненте: props и data.

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

Так в чём же отличие между props и data?

Data — это приватное хранилище любого компонента, в котором вы можете хранить любые данные.

Props — то, как вы передаёте данные из родительского компонента в дочерний.

В этой статье вы узнаете:

  • Чем являются props, и почему они нужны только для передачи данных вниз;
  • Для чего используется data;
  • Что такое реактивность;
  • Как избежать конфликта имён между props и data;
  • Как одновременно использовать props и data вместе, чтобы получить пользу 💰
Читать далее