VueJS - Экземпляры

Чтобы начать с VueJS, нам нужно создать экземпляр Vue, который называется root Vue Instance.

Синтаксис

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. Требуется идентификатор элемента DOM. В приведенном выше примере у нас есть идентификатор#vue_det. Это идентификатор элемента div, который присутствует в .html.

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

Теперь все, что мы собираемся сделать, повлияет на элемент div и ничего за его пределами.

Затем мы определили объект данных. Он имеет значение имя, фамилия и адрес.

То же самое назначается внутри div. Например,

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

Значение Firstname: {{firstname}} будет заменено внутри интерполяции, т.е. {{}} значением, присвоенным в объекте данных, т.е. Ria. То же самое и с фамилией.

Затем у нас есть методы, в которых мы определили функцию 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"}
         
         // direct instance creation
         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); // печатает Раджа

console.log(vm.$data); печатает весь объект, как показано выше

console.log(vm.$data.fname); // печатает Раджа

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

<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"};
         
         // direct instance creation
         var vm = new Vue({
            data: _obj
         });
         console.log(vm.fname);
         console.log(vm.$data);
         console.log(vm.$data.fname);
         
         // must use function when in 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- Тип для реквизита - это массив строки или объекта. Он принимает синтаксис на основе массива или объекта. Они называются атрибутами, используемыми для приема данных от родительского компонента.

Пример 1

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

Пример 2

Vue.component('props-demo-advanced', {
   props: {
      // just type check
      height: Number,
      
      // type check plus other validations
      age: {
         type: Number,
         default: 0,
         required: true,
         validator: function (value) {
            return value >= 0
         }
      }
   }
})

propsData - Используется для модульного тестирования.

Type- массив строки. Например, {[ключ: строка]: любой}. Его нужно передать при создании экземпляра Vue.

пример

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

Computed- Тип: {[ключ: строка]: Функция | {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 only, just need a function
               aSum: function () {
                  return this.a + 2;
               },
               
               // both get and 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. Сделаем вызов метода с помощью объекта Vuevm.asquare (), стоимость имущества a обновляется в asquareфункция. Значение a изменяется с 1 на 25, и то же самое отображается в следующей консоли браузера.