Компоненты класса NativeScript-Vue

Использование компонентов класса в NativeScript-Vue с TypeScript? Вы должны знать эти пять вещей. ПРЕДУПРЕЖДЕНИЕ: Следуют сильные личные мнения, но нет ругательства;)

1. Правильное направление
2. Классовые компоненты леса
3. Пять вещей о классных компонентах в Nativescript-Vue
4. Похожие видео

Во -первых, мы движемся в правильном направлении …

Мало того, что NativeScript-Vue Недавно получите поддержку TypeScript Но как версия 5.2 CLI Nativesscript, Vue является официально поддерживаемой библиотекой пользовательского интерфейса, которую можно использовать прямо из коробки. Да, вы можете создавать и управлять приложениями Nativesscript-Vue, используя только CLI NativeScript.

Но…

Я был немного удивлен, что после такого отличного дополнения к членам сообщества (добавление поддержки TypeScript Support Manuel Saelices), что официальной версии совершенно не хватает поддержки TypeScript для Vue в настоящее время. Я уверен, что это изменится очень скоро.

К счастью, мы все еще можем использовать Vue CLI для разрыва наших приложений для числа местных писем. Смотрите этот пост Для получения подробной информации о том, как это сделать, или вы можете посмотреть первое видео, указанное ниже в разделе видео.

Классовые компоненты леса

Если вы здесь, то вы уже должны создать приложение NativeScript-Vue с TypeScript, используя Vue CLI, и вы уже установили Vue-Class-Component и Vue-Property-Decorator как зависимости. Если нет, то, пожалуйста, посмотрите начало этого поста.

Класс компонент .vue Файлы не так отличаются от их обозначения объекта .vue файлы

Вот пример, с которым мы будем работать:

Здесь следует отметить, что мы экспортируем класс, который наследует от Vue И что мы договорились о классе с @Component Декоратор, похожий на то, как мы делаем это в угловой.

Пять вещей о классных компонентах в Nativescript-Vue

Если вы серьезно относитесь к использованию компонентов классов в своих приложениях Vuejs с Tipenscript, вам нужно знать эти пять вещей. См. Раздел видео ниже для видеоурок об использовании их.

1. Реквизиты – данные переданы в качестве входных данных для ваших компонентов VUE
2. Данные – это локальные свойства (или состояние) ваших компонентов VUE
3. Посмотрите – используйте это, чтобы шпионить за другими свойствами и отреагировать на их изменение
4. Вычислен – не создавайте и не поддерживайте другое свойство! Используйте вычисленное для создания рассчитанного свойства.
5. Методы – они делают вещи! Это ваши обработчики событий и другие классовые функции

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

Реквизит

С помощью @Prop декоратор от Vue-Property-Decorator , мы объявляем входные свойства, просто украшая свойства класса.

Если вы приходите из объекта Notation Vue, то вы привыкли к коду, который выглядит так:

export default {
  props: {
    whatToSay: {
      type: String
    }
  }
};

Данные

данные действительно просто с классовыми компонентами. Это просто свойства на классе:

Это то, что данные Похоже с нотацией объекта – на мой взгляд, довольно уродливо:

data() {
    return {
      counter: 1,
      firstName: "Donna",
      initialLastName: "Summer",
      lastName: "Summer"
    };
  },

Смотреть

Наблюдатели, вероятно, самая сложная часть, потому что они определены как методы класса с @Watch декоратор. @Watch Декоратор должен указать, на какую собственность мы шпионируем.

Но это все еще гораздо более аккуратно, чем с обменом объекта, которая выглядит так:

watch: {
    firstName: {
      handler() {
        this.lastName = this.initialLastName + this.counter++;
        console.log("first name changed");
      }
    }
  }

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

Вычисляется

Вычисления – мои любимые, потому что они выполняются именно то, как они должны быть в классе – как свойства Getter (и Setter).

Я избавлю вас от кростских подробностей о том, как вычисления реализованы в VUE с нотацией объекта.

Методы

Поскольку мы используем занятия, угадайте, что! Методы – это просто методы! Объявите обработчик событий в шаблоне, а затем просто напишите метод в своем классе.

Я знаю, что классовые компоненты не для всех, и некоторые люди действительно любят использовать Pure JavaScript, это тоже вполне нормально. Это просто еще один способ сделать это, и если вы являются Собираюсь использование TypeScript в ваших приложениях Nativesscript-Vue, тогда компоненты класса по-настоящему подходят. Я бы даже зашел так далеко, что в настоящее время не имеет смысла использовать TypeScript Если Вы используете классовые компоненты.

Похожие видео

Вот три видео, где я захожу в компоненты Nativesscript-Vue, TypeScript и класс.

NativeScript-Vue с компонентами TypeScript и класса

Использование компонентов класса TypeScript в Vue NativeScript

Async/ждать в NativeScript-Vue с TypeScript

Зачем использовать классовые компоненты? Просто – синтаксис чище. Свойства класса являются автоматически свойствами данных. Нет необходимости в странном функциональном синтаксисе, возвращаемом свойством данных, и Вам не нужно беспокоиться о это Анкет

Для получения дополнительных видеоуроков о Nativesscript, посмотрите на наши курсы на Nativescripting.com Анкет Если вы чувствуете себя предприимчивым, новый Курс безопасности Nativescript является продвинутым прохождением по обеспечению обеспечения ваших приложений Natenscript.

Дайте мне знать, если вам понравился этот короткий учебник в Twitter: @digitalix или комментарий здесь. И присылайте мне свои вопросы, связанные с Nativesscript, на которые я могу ответить в видео -форме. Если я выберу ваш вопрос, чтобы сделать видео -ответ, я пришлю вам Swag – используйте хэштег #IscriptNative.

Оригинал: “https://dev.to/digitalix/nativescript-vue-class-components-examined-3k6f”