VueJS - Phiên bản

Để bắt đầu với VueJS, chúng ta cần tạo thể hiện của Vue, được gọi là root Vue Instance.

Cú pháp

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

Chúng ta hãy xem một ví dụ để hiểu những gì cần là một phần của hàm tạo 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;
      }
   }
})

Đối với Vue, có một tham số được gọi là el. Nó lấy id của phần tử DOM. Trong ví dụ trên, chúng ta có id#vue_det. Nó là id của phần tử div, có trong .html.

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

Bây giờ, bất cứ điều gì chúng ta sẽ làm sẽ ảnh hưởng đến phần tử div và không có gì bên ngoài nó.

Tiếp theo, chúng ta đã xác định đối tượng dữ liệu. Nó có giá trị tên, họ và địa chỉ.

Tương tự được chỉ định bên trong div. Ví dụ,

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

Giá trị Firstname: {{firstname}} sẽ được thay thế bên trong phép nội suy, tức là {{}} bằng giá trị được gán trong đối tượng dữ liệu, tức là Ria. Họ cũng vậy.

Tiếp theo, chúng ta có các phương thức mà chúng ta đã xác định hàm mydetails và một giá trị trả về. Nó được gán bên trong div là

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

Do đó, bên trong {{}} hàm mydetails được gọi. Giá trị được trả về trong thể hiện Vue sẽ được in bên trong {{}}. Kiểm tra đầu ra để tham khảo.

Đầu ra

Bây giờ, chúng ta cần truyền các tùy chọn cho hàm khởi tạo Vue, chủ yếu là dữ liệu, mẫu, phần tử để gắn kết, phương thức, lệnh gọi lại, v.v.

Hãy để chúng tôi xem xét các tùy chọn được chuyển đến Vue.

#data- Loại dữ liệu này có thể là một đối tượng hoặc một hàm. Vue chuyển đổi các thuộc tính của nó thành getters / setters để làm cho nó hoạt động.

Chúng ta hãy xem cách dữ liệu được truyền trong các tùy chọn.

Thí dụ

<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>

Đầu ra

console.log(vm.fname); // in Raj

console.log(vm.$data); in toàn bộ đối tượng như hình trên

console.log(vm.$data.fname); // in Raj

Nếu có một thành phần, đối tượng dữ liệu phải được tham chiếu từ một hàm như được hiển thị trong đoạn mã sau.

<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>

Trong trường hợp một thành phần, dữ liệu là một hàm, được sử dụng với Vue.extend như được hiển thị ở trên. Dữ liệu là một hàm. Ví dụ,

data: function () {
   return _obj
}

Để tham chiếu đến dữ liệu từ thành phần, chúng ta cần tạo một thể hiện của nó. Ví dụ,

var myComponentInstance = new Component();

Để tìm nạp chi tiết từ dữ liệu, chúng ta cần thực hiện tương tự như đã làm với thành phần mẹ ở trên. Ví dụ.

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

Sau đây là các chi tiết hiển thị trong trình duyệt.

Props- Kiểu cho đạo cụ là một mảng chuỗi hoặc đối tượng. Nó sử dụng cú pháp dựa trên mảng hoặc dựa trên đối tượng. Chúng được cho là thuộc tính được sử dụng để chấp nhận dữ liệu từ thành phần mẹ.

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 - Điều này được sử dụng để kiểm tra đơn vị.

Type- mảng của chuỗi. Ví dụ: {[key: string]: any}. Nó cần được truyền trong quá trình tạo Vue instance.

Thí dụ

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

Computed- Loại: {[key: string]: Hàm | {get: Function, set: Function}}

Thí dụ

<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>

Tính toán có hai chức năng aSumaSquare.

Hàm aSum vừa trả về this.a+2. Hàm aSquare lại hai hàmgetset.

Biến vm là một thể hiện của Vue và nó gọi aSquare và aSum. Ngoài ra vm.aSquare = 3 gọi hàm set từ aSquare và vm.aSquare gọi hàm get. Chúng tôi có thể kiểm tra đầu ra trong trình duyệt trông giống như ảnh chụp màn hình sau.

Methods- Các phương thức sẽ được bao gồm trong Vue instance như được hiển thị trong đoạn mã sau. Chúng ta có thể truy cập hàm bằng đối tượng 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>

Các phương thức là một phần của phương thức khởi tạo Vue. Hãy để chúng tôi thực hiện cuộc gọi đến phương thức bằng đối tượng Vuevm.asquare (), giá trị của tài sản a được cập nhật trong asquarechức năng. Giá trị của a được thay đổi từ 1 thành 25 và giá trị tương tự được phản ánh trong bảng điều khiển trình duyệt sau.