Данные
Значения, которые вы устанавливаете в объекте данных, передаются в экземпляр Vue при его создании по умолчанию. Но это реактивные свойства. Это означает, что если мы изменим значение в данных, оно будет автоматически обновлено в том месте, где значение напечатано. В отличие от jQuery, нам не нужно снова заниматься рендерингом.
Методы
В дополнение к экземпляру данных Vue.js добавить объект методы . Этот объект будет иметь имена методов в качестве ключей и значений функций. Пример можно увидеть в простой демонстрации.
Вы можете вызывать методы просто, с помощью {{MethodName ()}} и передавать им параметры. В следующем примере вы можете заметить вызов метода, который передает два параметра. Метод объединяет эти строки и возвращает их как одну строку.
В методах мы также можем работать с данными, используя ключевое слово this.
Vue.js Реактивная система
Показал, как работают данные и методы. Теперь посмотрим, как работать с реактивной системой Vue.js. Устанавливаем значение по умолчанию «off» в данных и хотим изменить его на «on», нажав кнопку.
В следующем примере показан v-синтаксис . Здесь мы используем v-on: чтобы вызвать метод после нажатия кнопки. Этот метод только изменяет данные, а Vue.js заботится о рендеринге данных. Нам не нужно беспокоиться о рендеринге и строках кода, которые мы должны были бы написать для рендеринга.
В новой публикации мы рассмотрим немного более сложный пример. Если не хотите пропустить следующий эпизод, вы можете подписаться на меня в Дзене!