Vue개념-2

<div v-if="count > 4"> 이런식으로 속성을 달아줄 수 있음
이런 걸 Directive 라고 부름

모던 프레임워크드들은데이터를기반으로 화면에 출력하는 것이 중요함


vue 3버전의 문법

가이드 문서의 어플리케션 & 컴포넌트 인스턴스

실행할 떄 npm run dev 로 실행하면 됨
vue 는 메소드 체이닝을 사용할 수 있음.
RootComponent <= App.vue

인스턴스 라이프사이클에는 mounted, updated, unmounted 들도 존재


이중 중괄호 구문 기법 - 보간법 < = 반응성의 개념을 가짐
v-once 디렉티브 사용하면 데이터가 바뀌더라도 화면은 갱신되지 않음 => 반응성을 가지지않음


<h1 v-html="msg"></h1> 이렇게 사용해야지 읽을 수 있음
<h1 v-bind:class="msg">{{msg}}</h1> 이렇게 사용하면
return {
      msg: 'active'
    } 이렇게 하면 class 명으로 active 줄 수 있음


=====
다음 방식은
<template>
  <h1 v-bind:[attr]="msg">{{msg}}</h1>
</template>

<script>

export default {
  data() {
    return {
      msg: 'active',
      attr: 'class'
    }
  },

이렇게 줄 수도 있음



<template>
  <h1 v-bind:[attr]="'active'"  <= 이렇게하면 하나의 문자데이터로 적용할 수 있음 class이름에 느낌표 계속 붙는 상황 수정
    @[event]='add'>
    {{msg}}
  </h1>
</template>

<script>

export default {
  data() {
    return {
      msg: 'active',
      attr: 'class',
      event: 'click' //@click 말고 이렇게도 줄 수 있음
    }
  },
  methods: { // methods로 써줘야함
    add() {
      this.msg += "!"
    }
  }
}