Объект приложения Vue

Последнее обновление: 30.09.2020

Для использования функциональности фреймворка Vue на веб-странице вначале необходимо создать объект приложения Vue. Для его создания во Vue 3 используется функция Vue.createApp. При создании объекта приложения в эту функцию передается объект с параметрами, с помощью которых производится инициализация приложения:

Vue.createApp(/* { параметры } */)

После создания объекта приложения у него можно вызвать метод mount(), с помощью которого выполняется прикрепление созданного приложения Vue к опредленному элементу html на веб-странице. Для этого в метод mount() передается селектор данного элемента html:

const vueApp = Vue.createApp(/* { параметры } */); // создание объекта приложения Vue 
vueApp.mount(/* селектор_элемента_html */); 		// прикрепление объекта к элементу html

Например:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue"></script>
<script>
const vueApp = Vue.createApp({});
vueApp.mount('#app');
</script>
</body>
</html>

В данном случае в функцию Vue.createApp передается пустой объект без каких либо параметров, но тем не менее этого достаточно, чтобы создать объект приложения Vue. То есть здесь переменная vueApp будет представлять объект приложения Vue 3. Затем этот объект прикрепляется к элементу div с идентификатором app.

Данные приложения

Теперь рассмотрим, как мы можем настроить и инициализировать приложение Vue.

Объект с параметрами, который передается в функцию Vue.createApp, использует функцию data() для определения свойств приложения, которые будут хранить некоторые данные:

Vue.createApp({
	data() {
	  return {
		name: 'Tom',
		age: 36
	  }
	}
})

Функция data возвращает объект со свойствами, предназначенными для хранения данных. В данном случае он определяет два свойства - name и age.

Используем этот объект на веб-странице:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
	<p>Name: {{ name }}</p>
	<p>Age: {{ age }}</p>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
Vue.createApp({
	data() {
	  return {
		name: 'Tom',
		age: 36
	  }
	}
}).mount('#app');
</script>
</body>
</html>

Затем с помощью выражения {{ название_свойства}} (в двойные фигурные скобки помещается имя свойства) мы можем обратиться к свойству и вывести его значение на веб-страницу:

Data в Vue.createApp

Данные можно также определять в виде внешнего объекта и затем возвращать из функции data:

const tom = { name: 'Tom', age: 36 };
Vue.createApp({
	data() {
	  return tom;
	}
}).mount('#app');

Кроме того, используя объект Vue, мы можем обращаться к его свойствам по имени, получать и присваивать им значения:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const vueApp = Vue.createApp({
    data() {
        return { name: "Tom", age: 36 }
    },
    mounted() {
        // получение данных
        console.log(this.age);    // 36
        // изменение данных
        this.age = 25;
        console.log(this.age);    // 25
    }
});
vueApp.mount('#app');
</script>
</body>
</html>

Стоит отметить, что свойства объекта приложения Vue обладают "реактивностью" - при изменении их значений, будет автоматически обновляться представление - элемент веб-страницы, связанный с данным объектом приложения Vue. Например, в примере выше веб-страница отобразит измененное значение свойства age. Для изменения значения для объекта Vue определяем метод mounted(), который срабатывает автоматически сразу после прикрепления приложения Vue к элементу html. И в этом методе сначала выводим начальное значение свойства age, а затем меняем его и выводим новое значение.

Change Data properties в Vue.createApp

Метод mounted() - не единственное место, где можно изменять свойства объекта приложения Vue, но в любом случае их изменение будет приводить к изменению представления, что позволяет нам легко создавать интерактивные приложения.

Методы

Кроме хранения состояния приложение Vue может определять поведение в виде параметра methods. Этот параметр указывает на набор методов. Каждый метод представляет стандартную функцию JavaScript:

methods:{
	метод1(){
		// тело метода 1
	},
	метод2(){
		// тело метода 2
	},
	//..................
	методN(){
		// тело метода N
	},
  }

Например, определим ряд методов:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
	<p>{{ welcome() }}</p>
	<p>{{ displayUser() }}</p>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
Vue.createApp({
  data() {
    return { name: "Tom", age: 36 }
  },
  methods:{
	welcome(){
		return "Welcome " + this.name;
	},
	displayUser() {
		return "UserInfo: name " + this.name + "  age " + this.age;
	},
  }
}).mount('#app');
</script>
</body>
</html>

Здесь определено два метода welcome и displayUser, которые возвращают некоторое значение. Для обращения к свойствам объекта Vue в методах используется ключевое слово this, например, this.age.

И если метод возвращает некоторое значение, то мы можм получить его значение на веб-странице, обратившись к этому методу с помощью интерполяции:

{{ welcome() }}
Методы в Vue.js 3

К методам также можно обращаться в коде JavaScript:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
	<p>Name: {{ name }}</p>
	<p>Age: {{ age }}</p>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const app = Vue.createApp({
  data() {
    return { name: "Tom", age: 36 }
  },
  methods:{
	incrementAge(){
		this.age++;
	},
	incrementAgeThreeTimes(){
		this.incrementAge();
		this.incrementAge();
		this.incrementAge();
	}
  }
}).mount('#app');

app.incrementAgeTreeTimes();
</script>
</body>
</html>

В данном случае опеределен метод incrementAge, который увеличивает значение свойства age на единицу. Кроме того, определен метод incrementAgeThreeTimes(), который три раза вызывает метод incrementAge - то есть фактически увеличивает значение свойства age на 3. Для обращения к методам объекта внутри самого объекта, также как и для обращения к свойствам, используется this.

incrementAgeThreeTimes(){
		this.incrementAge();
		//..........

И также, используя имя объекта мы можем вызвать его метод в коде JS:

app.incrementAgeThreeTimes();

В итоге при выполнении примера переменная age увеличится на три:

Вызов методов в Vue.js 3

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850