От автора: чтобы начать работу с 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.