Работа с объектом Vue

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

Объект Vue является стандартным объектом JavaScript, с которым мы можем работать из остального кода на js, в том числе и в других объектах Vue. Например, определим следующую страницу:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app1">
    <input type="text" v-model="name" />
    <input type="number" v-model="age" />
    <p>{{name}} - {{age}}</p>
</div>
<div id="app2">
    <input type="text" v-model="title" />
    <button v-on:click="onClick">Change</button>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
var vm1 = new Vue({
	el: '#app1',
    data: {name:'Tom', age: 22},
	methods: {
		setName: function(value){
			this.name = value;
		}
	}
});
// установка свойств объекта Vue в обычном коде JS
vm1.name = "Sam";
vm1.setName("Mike");

// установка свойств объекта Vue в другом объекте Vue
var vm2 = new Vue({
	el: '#app2',
    data: {title:''},
	methods: {
		onClick: function(){
			vm1.setName(this.title);
			//vm1.name = this.title;  // или так
		}
	}
});
</script>
</body>
</html>

Здесь определены два объекта Vue, каждый из которых управляет своим шаблоном. Определяя для каждого объекта переменные, мы можем через эти переменную манипулировать объектами:

vm1.name = "Sam";
vm1.setName("Mike");

В данном случае по нажатию на кнопку во втором объекте Vue мы можем изменить значения в первом объекте Vue.

Работа с объектами Vue

Также мы можем определять дополнительные свойства и методы у объекта извне, как и для любого объекта JavaScript:

<div id="app1">
    <input type="text" v-model="name" />
    <input type="number" v-model="age" />
    <p>{{name}} - {{age}} - {{position}}</p>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
var vm1 = new Vue({
	el: '#app1',
    data: {name:'Tom', age: 34}
});
// определение нового метода
vm1.setAge = function(value){
	vm1.age = value;
}
// определение нового свойства
vm1.position = "admin";
setTimeout(function(){
	vm1.position = "moderator";
}, 3000);
</script>

Однако все свойства определяются вне объекта Vue, как в данном случае свойство position, не будут реактивными и не будут автоматически отслеживаться. Соответственно после выполнения функции setTimeout в данном случае мы не увидим новое значение для этого свойства, пока не будет изменено значение отслеживаемого свойства name или age.

Отслеживание свойств в Vue.js

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

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