New VueJS — Создание экземпляра

New VueJS — Создание экземпляра

От автора: чтобы начать работу с VueJS, нам нужно создать экземпляр Vue, который называется корневым экземпляром Vue и обозначается как new vue.

Синтаксис

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

Для Vue этот параметр называется el. Он принимает id элемента DOM. В вышеприведённом примере у нас есть id #vue_det. Это id элемента div, который присутствует в .html.

А теперь, что бы мы не сделали, это повлияет на элемент div, но больше ни на что вне этого элемента. Затем мы определили объект данных. Он содержит значения firstname, lastname и address. То же самое присваивается в div. Например:

Имя Firstname : {{firstname}} будет заменено внутри интерполяции, то есть {{}} на значение, присвоенное объекту данных, то есть Ria. То же самое касается и last name. Дальше у нас есть методы, в которых мы определили функцию mydetails и возвращаемое значение. Оно присвоено внутри div как:

Отсюда следует, что внутри {{}} вызывается функция mydetails. Значение, возвращаемое в экземпляре Vue будет выведено внутри {{}}. Результат будет следующий. Результат

Теперь нам нужно передать конструктору Vue параметры, которыми, в основном, являются данные, шаблон, элемент для монтирования, методы, обратные вызовы и так далее. Давайте рассмотрим, которые должны быть переданы Vue.

#data – Этот тип данных может быть объектом или функцией. Vue конвертирует его свойства в методы доступа, чтобы сделать его реактивным.

Ниже можно увидеть, как данные передаются в параметры. Пример

Результат

console.log(vm.fname); // выводит Raj

console.log(vm.$data); выводит полный объект, как показано выше

console.log(vm.$data.fname); // выводит Raj

Если есть компонент, то объект данных должен быть передан из функции, как это показано в следующем коде.

В случае компонента, данные – это функция, которая используется с Vue.extend, как это показано выше. Данные – это функция. Например:

Чтобы сослаться на данные из компонента, нам нужно создать его экземпляр. Например:

Чтобы получить информацию из данных, нам нужно сделать то же самое, что мы делали с родительным компонентом раньше. Например:

Ниже приведена информация подробности, отображённая в браузере.

Props – Тип для props – это массив строк или объекта. Он принимает синтаксис, основанный на массиве или объекте. Они считаются атрибутами, которые принимают данные от родительного компонента. Пример 1

Пример 2

propsData – используется для поэлементного тестирования. Type – массив строки. Например, { [key: string]: any }. Должен быть передан во время создания экземпляра Vue. Пример

Computed − Тип: { [key: string]: Функция | { get: Function, set: Function } }

Пример

Computed содержит две функции aSum и aSquare. Функция aSum просто возвращает this.a+2. Функция aSquare возвращает две функции get и set. Переменная vm – это экземпляр Vue, он вызывает aSquare и aSum. Также vm.aSquare = 3 вызывает функцию set от aSquare, а vm.aSquare вызывает функцию get. Мы можем проверить результат в браузере, который как показано на следующем скриншоте.

Methods – Методы, которые нужно включить в экземпляр Vue, как это показано в следующем коде. Мы можем получить доступ к функции, используя объект Vue.

Методы – это часть конструктора Vue. Давайте вызовем метод, используя объект Vue vm.asquare (), значение свойства a обновляется в функции asquare. Значение a изменяется от 1 до 25, то же самое отображается в консоли браузера.

Источник: //www.tutorialspoint.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: