VueJS – Instances

Để bắt đầu với VueJS, chúng ta cần tạo instance của vue. Gọi là root Vue Instance.

Cấu trúc

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

Vue constructor

Ví dụ: Tạo file html với nội dung bên dưới.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/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>

Tạo file vue_instance.js với nội dung bên dưới.

js/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;
      }
   }
})

Trong có tham số el chứa id DOM của HTML mà cụ thể là ID “vue_det” trong file HTML

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

Như vậy, VueJS chỉ tác động trực tiếp vào cặp thẻ DIV với id này mà không ảnh hưởng đến các DOM khác.

Tiếp theo là tham số data, ở ví dụ này, data là 1 object với firstname, lastnameaddress.

Giá trị này được đưa vào cặp thẻ div thông qua các cặp {{ }}.

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

{{firstname}} sẽ được thay thế bở giá trị của firstname trong data, tức là Ria. Tương tự {{lastname}} được thay thế bằng Singh.

Tiếp theo, chúng ta có 1 function mydetails return 1 giá trị, và chúng ta cũng có thể đưa giá trị này vào DOM HTML thông qua code bên dưới:

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

Kết quả của ví dụ trên là

Các tham số khác của Instance Vue.

data

Có thể là object hay function. ở ví dụ trên ta đã tìm hiểu data là object.

Ví dụ data là object

<html>
   <head>
      <title>VueJs Introduction</title>
      <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/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>

Kết quả

  • console.log(vm.fname); // in ra Raj
  • console.log(vm.$data); in ra the object data
  • console.log(vm.$data.fname); // in ra Raj

Ví dụ data là function

<html>
   <head>
      <title>VueJs Introduction</title>
      <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/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>

Trong trường hợp này data là 1 function, được sử dụng với Vue.extend.

data: function () {
   return _obj
}

Để sử dụng data từ Component, chúng ta tạo instance của nó.

var myComponentInstance = new Component();

in ra các dữ liệu

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

Kết quả

Props

Props có thể nhận 1 array-based hay object-based.

Ví dụ 1:

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

Ví dụ 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

Được sử dụng để test 1 đơn vị. Loại dữ liệu array.

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

Computed

Ví dụ:

<html>
   <head>
      <title>VueJs Introduction</title>
      <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/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>

Trong ví dụ này Computed có 2 function aSumaSquare.

Function aSum return this.a+2, Function aSquare chứa 2 function getset.

vm là một instance của Vue. nó gọi cả aSquareaSum.

Như ví dụ trên, đầu tiên vm.aSquare sẽ sử dụng phương thức get và return ra giá trị this.a*this.a tức là bằng 4. Sau đó thông qua phương thức set nó set lại giá trị của this.a = v*2 tức là bằng 6.

Methods

<html>
   <head>
      <title>VueJs Introduction</title>
      <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/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>

Methods là 1 phần của Vue constructor. Như ví dụ trên chúng ta có thể gọi phương thức asquare thông qua vm.asquare()