Vue.js의 여러 요소에 이벤트 바인딩

Question

구성 요소를 사용하지 않고 HTML의 여러 요소에 이벤트를 바인딩 할 수 있습니까?

예 :

<ul> 
    <li> 
    <li> 
    <li> 
    <li> 
</ul> 

그래서 나는 모든 <li> 요소에 클릭 이벤트를 바인딩 할 수 있습니다. 그렇다면 어떻게?

Answer 1

이벤트 위임을 사용할 수 있습니다. 이벤트가 터지면 ul 요소에 클릭 핸들러를 넣을 수 있으며 포함 된 버튼 중 하나를 클릭하면 시작됩니다. lievent 개체에서 target은 이벤트가 트리거 된 요소를 나타내며 currentTarget은 처리기가 연결된 요소를 나타냅니다.

new Vue({ 
 
    el: 'body', 
 
    methods: { 
 
    something: function(event) { 
 
     console.log('Clicked:', event.target.textContent); 
 
     console.log('Binding is on:', event.currentTarget); 
 
    } 
 
    } 
 
});

ul { 
 
    cursor: pointer; 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script> 
 
<ul @click="something"> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
</ul>