v-for

배열 사용

<ul id="array-with-index">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>
<script>
  Vue.createApp({
  data() {
    return {
      parentMessage: 'Parent',
      items: [{ message: 'Foo' }, { message: 'Bar' }]
    }
  }
}).mount('#array-with-index')
</script>

v-for를 통해 ()를 사용하여
첫번재는 item(배열값)을
두번째는 index(순서)를 얻을 수 있다.

객체 사용

<ul id="v-for-object" class="demo">
	<li v-for="(value, name, index) in myObject">
         	 {{ index }}. {{ name }}: {{ value }}
	</li>
</ul>
<script>
  Vue.createApp({
  data() {
    return {
      myObject: {
        title: 'How to do lists in Vue',
        author: 'Jane Doe',
        publishedAt: '2016-04-10'
      }
    }
  }
}).mount('#v-for-object')
</script>

v-for를 통해 ()를 사용하여
첫번재는 value(객체값)을
두번째는 name(key값)을
세번째는 index(순서)를 얻을 수 있다.

v-for와 :key 관계

반복되는 화면을 렌더링하는데 key 속성은 성능 최적화를 하는데 있어 매우 중요한 역할
vue.js는 효율적인 반복을 위해 key가 같은 템플릿은 다시 랜더링하지 않는다고한다.

• key를 통해 반복되는 영역을 최적화하는 용도

배열변경감지

변이메소드

push pop shift unshift splice sort reserve

• 호출된 원래 배열을 변경

비변이메소드(배열교체)

filter concat

• 항상 새 배열을 반환

• 기존 DOM을 버리고 전체 목록을 다시 렌더링할 것 같으나 실제 효율성있게 잘 렌더링한다.

TodoList Vue로 구현하기

TodoList 코드

<div id="app">
  <form @submit="addNewTodoList">
    <label for="new-todo">TodoList</label>
    <input v-model="newTodoText"
           id="newTodoText"
           type="text"
           placeholder="E.g">
    <button>클릭버튼</button>
  </form>

  <ul>
    <li v-for="todo in todos" key="todo.id">{{todo.title}}
    <button @click="removeTodoList(todo.id)">삭제버튼</button></li>
  </ul>
</div>
</body>
<script>
  function generateId(){
    return `${Math.random()}${Date.now()}`
  }

  const App = {
    data(){
      return {
        newTodoText : '',
        todos : []
      }
    },
    methods : {
      addNewTodoList(event){
        event.preventDefault() //@submit.prevent로도 같은 동작
        this.todos.push({
          id : generateId(),
          title : this.newTodoText
        })
        this.newTodoText = ''
      },
      removeTodoList(todoId){
        this.todos = this.todos.filter(todo => {
          return todo.id !== todoId
        })
      }
    }
  }
  const vm = Vue.createApp(App).mount('#app')
</script>

1. preventDefault

submit 이벤트를 실행시 다른 url로 넘어가는 것을 막기 위해
해당 실행함수에 매개변수로 event를 붙여 event.preventDefault()를 이용하였다.
이를 @submit.prevent로도 사용해도 같은 동작이다.

2. generateId

고유한 id를 부여하기 위한 함수로 Date.now()만으로는 같은 id가 생길 가능성도 있으므로 Math.random()을 함께 이용한 id를 부여한다.

3. filter 함수

제거할 id와 같은 값이 아닌 것들만 (todo.id !== todoId가 true인 것들만)
this.todos에 남게 다룬다.

4. 단방향 데이터 바인딩 / 양방향 데이터 바인딩

data부분에서 값이 태그의 값에만 영향을 주는 것이 단방향 데이터 바인딩이고
data부분에서 값이 태그의 값에 영향을 주고
태그의 값에 의해서 다시 data부분에서의 값까지 영향을 받아 갱신되는것을 양방향 데이터 바인딩이다.

• 이를 사용하기 위해서는 v-model을 사용한다.