[Vue.js] 기초 - Boolean state로 팝업같은 UI생성 / v-if

Latest update : 2021.04.23 - 수정 완료

 

 

---

Vue.js

vue 3 버젼 기준

---

<Vue.js 설치>

• Node.js 설치 (nodejs.org/ko/download/)
• 작업할 폴더에서 npm install -g @vue/cli (or) yarn global add @vue/cli
• (vscode 기준) 에디터 확장 기능 설치 - Vetur / HTML CSS Support /  Vue 3 Snippets
• npm 에러 시 yarn 1.XX 설치 (npm install --global yarn)
• vue create 프로젝트명 -> Default (Vue 3 Preview).. 선택 후 엔터

 

npm install -g @vue/cli

(or)

yarn global add @vue/cli

(and)

// (vscode 기준) 에디터 확장기능 설치 - Vetur / HTML CSS Support /  Vue 3 Snippets
// npm 에러 시 yarn 1.XX 설치 (npm install --global yarn)

vue create 프로젝트명

(and)

Default (Vue 3 Preview).. 선택 후 엔터

설치 완료 후 App.vue에서 작업 진행합니다.

 

---

<Vue.js 문법>

v-if

모달(modal) UI

 

저처럼 디자인 먼저 수년 하다 개발을 접하시게 된 경우엔..

즉, 웹디자이너셨던 분들은 클릭했을 때 팝업 띄울 때라고 생각하시면 조금 접근하시기 쉬우실 것 같습니다.

기존의 팝업은 새로운 윈도를 작게 띄워주는 거였다면

 

 

modal 방식

 

기본 JS 방식

class를 추가하여 (. on 등 ) style 속성을 ( display:block; / display:none; )으로 바꿔주는 식

 

react.js 에서는

- state변경 1 - function형 - useState의 두 번째 인자로,

- state변경 2 -class형 - this.setState()

로 true / false (Boolean 값)를 통해 on off 기능을 구현해줍니다.

 

vue.js에서도

마찬가지로 Boolean 값을 통해 모달을 구현합니다.

 

 

 예시

<template>

  <div class="awesomeUI" v-if="showAwesomeUI == true">
    <p>Awesome UI</p>
    <button @click="showAwesomeUI = false">닫기</button>
  </div>
  
  <button @click="showAwesomeUI = true">열려라 UI</button>
  
</template>

<script>

export default {
  name: 'App',
  data(){
    return {
      // 데이터 보관
      showAwesomeUI : false,
      //awesomeUI를 보이게 하는건 true / 안보이게 하는건 false로 적용합시다
    }
  },
  components: {
  }
}

</script>

tip) v-for, v-if 등은 한 태그에 함께 쓰면 안 됩니다.v-if를 상위 태그로 보내세요.