Vue 기초2

🍔조건문(v-if,v-else-if,v-else)

    <div id="app-1">
        <template v-if="number === 1"><!-- number가 1일때 -->
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </template> 
        <div v-else-if="number === 2">Hi</div> <!-- number가 2일때 -->
        <div v-else>No</div>  <!-- number가 1또는 2가 아닐때 -->

        <!-- <button @click="toggleShow">Toggle</button> -->
        <button @click="increaseNumber">Increase</button>  {{number}}
    </div>

const app1 = new Vue({
  el: '#app-1',
  data :   { 
               number : 1,
           },
  
  methods: {
               increaseNumber(){
                  return this.number++;
               }

           },
})

위의 코드를 해석하면 vue인스턴스를 생성한 후 data에 number값을 넣고
버튼을 클릭하면 increaseNumber메서드가 실행된다. 이 메서드는 number의 값을 1씩 증가시킨다.
그리고 v-if,v-else-if,v-else의 값 중에 참인 값의 태그만 보여지게 되고 나머지는 false로 가려진다.

v-if,v-else-if,v-else를 가지는 태그는 인접해있어야한다.

v-show

    <div id="app-2">
        <div v-show="show">Yes</div>
        <button @click="toggle">Toggle</button>
    </div>

     new Vue({
         el : '#app-2',
         data : { 
                show : true,
         },    
         methods: {
                toggle(){
                    this.show = !this.show;
                },
          },
     });

위의 코드를 해석하면 vue인스턴스를 생성 후에 show라는 프로퍼티를 생성한다. 이 값에는 boolean값을 넣었고 버튼을 클릭했을 때 toggle이라는 메서드가 실행된다. 이 메서드는 show의 값을 반대로 바꾼다.
즉, v-show가 true일 때는 보이고 v-show가 false일때는 숨겨진다.

v-if는 토글비용이 높고 v-show는 초기 렌더링 비용이 더 높다.
매우 자주 바꾸기를 원한다면 v-show를,
런타임시 조건이 바뀌지않으면 v-if를 권장한다.

🍖반복문

  <div id="app-3">
            <div>
                {{people[0].name}}{{people[0].age}}
            </div>
            <div>
                {{people[1].name}}{{people[1].age}}
            </div>
            <div>
                {{people[2].name}}{{people[2].age}}
            </div>
            <div>
                {{people[3].name}}{{people[3].age}}
            </div>

            <hr>
       
            <div v-for="(person, index) in people" :key="person.id"> 
                {{person.name}}{{person.age}} {{index}}
            </div>
    </div>

 new Vue({
            el: '#app-3',
            data: {
                people: [
                    {
                        id=1,
                        name: 'a',
                        age: 20
                    },
                    {
                        id=2,
                        name: 'b',
                        age: 21
                    },
                    {
                        id=3,
                        name: 'c',
                        age: 22
                    },
                    {
                        id=4,
                        name: 'd',
                        age: 23
                    },
                    {
                        id=5,       
                        name: 'e',
                        age: 24
                    },
                ],
            },
            methods: {

            },
        });

hr위의 코드는 div안에 직접적으로 배열번호를 매겨서 프로퍼티값을 가져왔다. 그렇기때문에 코드도 길어지고 나중에 배열이 증가하면 그만큼 또 div를 추가해야하는 작업때문에 유지보수와 시간이 더 많이 요구된다.
하지만 밑의 코드처럼

            <div v-for="(person, index) in people" :key="person.id"> 
                {{person.name}}{{person.age}} {{index}}
            </div>

쓰게 되면 코드를 훨씬 절약할 수 있다. peeple이라는 프로퍼티에서 배열을 가져온 후 person이라는 임의의 배열안에 있는 요소들에 대한 이름을 선언한다. 그리고 (요소이름,index) in 객체명에서 index는 각 요소에 대한 index를 가져올 수 있다.

또한 반복되는 DOM의 내용이 단순한 경우나 의도적인 성능 향상을 위해 기본 동작에 의존하지 않는 경우를 제외하면,가능하면 언제나 v-for에 key를 추가하는 것이 좋습니다.객체나 배열처럼, 기본타입이 아닌 값을 키로 사용해서는 안됩니다. 대신 문자열이나 숫자를 사용하세요. 아니면 데이터베이스에서 가져오는 id값을 넣는 것도 좋습니다.