Vue_2

양방향 데이터 바인딩

• 두방향 모두 데이터에 접근할수 있도록 하는것이 양방향 데이터 바인딩
• 양방향 데이터 바인딩을 가능하게 해주는 디렉티브가 바로 v-model

폼 입력 바인딩

• HTML input 태그에서 v-model 디렉티브 설정 시 양방향 데이터 바인딩 가능

<div id="app">
    <input type="text" v-model="name"> //v-model 디렉티브 설정
    
</div>

new Vue({
    el: "#app",
    data : {
        name : 'LEGO'
    }
});

조건부 랜더링

• 조건에 따라 해당하는 태그만 랜더링 해주는것이 v-if

조건부 랜더링

<div id="app">
    <p v-if="dog">강아지</p>
    <p v-else>고양이</p>
    <button v-on:click="dog = !dog">반대</button>
</div>

new Vue({
    el: "#app",
    data: {
        dog : true
    }
});

v-if="조건상태"

v-if 를 갖는 template를 활용한 조건부 그룹

• v-if 디렉티브는 해당 태그의 하위 태그에도 동작함.

<template v-if="dog">
    <p>강</p>
    <p>아</p>
    <p>지</p>
</template>
<template v-else>
    <p>고</p>
    <p>양</p>
    <p>이</p>
</template>

v-if 와 v-show

• v-show 는 v-if 디렉티브와 비슷한 역할을 함.
  • 상태값에 따라 결과값으로 보이고 보이지않고 달라짐.

v-show ="조건상태"

<div id="app">
    <p v-if="dog">강</p>  // 랜더링 시 <!---->
    <p v-show="dog">강</p> // 랜더링 시 <p style="display: none;">강</p>
</div>

• 코드를 지우고싶다면 v-if
• 코드는 있지만 보이지않도록 하려면 v-show 를 선택해서 사용

리스트 렌더링 v-for

• 목록이나 리스트와 같이 비슷한 내용을 반복적으로 보여줘야 할 상황에 사용하는 디렉티브 v-for

v-for="사용변수명 in 데이터변수명"

• 아이템명은 array 가 반복되면서불로올 요소 하나하나를 의미

<div id="app">
    <h1>리스트</h1>
    <ul>
        <li v-for="array in list"></li>
    </ul>
</div>

new Vue({
    el: "#app",
    data: {
        list:['A', 'B', 'C', 'D', 'E', 'F', 'G']
    }
})

v-for 내의 현재 index 값

v-for="( 변수명, 인덱스명) int 데이터 변수명"

• 변수명은 실제로 반복되는 하나하나의 요소를 의미
  • i는 해당 요소의 반복 index 숫자를 표기해줌,
  • 변수명,i 의 괄호를 꼭 넣어야 오류가 안남. ```js

• ()

#### Object 의 반복

```js
new Vue({
    el: "#app",
    data: {
        list:[
            {name : '홍길동', age : '10'},
            {name : '동매달', age : '20'},
            {name : '달러', age : '30'},
            {name : '러시아', age : '40'},
            {name : '아시아', age : '50'},
            {name : '아몬드', age : '60'},
            {name : '드럼', age : '70'},
            {name : '럼주', age : '80'},
        ]
    }
}); //배열생성
<div id="app">
    <ul>
        <li v-for="Alist in list">, </li>
    </ul>
</div>

• 데이터값으로 준 list 안의 속성을 불러오면 Object 접근 가능

반응형 리스트 key값

• 템플릿내 복잡한 구조를 가지거나, 재배열 되었다면 수정 시 정확한 위치 찾기가 어려움.
  • v-for 디렉티브는 항상 유니크한 key값을 선언해 줄것을 권하고있음.
  • Vue 공식문서에는 각 리스트의 id값을 선언해주는것이 이상적이라고 함.

<li v-for="Alist in list" :key="list.name"> , </li>

클래스와 스타일 바인딩

• v-bind 디렉티브를 사용 시 class와 style을 사용해 원하는 스타일링을 할수있음.

v-bind:class="클래스명"
v-bind:class="{ 클래스명 : 조건 }"

• v-bind:class 는 문자열, 객체 또는 배열을 둘다 받을수있음.
  • 객체를 받은경우에는 클래스명은 객체의 속성 키
  • 클래스가 적용되야 하는조건이 속상값으로 들어감.

1. v-bind:class 객체를 받은경우

<div class="demo" @click="attachRed = !attachRed" :class="{red: attachRed, green: !attachRed}" >1</div>
// :class 에 속성키로 들어간 red와 green 은 클래스명
// 각각의 값은 해당 클래스가 적용되는 조건

• html 태그안에 v-bind, v-on 약어를 사용하여 색상변경 값을 기재해놓음.

1. v-bind:class 가 문자열을 받는경우

<div class="demo":class="color">2</div>
    2번의 상자색 : <input type="text" v-model="color">
// color 와 2-way-binding 으로 연결된 인풋박스에 입력하는 문자 그대로 color 에 바인딩 되고있음.

• :class=”문자열” 인 경우에는 조건에 상관없이 문자열을 그대로 클래스에 적용되는것이 확인됨.

1. v-bind:class 의 객체가 복잡한 경우

<div class="demo":class="divClass">3</div>

computed:{
    divClass:function(){
        return {
            red:this.attachRed,
            green:!this.attachRed
        }
    }
}
// 1번과 동일한 동작을 함.

• 복잡한 조건의 경우 computed 나 methods 에서 반환되는 객체 혹은 문자열 클래스로 바인딩 가능함.

스타일 바인딩

• 스타일 바인딩은 css와 동일하게 사용 가능함. 매우 직관적으로 사용 가능

v-bind:style="{ 스타일명 : 스타일값, 스타일명: 스타일값 }"

<div class="demo":class="color":style="{height : myHeight}">2</div>
    // :style 바인딩 추가하여 height : computed 에 선언된 함수 불러옴.
    myHeight : function(){
        return this.attachRed ? '50px' : '200px';
    }
//computed 에 추가한 함수

Computed, Watch

• 계계산된 속성인 computed 와 비슷한 역할을 하는 watch

Watch

• 특정 대상을 보고있는 감시자의 역할
  • 지정한 대상의 값이 변경될 대마다 정의한 함수가 실행됨

<div id="app">
    <h1>8</h1>
    <p></p>
    <button @click="count--">카운트 감소</button>
</div>

new Vue({
    el : "#app",
    data:{
        count : 3,
        text : '변경 전'
    },
    watch:{
        count : function (newVal, oldval){
            this.text = `${oldval} 에서 ${newVal} 로 변경` 
        }
    }
});

• data 에서 선언된 count 가 watch 안에도 그대로 선언되어있음.

  watch 는 기존 Vue 인스턴스 내에 선언된 값의 변화를 감시하는 역할을 하기때문에 Vue 인스턴스내에 선언된 값을 그대로 다시 사용하게 됨.(count 를 감시하여 count 의 값이 변화할때마다 watch 안에 정의한 count 라는 함수가 실행되는것.)

watch

new Vue({
    el : "#app",
    data:{
        count : 3,
    },
    computed:{
      cal : function(comCount){
          if(this.count ===1){
              alert('값이 1')
          }
      }  
    },
    watch:{
        count : function(newVal){
            if(newVal == 0 ){
                alert('값이 0임')
                this.count = 3;
            }
        }
    }
});
<div id="app">
    <h1>8</h1>
    <button @click="count--">카운트 감소</button>
</div>
// computed 의 함수를 출력하고싶다면, HTML 의 코드에  코드 추가해야함.

• computed 는 참조하고있는 값이 변경될때마다 정의된 계산식에 따라 값을 출력

  계산된 값을 출력하는용

  • watch 는 값이 변경될때 실행되는 함수를 우리가 지정가능함.

    어떤 조건이 되었을 때 함수를 실행시키기 위한 트리거

다수의 인스턴스 사용

var createdData = {
    title : 'new Create Vue'
}

var vm1 = new Vue({
    el: "#app",
    data: createdData
});


var vm2 = new Vue({
    el : "#app2",
    data:{
        title : 'second Vue'
    },
    methods :{
        changeMethod : function(){
            vm1.title = 'new Vue'
        }
    }
})

<div id="app">
    
</div>

<div id="app2">
    
<button @click="changeMethod">Change</button>
</div>