[Vue.js] v-for 사용법

<div id="app">
    <ul>
        <li v-for="(data, idx) in datas" :key="idx">{{data.item}}</li>
    </ul>
</div>


<script>
    const app = new Vue({
        el: '#app',
        data : {
            datas : [
                { item : "값1"},
                { item : "값2"},
                { item : "값3"},
            ]
        }
    })
</script>

* 중요 :

v-for 사용시에는, 단순 반복이나 의도적으로 성능 향상을 위한 작업이 아니라면 웬만하면 v-bind:key 와 함께 사용하라고 권하고 있다.

key에 대한 이상적인 값은, 각 항목을 구별할 수 있는 유일한 값이어야 한다.

HTML에 id 속성과 비슷한 역할 이라고 보면 된다.

위 코드처럼 약어로 사용 가능

v-bind:key -> :key

v-on:click -> @click