Рубрики
Без рубрики

Руки на Vue.js для начинающих (часть 3)

Добро пожаловать обратно! В прошлый раз мы перешли за прослушивание наших самых первых пользовательских событий и методов для реагирования на … Теги с JavaScript, начинающими, учебниками, Vue.

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

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

Мы будем продолжать строить на нашем предыдущем примере. Если вы потеряли его или просто догоняете, вот что мы имеем до сих пор:


    
        Vue 101
    

    
        

Hello!

My local property: {{ myLocalProperty }}


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

Давайте сделаем его еще дальше и узнайте о нашем условном рендеринге.

Давайте изменим нашу кнопку нажатия кнопки, чтобы они создавали случайное число, так как мы делаем, но вместо того, чтобы выводить объединенные строки, мы переключим дисплей пару

элементы с результатами.

Это потребует некоторого рефакторинга, поэтому сначала давайте изменим нашу knlicked Метод для расчета только это новый номер, и мы будем хранить его на новом свойстве под названием Случайное число Отказ


Давайте возьмем быстрый взгляд.

  1. Мы добавили новую местную недвижимость RandomNumber . и значение по умолчанию будет 0.
  2. Мы удалили старый код, а вместо того, чтобы использовать случайное значение в предыдущей строке, мы просто сохраним его в нашем RandomNumber . пропры

Мы хотим показать/скрыть контент в зависимости от результата нашего RandomNumber . Расчет, так что давайте два новых

элементы. Один покажет только когда RandomNumber . больше или равно 50. Другой покажет, если оно меньше 50.

My local property: {{ myLocalProperty }}



randomNumber is >= 50!

Sorry, randomNumber is only {{ randomNumber }}

Мы добавили


Для клоя и разделения, а затем наши два

элементы. Давайте посмотрим на каждый подробно.

Во-первых, V-IF = «RandomNumber» Отказ Итак, V-если это Vue директива . Не становитесь слишком сложными в определении термина, это только означает, что это «специальное» значение, которое мы можем разместить внутри элементов HTML, что Vue будет знать, как читать и интерпретировать. На самом деле, вы уже использовали Директивы до. Помните V-on: нажмите и @Click. ? Это тоже директивы!

Теория в сторону, V-если Рассказывает Vue к Только показать этот элемент, если условие, которое мы объявляем внутри этого правда Отказ В этом случае «Vue: только показать это

элемент, если и только если RandomNumber . больше или равно что 50 “.

Во-вторых, всякий раз, когда у вас есть V-если Директива, вы можете иметь еще кейс. Но возглавляет, v-else Только Работает на элементе, который напрямую следует за тем, который удерживает V-если (или третий вариант v-else - если ). Так как вы ожидаете от любого, если – иначе, элемент с v-else будет отображаться на любом другом случае, который не правда для первого. Либо/или.

Продолжай и перезагрузите свой index.html и нажмите кнопку несколько раз. Вы увидите, что

Теги получают реактивно в зависимости от значения Случайное число Отказ

Если вам интересно открыть ваши инструменты DEV, пока вы нажимаете, вы заметите очень важно. V-если не Дисплей: Блок/Скрытый Переключатель CSS переключается, он фактически отображает или разрушает элементы всякий раз, когда значение наших условных изменений. Если вы хотите иметь видимость Toggle Директива , пойдейте вперед и попробуйте переключить этот первый V-если для V-шоу И посмотри, что происходит!

Вы можете заметить, что блок, который имеет v-else декларативный больше не показывает. Это потому, что V-шоу это одинокий рейнджер и будет работать только сам по себе. Так какова польза от использования V-шоу ?

Существует стоимость производительности, которую вы можете захотеть рассмотреть при использовании V-если Потому что Vue должен идти и повторно сделать DOM (не волнуйтесь, это очень умно, о каких частях необходимо добавить/удалить), но это более обширная задача, чем применение/удаление CSS Дисплей характеристики.

Нижняя строка: если вы собираетесь переключить небольшую/среднюю часть приложения, только несколько раз, например, строка меню, например, V-если обычно делают трюк. Но если вы собираетесь переключаться на экраны с вкладками, например, или огромные кусочки вашей страницы, то V-шоу Может быть дешевле с точки зрения производительности, потому что ваша разметка не повторяется каждый раз.

(P.S. Прежде чем мы продолжим, отправляйтесь в Директиву на V-if Или иначе вы получите ошибки консоли из-за V-else ниже это непарно.)

Если вы желаете, чтобы вы знали, как выяснить, какое значение рандомизируется в Случайное число Для нашего > = 50 условие без необходимости визуализации его внутри

Тег с нашим доверием {{}} Тогда Vue имеет фантастический инструмент для работы.

Идите вперед и установите Chrome Vue devtools или Firefox Vue devtools Отказ

Поскольку некоторые из нас могут открывать файл непосредственно в нашем браузере, используя Файл:// Протокол, если вы не видите расширение, работаю для вас в Chrome. Пожалуйста, сначала следуйте этим инструкциям:

"To make it work for pages opened via file:// protocol, you need to check "Allow access to file URLs" for this extension in Chrome's extension management panel."

Right-click the Vue icon on the extensions toolbar, click on manage extensions and then toggle the allow access switch.

После того, как вы добавили их в свой любимый аромат браузера, идите вперед и откройте их (откройте свои инструменты DEV с помощью «проверки» или через меню браузера, затем перейдите к вкладке «VUE» на панели разработки), пока вы на вашем index.html Страница, и вы заметите довольно много вкусно, чтобы играть с.

Экран, который вы должны увидеть, выглядит так:

Вы заметите панель инструментов с некоторыми значками сверху, те, как мы смотрим, когда смотрим на Vuex. И вы можете смело игнорировать их сейчас.

Однако важная вещь на этом экране – это дерево компонентов. Инструменты Dev позволят вам проверить каждый компонент, который вы создаете для страницы, его свойства (данные), а затем, когда мы посмотрим на государственное управление, как они взаимодействуют с ним. (Не волнуйтесь, если это не имеет смысла прямо сейчас).

Нажмите на Компонент, и вы увидите это:

Обратите внимание на наши два местных свойства, MyLocalProperty и Случайное число Отказ Нажмите на ваш <кнопка> Несколько раз и посмотрите, как инструмент разработчика отвечает, показывая вам изменения в RandomNumber . стоимость.

Теперь это может не казаться Супер впечатляющий Прямо сейчас, но этот инструмент будет вашим источником информации, когда мы начнем строить приложение реального мира, или даже в ваших реальных работах проектам, так что определенно проводят некоторое время, играя с ним!

Аккуратная вещь, например, с локальным хранилищем, состоит в том, что вы можете изменять значения вручную, чтобы проверить различные состояния вашего приложения. Наведите недвижимость, которую вы хотите изменить, и вы получите кнопку редактирования и (в случае числовых свойств) A + и – кнопку – увеличить или уменьшить значение.

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

Оставайтесь настроиться на часть 4!

Оригинал: “https://dev.to/marinamosti/hands-on-vue-for-beginners-part-3-2pd6”