vueカスタム命令によるデータ引き出し更新の実現

注意:

本文を読むにはvueに対して一定の理解が必要である

以下のコードフラグメントはvueの単一ファイルコンポーネント、すなわち.vueで終わるファイルの

にある.

以下で説明するのは単なる実現方法であり,唯一の方法でも最良の方法でもない(￣＿￣‖)

.
Step 1
まず、変数を定義する必要があります.

// app.vue 

data () {   
    return {
      //    getData
      getData:{},
      //            
      ifUpdate:true
    }
}
</code></pre> 
 <h2>Step 2</h2> 
 <p>      ajax   ，   <code>index.html</code>     <code>jquery</code>，          ：</p> 
 <pre><code>// index.html

<script type="text/javascript" src="./lib/js/jquery-2.1.1.min.js">

Step 3
次にカスタムコマンドを使用します.コンポーネントをインスタンス化すると、カスタムコマンドのメソッドが自動的に実行されます.
コンポーネントがインスタンス化されると、初期値ifUpdateをパラメータとしてカスタム命令initDataのメソッドが最初に呼び出され、その後、パラメータ値ifUpdateが変化するたびにinitDataの関数が再び呼び出され、パラメータはifUpdateの新しい値と古い値である.

// app.vue 

// app.vue 

//        
directives:{
    initData:function(val, oldVal){
      if(!val){
        return;
      }
      var self = this;
      $.getJSON( "ajax/test.json", function( data ) {
          self.vm.getData = data;
      });
      //    ifUpdate      true            ajax      
      self.vm.ifUpdate = false;
    }
}
</code></pre> 
 <h2>    </h2> 
 <p><strong>     ，      ：</strong></p> 
 <ol> 
  <li>         ，  <code>ifUpdate</code>    <code>false</code> </li> 
  <li>              ，   <code>ifUpdate</code>    <code>true</code> </li> 
  <li>     <code>ifUpdate</code>      ，     ajax        </li> 
  <li>      <code>ifUpdate</code>     <code>false</code> </li> 
 </ol> 
</article>
                            </div>
                        </div>
                    </div>
                    <!--PC WAP    -->
                    <div id="SOHUCS" sid="1213627683846590464"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js">