v-for

Vue에서 for문을 쓰려면

v-for="작명 in (반복할 횟수)" :key="작명"

을 적으면 된다.

예를들어

<p v-for="item in 3" :key="item"> Hello </p>

이렇게 쓰면 Hello라는 p태그가 3번 반복이 된다.

또한, v-for을 사용해 array, objet같은 데이터들을 넣을 수도 있다.

<template>

<div class="menu">
  <a v-for="item in menus" :key="item">{{item}}</a>
</div>

</template>

<script>
export default {
  name: 'App',
  components: {
  },
  data() {
    return {
      products: ['역삼동', '마포구', ' 천호동'],
      menus: ['Home', 'Products', 'About']
    }
  },
}
</script>

그리고 v-for안에 변수는 2개까지 작명이 가능하다.

<div class="menu">
  <a v-for="(item,i) in 메뉴들" :key="i"> {{ item }}</a>
</div>

소괄호를 열면 변수를 2개까지 작성할 수 있는데, 첫번째 변수는 array안에 데이터가 담겨져 있고, 두번째 변수는 0, 1, 2 ...이런식으로 1씩 증가하는 정수가 된다.
반복 횟수를 알려주는 숫자라고 보면 된다.

그리고 보통 관습적으로 :key=""안에 집어 넣는다.

v-if

vue에서 if문을 쓰는법은 v-if="조건식"을 써주면 된다.

예를들어 웹페이지에서 상품을 누르면 상세페이지(모달창)을 보여줄건데 v-if를 써서 구현하면 이런식으로 코드를 짤 수 있다.

그전에 vue로 동적인 ui를 만드는 법을 알아보겠다.

Vue로 동적인 UI 만들기

1. 현재 HTML UI 의 상태를 데이터로 저장 ( UI상태가 true인지 false인지 )

data(){
  return {
    modal : true,
  }
}

**0또는 1이나, open, close 이런식으로 표현해도 상관없다.**

2. 그 상태에 따라 HMTL UI를 보여줄지 말지 Vue 문법으로 작성

<div class="black-bg" v-if="modal == true">
  <div class="white-bg">
    <h4>상세페이지</h4>
    <p>상세페이지 내용</p>
  </div>
</div>

false면 숨기고 true면 모달창을 보여주는거다. 그럴려면 v-if가 필요한데, HTML안에 v-if="조건식"을 적으면 조건이 참일 때만 HTML을 보여준다.

여기서 추가적으로 어떤 요소를 클릭 했을 때 modal이 true가 되고, 닫기 버튼을 누르면 modal이 false가 되게 하려면 아래처럼 코드를 짜면 된다.

<template>

<div class="black-bg" v-if="modal == true">
  <div class="white-bg">
    <h4>상세페이지</h4>
    <p>상세페이지내용임</p>
    <button @click="modal = false" class="modal = false">닫기</button>
  </div>
</div>

<div>
  <img src="./assets/room2.jpg">
  <h4 @click="modal = true">{{products[0]}}원룸</h4>
  <p>50만원</p>
</div>

</template>

@click=""

HTML에서 뭔가 일어나게 만들고 싶으면
<div> 저 안에 JS를 집어 넣는다.

하지만 Vue에서는 살짝 다르게 @click="" 이런식으로 넣어주면 된다.

예를들어 버튼을 누르면 숫자가 올라가는 기능을 만들고 싶으면

data보관함에 숫자: 0을 하나 넣고, 그 data를 HTML에 데이터바인딩으로 넣어준다. 그리고 버튼을 누르면 숫자 += 1을 해주면 완성이다. 밑에는 완성 코드이다.

<template>

  <span>신고수: {{신고수}}</span>
  <button @click="신고수 += 1">숫자 업

</template>

<script>
export default {
  name: 'App',
  components: {
  },
  data() {
      신고수: 0,
    }
  },
}
</script>

@click 말고 다른 이벤트 핸들러도 만들 수 있다.

@mouseover라는 헨들러를 쓰면 마우스를 댔을 때 실행되고, @input를 쓰면 인풋에 값을 입력 했을 때 실행된다.

함수 넣는법

만약 실행할 코드가 길다면, 당연하겠지만 함수를 넣어주면 된다. 함수를 보관하는 곳도 있는데
data를 보관하는 곳 밑에 methods라는 항목을 만들면 된다. 함수를 만드는 법은 함수이름(){}이게 끝이다.

여기서 중요한건 data 보관함에서 data를 가져다 쓰고 싶으면 this.데이터이름이라고 써줘야된다.

<template>

<div>
  <h4>{{products[0]}}</h4>
  <p>50만원</p>
  <span>{{신고수}}</span>
  <button @click="plus()">숫자 업</button>
</div>

</template>

<script>
export default {
  name: 'App',
  components: {
  },
  data() {
    return {
      신고수: 0,
    }
  },
  methods: {
    plus() {
      this.신고수 += 1
    }
  }
}
</script>