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

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

Синтаксис

var app=newVue({

   // options

})

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

HTML часть

<html>
   <head>
      <title>VueJsInstance</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>

JS часть (vue_instance.js)

var  vm=newVue({
   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

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

Пример:

<html>
   <head>
      <title>VueJsIntroduction</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>VueJsIntroduction</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 – Тип для 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
         }
      }
   }
})

promsDate

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

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

Computed

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

Пример:

<html>
   <head>
      <title>VueJsIntroduction</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

Methods – Методы, которые нужно включить в экземпляр Vue, как это показано в следующем коде. Мы можем получить доступ к функции, используя объект Vue.

<html>
   <head>
      <title>VueJsIntroduction</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.

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