VueJS 2ディレクティブの挿入イベント

Question

私は新しいVueJSの学生です。私はディレクティブを実行しようとしていましたが、理由が分からないので停止しました。私は間違って何をしているのですか？私はちょうどel要素を取得したいです。

ここにJSFiddleまたは以下のコードがあります。

HTML

<div class="container" id="vue-app"> 
    <ul> 
     <li v-test v-for="item in itens"> 
     {{item.name}} 
     </li> 
    </ul> 
    <span id="directiveLog"></span> 
</div> 

JS

Vue.directive('test', { 
    inserted: function (el) { 
     document.querySelector('#directiveLog').innerHTML = el; 
    } 
}) 

new Vue({ 
    el: '#vue-app', 

    data: { 
    itens:[ 
    {name: "hello"}, 
    {name: "fun"}, 
    {name: "world"} 
    ] 
    } 

}); 

Answer 1

挿入された機能にパラメータ 'EL'（EL）{...} - それはV-テストが挿入され、あなたの要素であります。

Vue.directive('test', { 
 
     inserted: function (el) { 
 
      document.querySelector('#directiveLog').innerHTML = el.innerHTML; 
 
    } 
 
}) 
 

 
new Vue({ 
 
    el: '#vue-app', 
 

 
    data: { 
 
    itens:[ 
 
    {name: "hello"}, 
 
    {name: "fun"}, 
 
    {name: "world"} 
 
    ] 
 
    } 
 

 
});

<script src="https://cdn.jsdelivr.net/npm/vue"></script> 
 
    <div v-test class="container" id="vue-app"> 
 
       <ul> 
 
        <li v-for="item in itens"> 
 
        {{item.name}} 
 
        </li> 
 
       </ul> 
 
       <span id="directiveLog"></span> 
 
      </div>