Vue.js-カスタムコマンド

4293 ワード

javascript フロントフレーム先端 vue.js

学習ノート:カスタムコマンド
カスタムコマンド
カスタムコマンドの登録方法は、グローバル登録とローカル登録に分けられます.例えば、一つの登録v-focusコマンドは、・

</code>            ，       ：</p> 
 <pre><code>//    
Vue.directive('focus', {});

//    
new Vue({
    el: '#app',
    directives: {
        focus: {}
    }
});
</code></pre> 
 <p>                  ，       ：</p> 
 <ul> 
  <li> <code>bind</code>：     ，             ，                           。</li> 
  <li> <code>inserted</code>：             （         ，     <code>document</code> ）。</li> 
  <li> <code>update</code>：               ，          。            ，            。</li> 
  <li> <code>componentUpdate</code>：                    。</li> 
  <li> <code>unbind</code>：     ，          。</li> 
 </ul> 
 <p>                     。            ，      <code>inserted</code>。</p> 
 <pre><code><div id="app">
    <input type="text" v-focus=""/>
</div>

Vue.directive('focus', {
    inserted(el) {
        el.focus();
    }
});
new Vue({
    el: '#app',
});
</code></pre> 
 <p>    ，<code>input</code>         ，       。</p> 
 <p>              ：</p> 
 <ul> 
  <li> <code>el</code>         ，        DOM</li> 
  <li> <p><code>binding</code>     ，      ：</p> 
   <ul> 
    <li> <code>name</code>    ，   <code>v-</code>  </li> 
    <li> <code>value</code>       </li> 
    <li> <code>oldValue</code>          ，  <code>update</code> <code>componentUpdate</code>     。          。</li> 
    <li> <code>expression</code>          。</li> 
    <li> <code>arg</code>        。</li> 
    <li> <code>modifiers</code>           。</li> 
   </ul> </li> 
  <li> <code>vnode</code> Vue         。</li> 
  <li> <code>oldVnode</code>          <code>update</code> <code>componentUpdate</code>     。</li> 
 </ul> 
 <p data-height="265" data-theme-id="0" data-slug-hash="QxKQqY" data-default-tab="html,result" data-user="whjin" data-embed-version="2" data-pen-title="Vue-     " class="codepen">See the Pen Vue-      by whjin (@whjin) on CodePen.</p><br/><script async="" src="https://static.codepen.io/ass...;></script></p> 
 <p>       ，           JavaScript     。</p> 
 <pre><code><div id=" app="">
    <div v-test="{msg:'hello',name:'Andy}"></div>
</div>
</code></pre> 
 <h1>            <code>v-time</code> </h1> 
 <p><p data-height="265" data-theme-id="0" data-slug-hash="wXoMpg" data-default-tab="html,result" data-user="whjin" data-embed-version="2" data-pen-title="Vue-        " class="codepen">See the Pen Vue-         by whjin (@whjin) on CodePen.</p><br><script async src="https://static.codepen.io/ass...;></script> 
 <p><code>Time.getFormatTime()</code>         <code>v-time</code>    ，         ，               。</p> 
 <p> <code>bind</code>   ，   <code>v-time</code>     <code>binding.value</code>      <code>TimeFormatTime()</code>         ，   <code>el.innerHTML</code>        。   <code>el.__timeout__</code>       ，    ，   <code>unbind</code>      。</p> 
 <p><strong>  ：</strong>         ， DOM            ，   <code>bind</code>     ，    <code>unbind</code>       。</p> 
</div>
                            </div>
                        </div>

・

Javascript原型(二)