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. Например:

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее
<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

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

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее
<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.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

VUE JS. Быстрый старт

Практический курс по созданию веб-приложения на VUE JS с полного нуля

Получить

Метки:

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

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree