vue v-model, computed,watch,축약형,스타일 적용

1) v-model

    <section id="events">
      <input type="text" v-model="name">
    </section>

v-model은 v-bind:value v-on:input의 축약형

 

2) computed : 함수가 아니라 변수처럼 사용

계산 할때만 메서드 사용

의존성이 있을때는 computed사용

    <section id="events">
      <p>Your Name: {{ fullname }}</p><!--함수가 아니라 변수로 사용-->
    </section>

const app = Vue.createApp({

  data() {
    return {
      name: ''
    };
  },

  computed : {
    fullname() {
      console.log('Running again...');
      if (this.name === '') {
        return '';
      }
      return this.name + ' '+ 'AA';
    }
  },
 }
});

app.mount('#events');

3) watch

const app = Vue.createApp({

  data() {
    return {
      counter: 0,
      name: '',
    };
  },
  watch: {
    conter(value) {
      if (value > 50) {
        setTimeout(function () {
          this.counter = 0;
        }, 2000);
        
      }
    },
    //특정 조건에 이벤트를 발생시켜 데이터 프로퍼티를 변경할때 좋음
    name(value) {
      this.fullname = this.value + ' ' + 'bb';
    } //name데이터가 변경될때마다 name메서드가 호출
  },

  computed : {


  },

 
  }
});

app.mount('#events');

연산프로퍼티 대체하지만

두가지 데이터를 가져올 경우는 연산프로퍼티가 더 좋음

특정 이벤트 조건 사용

4) v-on 축약형 : '@',  v-bind 축약형 : ':value'

    <section id="events">
      <button @click="add(10)">Add 10</button>
      <input type="text":value="a..." v-model="name">
    </section>

4) 동적 스타일 :class

    <section id="styling">
      <!--active뒤의 객체가 true이면 active 스타일 적용 -->
      <div 
      class ="demo"
      :class ="{active : boxA}"    
      @click ="boxSelected('A')"></div>
      <!--주의할 점!!! 매개 변수 넣을때 ' ' 꼭 붙여야함-->
      <div class="demo" 
      :class ="{active : boxB}"  
      click ="boxSelected('B')"></div>
      <div class="demo" 
      :class ="{active : boxC}"  
      @click ="boxSelected('C')"></div>
    </section>

:class 를 통해 특정 객체가 true일때만 스타일 적용

5) computed 사용해서 class 적용

    <section id="styling">
      <div 
      class ="demo"
      :class =" boxAclasses"    
      @click ="boxSelected('A')"></div>
    </section>

const app = Vue.createApp({
    data() {
        return {
            boxA: false,
            boxB: false,
            boxC: false
        };
    },
    methods: {
        boxSelected(box) {
            if(box === 'A'){
                this.boxA = !this.boxA;
            } else if (box === 'B'){
                this.boxB = !this.boxB;
            } else if (box === 'C'){
                this.boxC = !this.boxC;
            } 
        }
    },
    computed : {
        boxAclasses () {
            return {active: this.boxA};
        },

    }

});

6) 배열사용해서 class 적용

  <section id="styling">
      <div 
      :class ="['demo',{active : boxA}]"    
      @click ="boxSelected('A')"></div>
    </section>