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

매개 변수 삽입 기능의 '엘'(엘) {...} -이 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>