Главная » Статьи » New VueJS — Создание экземпляра

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

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

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

Синтаксис

var app = new Vue({ // options
})

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

<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "vue_det"> <h1>Firstname : {{firstname}}</h1> <h1>Lastname : {{lastname}}</h1> <h1>{{mydetails()}}</h1> </div> <script type = "text/javascript" src = "js/vue_instance.js"></script> </body>
</html>
vue_instance.js
var vm = new Vue({ el: '#vue_det', data: { firstname : "Ria", lastname : "Singh", address : "Mumbai" }, methods: { mydetails : function() { return "I am "+this.firstname +" "+ this.lastname; } }
})

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

<div id = "vue_det"></div>

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

<div id = "vue_det"> <h1>Firstname : {{firstname}}</h1> <h1>Lastname : {{lastname}}</h1>
</div>

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

<h1>{{mydetails()}}</h1>

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

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

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

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

<html> <head> <title>VueJs Introduction</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <script type = "text/javascript"> var _obj = { fname: "Raj", lname: "Singh"} // прямое создание экземпляра var vm = new Vue({ data: _obj }); console.log(vm.fname); console.log(vm.$data); console.log(vm.$data.fname); </script> </body>
</html>

Результат

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

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

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

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

<html> <head> <title>VueJs Introduction</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <script type = "text/javascript"> var _obj = { fname: "Raj", lname: "Singh"}; // прямое создание экземпляра var vm = new Vue({ data: _obj }); console.log(vm.fname); console.log(vm.$data); console.log(vm.$data.fname); // нужно использовать функцию, когда помещено в Vue.extend() var Component = Vue.extend({ data: function () { return _obj } }); var myComponentInstance = new Component(); console.log(myComponentInstance.lname); console.log(myComponentInstance.$data); </script> </body>
</html>

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

data: function () { return _obj
}

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

var myComponentInstance = new Component();

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

console.log(myComponentInstance.lname);
console.log(myComponentInstance.$data);

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

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

Vue.component('props-demo-simple', { props: ['size', 'myMessage']
})

Пример 2

Vue.component('props-demo-advanced', { props: { // только проверка типа height: Number, // проверка типа плюс дополнительная валидация age: { type: Number, default: 0, required: true, validator: function (value) { return value >= 0 } } }
})

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

var Comp = Vue.extend({ props: ['msg'], template: '<div>{{ msg }}</div>'
})
var vm = new Comp({ propsData: { msg: 'hello' }
})

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

Пример

<html> <head> <title>VueJs Introduction</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <script type = "text/javascript"> var vm = new Vue({ data: { a: 2 }, computed: { // только get, просто нужна функция aSum: function () { return this.a + 2; }, // и get, и set aSquare: { get: function () { return this.a*this.a; }, set: function (v) { this.a = v*2; } } } }) console.log(vm.aSquare); // -> 4 vm.aSquare = 3; console.log(vm.a); // -> 6 console.log(vm.aSum); // -> 8 </script> </body>
</html>

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.

<html> <head> <title>VueJs Introduction</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <script type = "text/javascript"> var vm = new Vue({ data: { a: 5 }, methods: { asquare: function () { this.a *= this.a; } } }) vm.asquare(); console.log(vm.a); // 25 </script> </body>
</html>

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

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

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