🌲v-if

true일 때만 블록을 렌더링하는 디렉티브로 v-else, v-else-if도 함께 사용 가능하다.

(예시)

handler를 클릭했을 때 isShow가 true면 Hello!

그렇지 않으면 Bye!

count가 3보다 크면 메세지를 출력해줘

<template>
  <button 
    @click="handler">
    click!</button>
  <h1 
    v-if="isShow">Hello!</h1>
  <h1 
    v-else>Bye!</h1>
  <h1
    v-else-if="count > 3">
    count가 3보다 크다 </h1>
</template>

<script>
export default {
  data () {
    return {
      isShow: true,
      count: 0
    }
  },
  methods: {
    handler() {
      this.isShow = !this.isShow,
      this.count += 1
    }
  }
}
</script>

🌳Group

• <template>을 사용하여 그룹화된 태그에 v-if를 사용할 수 있다. 
• 렌더링된 DOM에는 <template>은 표시되지 않는다. 즉, <template>은 렌더링되지 않는다.
• v-if는 최상위 <template>에 사용할 수 없다.

<template>
  <button @click="handler">
    click!
  </button>
  <template v-if="isShow">
    <h1>Group</h1>
    <p>This is Paragraph</p>
  </template>
</template>

🌲v-show

• 조건에 상관없이 항상 렌더링되어 DOM에 남아있다. 단순히 css속성(display)만 변경되어 기능한다.
• 그룹화된 <template>에 적용할 수 없다.
• v-if와 마찬가지로 v-else와 함께 사용 가능하다.

  <h1 v-show="isShow">Group</h1>

🌲v-if VS v-show

🌳v-if

실제 조건에 따라 렌더링되는 조건부 렌더링으로 작동한다.

렌더링이 수시로 되어 전환비용이 높다.

런타임 시 변경이 자주 일어나지 않을 때 사용한다.

🌳v-show

조건과 상관없이 항상 렌더링되므로 초기 렌더링 비용이 높다.

css 속성만으로 표시되며 필요할 때만 동작하므로 lazy라고 표현하기도 한다.

자주 전환되어도 전환 비용이 낮기 때문에 변경이 잦을 때 유용하다.

🌲Class Binding

객체 구문, 배열 구문

class에 데이터를 속성으로 사용할 때 v-bind 디렉티브를 추가한다. v-bind의 약어로 :만 사용하여 결과적으로 

<h1 :class="데이터"> 클래스 바인딩 </h1>

객체 형식에 여러 클래스(active, text-danger)를 추가해서 특정 데이터(isActive, haserror)를 연결할 수도 있다.

<h1 :class="{ active: isActive, 'text-danger' : hasError }"> 클래스 바인딩 </h1>

직접적으로 객체 데이터로 사용하지 않아도 되며, 이때는 data에 선언(classObject)한다.

<h1 :class="classObject"> 클래스 바인딩 </h1>

data() { 
  return {
    classObject: {
      active: true,
      'text-danger': false
  }
}

클래스 데이터는 computed 속성에 바인딩 할 수도 있다.

🌲Style Binding

아래와 같은 표현보다는 styleObject를 만들어 직접 바인딩하는 것이 좋다. 

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data() {
  return {
    activeColor: 'red',
    fontSize: 30
  }
}

*font-size는 카멜케이스로 표현 혹은 따옴표를 사용한 케밥케이스로 표현

두 개 이상의 styleObject를 적용할 때는 [ 배열 ] 안에 쉼표로 구분한다.

<div :style="[baseStyles, overridingStyles]"></div>

🌲Computed

계산된 데이터를 활용하는 방식으로 computed 옵션에 선언한다.

예시 1

hasFruit() { 배열 데이터의 길이가 0보다 클때 }

<script>
export default {
  data() {
    return {
      fruits: [
        'Apple', 'Banana', 'Cherry'
      ]
    }
  },
  computed: {
    hasFruit() {
      return this.fruits.length > 0
    }
  }
}
</script>

이렇게 만들어진 hasFruit함수는 template에서 아래와 같이 v-if디렉티브(불린)에 넣어 활용

-> 배열 데이터가 0보다 크면 표시하고 그렇지 않으면 보이지 않게 되는 결과

<template>
  <section v-if="hasFruit">
    <h1>Fruits</h1>
    <ul>
      <li 
      v-for="fruit in fruits"
      :key="fruit">
      {{ fruit }}
      </li>
    </ul>
  </section>
</template>

예시 2

reverseFruits() { 데이터 배열의 문자를 split하고 reverse하여 join하는 함수 }

<script>
export default {
  data() {
    return {
      fruits: [
        'Apple', 'Banana', 'Cherry'
      ]
    }
  },
  computed: {
    reverseFruits() {
      return this.fruits.map(fruit => {
        return fruit.split('').reverse().join('')
      })
    }
  }
}
</script>

reverseFruits로 완성된 데이터배열을 반복하여 li에 나열

<template>
  <section>
    <ul>
      <li v-for="fruit in reverseFruits" :key="fruit"></li>
    </ul>
  </section>
</template>

🌲Caching

🌳Computed VS Methods

Computed에는 캐싱이라는 기능이 있어 한 번만 연산되기 때문에 데이터를 최적화할 수 있다.

반면 methods는 출력될 때마다 연산된다.

<template>
  <h1>{{ reversedMessage }}</h1>
  <h1>{{ reversedMessage }}</h1>
  <h1>{{ reversedMessage }}</h1>
</template>

<script>
export default {
  data() {
    return {
      msg: 'hello!'
    }
  },
  computed: { 
    reversedMessage() {
      return this.msg.split('').reverse().join('')
    }
  },
  methods: { 
    reverseMessage() {
      return this.msg.split('').reverse().join('')
    }
  }
}
</script>

🌲Getter & Setter

계산된 데이터 Computed는 읽기전용Readonly이기 때문에 메소드에 연산자를 할당하더라도 반응하지 않는다. Computed 내부에 있는 값을 얻어내는 용도로만 사용되는 의미로 이러한 방식을 Getter라고 한다.

🌳Getter + Setter

Getter에 Setter기능을 추가하는 방법

Computed옵션에서 get(){}과 set(){}으로 나누어 데이터를 받아들일 수 있는 구조로 변경한다.

<template>
  <button @click="add">ADD</button>
  <h1>{{ reversedMessage }}</h1>
  <h1>{{ reversedMessage }}</h1>
  <h1>{{ reversedMessage }}</h1>
</template>

<script>
export default {
  // getter, setter
  data() {
    return {
      msg: 'hello!'
    }
  },
  computed: { 
    reversedMessage: {
      get() {
        return this.msg.split('').reverse().join('')
      },
      set(newValue) {
        this.msg = newValue
      }
    }
  },
  methods: {
    add() {
      this.reversedMessage += '!!'
    }
  }
}
</script>

🌲Watch

데이터의 변경사항을 감시하여 로직을 실행하는데 활용

<template>
  <h1 @click="changeMessage">{{ msg }}</h1> //Good!
  <h1>{{ reversedMessage }}</h1> // !olleh
</template>

<script>
export default {
  data() {
    return {
      msg: 'hello!'
    }
  },
  computed: { 
    reversedMessage() {
      return this.msg.split('').reverse().join('')
    }
  },
  watch: { //변경사항을 감시
    msg() {
      console.log(this.msg)
    }
  },
  methods: {
    changeMessage() {
      this.msg = 'Good!'
    }
  }
}
</script>

🌲 Interpolations

보간법

🌳문자열 

데이터 바인딩의 가장 기본 형태는 {{ Mustache }} - 이중 중괄호 구문 기법을 사용한다.

🌲 Directives

v- 형식을 사용하는 특별한 속성

🌳v-on

<template>
  <button 
  	v-on:click="msg"> // @click="msg"
  </button>
</template>

🌳v-once

<template>
  <h1 
    v-once
    @click="add">
    {{ msg }}
  </h1>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world!'
    }
  },
  methods: {
    add() {
      this.msg += '!'
    }
  }
}
</script>

🌳원시 HTML

<template>
  <h1 v-html="msg"></h1>
</template>

<script>
export default {
  data() {
    return {
      msg: '<div style="color:red;">Hello world!</div>'
    }
  },
  methods: {
    add() {
      this.msg += '!'
    }
  }
}
</script>

🌳v-bind

<template>
  <h1 v-bind:class="msg">
    {{ msg }}
  </h1>
</template>

<script>
export default {
  data() {
    return {
      msg: 'active'
    }
  }
}
</script>

<style scoped>
  .active {
    color: blue;
  }
</style>

🌳동적전달인자

<template>
  <h1 :[attr]="msg">
    {{ msg }}
  </h1>
</template>

<script>
export default {
  data() {
    return {
      msg: 'active',
      attr: 'class'
    }
  }
}
</script>

🌳보간법 디렉티브

공식문서

How to import components outside root path in vue

원하는 컴포넌트를 최상위 컴포넌트에 연결하는 방법

Create a component

컴포넌트 만들기란 하나의 vue파일을 만드는 것 ( 예 Fruits.vue )

// Fruits.vue
<template>
  <section>
    <h1>Fruits</h1>
    <ul>
      <li 
      v-for="fruit in fruits"
      :key="fruit">
      {{ fruit }}
      </li>
    </ul>
  </section>
</template>

<script>
export default {
  data() {
    return {
      fruits: [
        'Apple', 'Banana', 'Cherry'
      ]
    }
  }
}
</script>

Import Component

components폴더 내에 있는 Fruits.vue파일을 연결한다.

<script>
  import Fruits from '~/components/Fruits'
</script>

<Script>

Components옵션을 객체데이터로 선언한다.

<script>
import Fruits from '~/components/Fruits.vue'
export default {
  components: {
    Fruits
  }
}
</script>

<Template>

Components의 이름을 빈 태그로 사용한다.

<template>
  <Fruits />
</template>