Узнайте Свелту через 5 минут

Это позволяет нам легко настроить размер импортируемого компонента в нашем App.svelte файл:

Различные размеры появляются на доме следующим образом:

(Нажмите на изображение, чтобы получить доступ к курсу.)

Перейти к Курс на Scrimba Для просмотра и игры с полным кодом.

Шаблон

SVELTE Шаблон синтаксис Это отличная особенность, которая позволяет нам добавлять, если операторы и петли к нашему HTML.

Синтаксис для оператора IF, выглядит так:

    {#if say}
        

            Hi!
        
    
    {/if}

Хотя A для цикла выглядит следующим образом:

{#each [2,1,0] as faceIndex}
        
    {/each}

Обработка событий

Чтобы позволить пользователю взаимодействовать с нашим приложением, нам нужны обработчики событий. В Этот тряп , мы видим, как добавить простой ON: нажмите к <кнопка> Чтобы показать заголовок нашего приложения:

 {showHeader = true}}>show

А какой это заголовок ..! (Нажмите на изображение, чтобы получить доступ к курсу.)

Есть кучка с этим, хотя - он работает только с родным HTML <кнопка> Тег и не импортированные компоненты называются <Кнопка> Отказ

К счастью, мы можем работать вокруг этого, используя Переадресация событий , то есть. Добавление ON: нажмите к родным <кнопка> Тег в его компонентном файле:

Отправка событий

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

В Этот тряп мы узнаем, как использовать один <Кнопка> Компонент для обоих показывает и скрыть элемент.

Мы создаем диспетчеров событий в <Кнопка> Компонентный файл, как это:

Затем мы добавляем диспетчер на наш родной HTML <кнопка> нравится:

 dispatch('show')}>
    Show

 dispatch('hide')}>
    Hide

Наконец, мы объявляем параметры функциональности кнопки в App.svelte Файл следующим образом:

 {showHeader = true}} on:hide={() => {showHeader = false}} />

Мы можем ревертировать это, передавая значения через рассылку с использованием переменной события ( E ). В этом случае, <Кнопка> в нашем App.svelte Файл выглядит так:

 {showHeader = e.detail}} />

Пока нативный HTML <кнопка> S в нашем компонентном файле похож на это:

 dispatch('click', true)}>
    Show

 dispatch('click', false)}>
    Hide

Реактивность

Если вы хотите использовать кусок кода, чтобы повторить каждый раз, его связанная переменная обновляется, то уникальная функция Svelte, Реактивное утверждение , это для вас. Мы объявляем реактивное заявление с $: следующее:

let score = 0;
    $: smileySays = 'Hi there, your score is: ' + score;

Также возможно запустить, если операторы внутри реактивных утверждений. Код для этого выглядит так:

let score = 0;
    $: smileySays = 'Hi there, your score is: ' + score;
    $: if (score < -4) smileySays = 'Wow your score is low!'

Вот обо всех функциях, которые мы можем покрасить в наш 5-минутный тур по Свелте. Я надеюсь, что вы нашли это полезным и вдохновлены, чтобы попробовать рамки для себя и проверить свои новые навыки.

Не забудьте проверить полный курс в Scrimba Чтобы узнать еще больше функций SVELTE и отдайте проблему кодирования попробовать.

Куда бы ваше путешествие по кодированию не дает вам следующее, счастливое обучение:)