極客書

VueJS 反應界面

VueJS提供了向動態添加的屬性添加反應性的選項。考慮到我們已經創建了vue實例，需要添加watch屬性。它可以按以下方式完成&負;

Example

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

數據對象中有一個定義爲1的屬性計數器。當我們單擊按鈕時，計數器將遞增。

已創建Vue實例。要給它加上手錶，我們需要按以下步驟操作&負;

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

我們需要使用$watch在vue實例之外添加watch。添加了一個警報，顯示計數器屬性的值更改。還添加了一個定時器功能，即setTimeout，它將計數器值設置爲20。

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

每當計數器更改時，watch方法發出的警報將觸發，如下面的螢幕截圖所示。

Counter

VueJS無法檢測屬性的添加和刪除。最好的方法是始終聲明屬性，這需要在Vue實例中預先進行響應。如果需要在運行時添加屬性，可以使用Vue global、Vue.set和Vue.delete方法。

Vue.set

此方法有助於設置對象的屬性。它用於繞過Vue無法檢測屬性添加的限制。

Syntax

Vue.set( target, key, value )

哪裡，

目標：可以是對象或數組

key：可以是字符串或數字

值：可以是任何類型

讓我們看一個例子。

Example

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

在上面的例子中，有一個變量myproduct是在開始時使用下面的代碼創建的。

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

它被賦予Vue實例中的數據對象，如下所示−

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

考慮一下，我們希望在創建Vue實例之後，再向myproduct數組添加一個屬性。它可以按以下方式完成&負;

vm.products.qty = "1";

讓我們看看控制台中的輸出。

MyProduct Array

如上所示，在產品中添加數量。get/set方法基本上增加了id、name和price的反應性，而不是qty。

我們不能僅僅通過添加vue物體來達到反應性。VueJS主要希望在開始時創建其所有屬性。但是，如果以後需要添加，可以使用Vue.set。爲此，我們需要使用vue global設置它，即vue.set。

Example

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

我們使用Vue.set使用以下代碼將數量添加到數組中。

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

我們已經對vue對象進行了安慰，下面是輸出。

Products

現在，我們可以看到使用Vue.set添加的數量的get/set。

Vue.delete

此函數用於動態刪除屬性。

Example

Vue.delete( target, key )

哪裡，

目標：可以是對象或數組

key：可以是字符串或數字

要刪除任何屬性，可以使用Vue.delete，如下代碼所示。

Example

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

在上面的示例中，我們使用Vue.delete從數組中刪除價格，方法是使用以下代碼。

Vue.delete(myproduct, 'price');

下面是輸出，我們在控制台中看到。

Delete

刪除後，由於價格被刪除，我們只能看到id和name。我們還可以注意到get/set方法被刪除了。