<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJS Reactive接口</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>

數(shù)據(jù)對象中有一個屬性計數(shù)器(counter)被定義為1。當我們點擊按鈕時，計數(shù)器(counter)會增加。

Vue實例已經(jīng)被創(chuàng)建。為了增加監(jiān)視(watch)，還需要這樣做 -

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

需要使用$watch在vue實例之外添加監(jiān)視。添加了一個警報(alert())，顯示計數(shù)器屬性的值更改。還增加了一個定時器功能，即setTimeout，它將計數(shù)器值設(shè)置為20。

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

每當計數(shù)器發(fā)生變化時，watch方法中的警報就會被觸發(fā)，如下圖所示。

VueJS無法檢測屬性添加和刪除。最好的方法是始終聲明屬性，這些屬性在Vue實例中需要被預(yù)先反應(yīng)。如果需要在運行時添加屬性，可以使用Vue全局Vue.set和Vue.delete方法。

1. Vue.set

此方法有助于在對象上設(shè)置屬性。它用來繞過Vue無法檢測屬性添加的限制。
語法

Vue.set( target, key, value )

在這里，

target：可以是一個對象或一個數(shù)組
key：可以是字符串或數(shù)字
value：可以是任何類型的值

下面來看一個例子。創(chuàng)建一個文件：vue-set.html -

在上面的例子中，在開始時使用下面的一段代碼創(chuàng)建了一個變量myproduct。

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

它被賦予Vue實例中的數(shù)據(jù)對象如下 -

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

考慮一下，在創(chuàng)建Vue實例之后，如果想添加一個屬性到myproduct數(shù)組中。可以通過如下方法做到 -

vm.products.qty = "1";

下面來看看看控制臺中的輸出。如下所示 -

如上所見，在產(chǎn)品中添加數(shù)量。 get/set方法基本上增加了反應(yīng)性，可用于id，name和price，不可用于qty。

不能通過添加vue對象來實現(xiàn)反應(yīng)。VueJS大多希望在開始時創(chuàng)建所有的屬性。但是，如果稍后需要添加它，可以使用Vue.set。為此，需要使用vue全局設(shè)置它，即Vue.set。

示例

<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添加數(shù)組到數(shù)組，使用下面的一段代碼。

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

vue對象如下控制臺輸出。

現(xiàn)在，可以看到使用Vue.set添加的數(shù)量的get/set。

2. Vue.delete

該函數(shù)用于動態(tài)刪除屬性。

示例

Vue.delete( target, key )

在這里，

target：可以是一個對象或一個數(shù)組
key：可以是字符串或數(shù)字
value：可以是任何類型的值

參考以下代碼 -

<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來從數(shù)組中刪除價格。

Vue.delete(myproduct, 'price');

以下是在控制臺中輸出 -

刪除后，只能看到價格被刪除的ID和名稱。也可以注意到get/set方法被刪除。

上一篇：VueJS事件下一篇：VueJS數(shù)據(jù)綁定

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

VueJS Reactive接口

1. Vue.set

2. Vue.delete