VueJS - Giao diện phản ứng

VueJS cung cấp các tùy chọn để thêm khả năng phản ứng vào các thuộc tính, được thêm động. Hãy xem xét rằng chúng ta đã tạo phiên bản vue và cần thêm thuộc tính watch. Nó có thể được thực hiện như sau:

Thí dụ

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "app">
         <p style = "font-size:25px;">Counter: {{ counter }}</p>
         <button @click = "counter++" style = "font-size:25px;">Click Me</button>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#app',
            data: {
               counter: 1
            }
         });
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
         setTimeout(
            function(){
               vm.counter = 20;
            },2000
         );
      </script>
   </body>
</html>

Có một bộ đếm thuộc tính được xác định là 1 trong đối tượng dữ liệu. Bộ đếm được tăng lên khi chúng ta nhấp vào nút.

Vue instance đã được tạo. Để thêm đồng hồ vào đó, chúng ta cần thực hiện như sau:

vm.$watch('counter', function(nval, oval) {
   alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});

Chúng ta cần sử dụng $ watch để thêm watch bên ngoài phiên bản vue. Có một cảnh báo được thêm vào, hiển thị sự thay đổi giá trị cho thuộc tính bộ đếm. Ngoài ra còn có một chức năng hẹn giờ được thêm vào, tức là setTimeout, đặt giá trị bộ đếm thành 20.

setTimeout(
   function(){
      vm.counter = 20;
   },2000
);

Bất cứ khi nào bộ đếm được thay đổi, cảnh báo từ phương thức đồng hồ sẽ được kích hoạt như thể hiện trong ảnh chụp màn hình sau.

VueJS không thể phát hiện thêm và xóa thuộc tính. Cách tốt nhất là luôn khai báo các thuộc tính, các thuộc tính này cần được phản ứng trước trong thể hiện Vue. Trong trường hợp chúng ta cần thêm thuộc tính vào lúc chạy, chúng ta có thể sử dụng các phương thức Vue global, Vue.set và Vue.delete.

Vue.set

Phương thức này giúp thiết lập một thuộc tính trên một đối tượng. Nó được sử dụng để khắc phục hạn chế rằng Vue không thể phát hiện các bổ sung thuộc tính.

Cú pháp

Vue.set( target, key, value )

Ở đâu,

target: Có thể là một đối tượng hoặc một mảng

khóa: Có thể là một chuỗi hoặc số

giá trị: Có thể là bất kỳ loại nào

Hãy xem một ví dụ.

Thí dụ

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "app">
         <p style = "font-size:25px;">Counter: {{ products.id }}</p>
         <button @click = "products.id++" style = "font-size:25px;">Click Me</button>
      </div>
      <script type = "text/javascript">
         var myproduct = {"id":1, name:"book", "price":"20.00"};
         var vm = new Vue({
            el: '#app',
            data: {
               counter: 1,
               products: myproduct
            }
         });
         vm.products.qty = "1";
         console.log(vm);
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
      </script>
   </body>
</html>

Trong ví dụ trên, có một myproduct biến được tạo ngay từ đầu bằng cách sử dụng đoạn mã sau.

var myproduct = {"id":1, name:"book", "price":"20.00"};

Nó được cấp cho đối tượng dữ liệu trong Vue instance như sau:

var vm = new Vue({
   el: '#app',
   data: {
      counter: 1,
      products: myproduct
   }
});

Hãy xem xét, chúng ta muốn thêm một thuộc tính nữa vào mảng myproduct, sau khi thể hiện Vue được tạo. Nó có thể được thực hiện như sau:

vm.products.qty = "1";

Hãy xem kết quả đầu ra trong bảng điều khiển.

Như đã thấy ở trên, trong các sản phẩm, số lượng được thêm vào. Các phương thức get / set, về cơ bản bổ sung khả năng phản ứng có sẵn cho id, tên và giá, và không có sẵn cho qty.

Chúng ta không thể đạt được khả năng phản ứng chỉ bằng cách thêm đối tượng vue. VueJS chủ yếu muốn tất cả các thuộc tính của nó được tạo ngay từ đầu. Tuy nhiên, trong trường hợp cần bổ sung sau, chúng ta có thể sử dụng Vue.set. Đối với điều này, chúng ta cần thiết lập nó bằng cách sử dụng vue global, tức là Vue.set.

Thí dụ

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "app">
         <p style = "font-size:25px;">Counter: {{ products.id }}</p>
         <button @click = "products.id++" style = "font-size:25px;">Click Me</button>
      </div>
      <script type = "text/javascript">
         var myproduct = {"id":1, name:"book", "price":"20.00"};
         var vm = new Vue({
            el: '#app',
            data: {
               counter: 1,
               products: myproduct
            }
         });
         Vue.set(myproduct, 'qty', 1);
         console.log(vm);
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
      </script>
   </body>
</html>

Chúng tôi đã sử dụng Vue.set để thêm qty vào mảng bằng cách sử dụng đoạn mã sau.

Vue.set(myproduct, 'qty', 1);

Chúng tôi đã an ủi đối tượng vue và sau đây là kết quả.

Bây giờ, chúng ta có thể thấy get / set cho qty được thêm bằng Vue.set.

Vue.delete

Hàm này được sử dụng để xóa thuộc tính động.

Thí dụ

Vue.delete( target, key )

Ở đâu,

target: Có thể là một đối tượng hoặc một mảng

khóa: Có thể là một chuỗi hoặc một số

Để xóa bất kỳ thuộc tính nào, chúng ta có thể sử dụng Vue.delete như trong đoạn mã sau.

Thí dụ

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "app">
         <p style = "font-size:25px;">Counter: {{ products.id }}</p>
         <button @click = "products.id++" style = "font-size:25px;">Click Me</button>
      </div>
      <script type = "text/javascript">
         var myproduct = {"id":1, name:"book", "price":"20.00"};
         var vm = new Vue({
            el: '#app',
            data: {
               counter: 1,
               products: myproduct
            }
         });
         Vue.delete(myproduct, 'price');
         console.log(vm);
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
      </script>
   </body>
</html>

Trong ví dụ trên, chúng ta đã sử dụng Vue.delete để xóa giá khỏi mảng bằng đoạn mã sau.

Vue.delete(myproduct, 'price');

Sau đây là kết quả, chúng ta thấy trong bảng điều khiển.

Sau khi xóa, chúng tôi chỉ có thể thấy id và tên khi giá bị xóa. Chúng tôi cũng có thể nhận thấy rằng các phương thức get / set đã bị xóa.