[Vue.js] 기초 2 (이벤트핸들러, 함수, v-if/v-else)

 

퇴근하고 강의 듣는 거.. 쉽지 않다 휴

 

 

vue 이벤트핸들러

이 전까지 만들었던 페이지에 버튼을 누르면 1씩 증가하는 기능을 추가하려고 한다.

자바스크립트는 onclick="" 이라는 이벤트 핸들러를 HTML태그에 달았지만 Vue에서는 v-on:click="" 이라고 사용한다.

이는 더 간단히 v-on: 을 @로 바꿔쓸 수 있어 결국 @click 만 쓰면 된다.

script에 count 변수를 추가해주고,

<button @click="count++">허위매물신고</button>
<span>신고수 : {count}</span>

 

이런식으로 적어주면 된다.

 

다른 여러 이벤트 핸들러도 있는데,

@mouseover 하면 클릭이 아니라 마우스만 댔을 때 자바스크립트를 실행가능하고

@input 하면 인풋에 값을 입력했을 때 자바스크립트를 실행가능하고 등등의 기능들이 있다.

그때그때 필요할 때마다 찾아서 사용하면 될듯!

 

 

 

vue에서 함수만들기

 

script 부분에 사용하고자 하는 함수를 methods : { 함수이름(){} }  이렇게 만들면 된다.

data(){
  return {
    count : 0,
  },
}

methods : { 
  increase(){ 
    this.count++
  } 
}

처음에 count 변수있는 곳에 methods 를 만들었다가 increase is not function 오류가 났다...

꼭 자리 기억을 잘 해주자.

그리고 함수를 만들었을 때 데이터를 가져다가 쓰고 싶으면 꼭 this.데이터명 이렇게 사용해야 한다.

 

아무튼 이렇게 만든 함수를 tamplate에다가 넣어준다.

<button @click="increase">허위매물신고</button>
<span>신고수 : {count}</span>

increase 이렇게 넣어도되고 increase() 이렇게 넣어도된다.

 

 

반복문돌린 각각의 항목에서 신고수 계산하기

 

<template>
  ...
  <div v-for="(a, i) in list" :key="i">
    <h4>{{ a.place }} 원룸</h4>
    <p>월 {{ a.price }}만원</p>
    <button @click="increase(i)">허위매물신고</button>
    <span>신고수 : {{ count[i] }}</span>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      count: [0, 0, 0],
      header_menu: ["Home", "Product", "My page"],
      list: [
        { place: "역삼동", price: "60" },
        { place: "천호동", price: "70" },
        { place: "마포구", price: "80" },
      ],
    };
  },
  methods: {
    increase(i) {
      this.count[i] += 1;
    },
  },
  components: {},
};
</script>

increase 함수에 파라미터를 담아 자바스크립트 함수 만드는 것과 같이 만들어서 increase(i) 로 생성해주면 끝!

count 변수도 배열에 담아 각각의 상태를 담는다.

 

 

 

---

 

 

이미지 넣기

imgName: ["room0.jpg", "room1.jpg", "room2.jpg"],

이미지 이름을 하나의 변수에 담았다.

<img :src="'/assets/' + imgName[i]" :alt="imgName[i]" width="300px" />

그리고 img에 넣어주었다.

public 폴더안에 있는 경로를 설정하려면 그냥 "/경로" 이렇게 입력하면되고,

src 폴더안에 있는 경로를 설정하려면 "./경로" 이렇게 입력하면 된다.

 

 

---

동적인 UI 만드는 법 (v-if)

 

0. 원하는 화면 만들어놓기 (너무 당연한..)

<div class="black-bg">
    <div class="white-bg">
      <h2>상세페이지 제목</h2>
      <p>상세페이지 내용</p>
    </div>
</div>

 

 

 

1. UI의 현재 상태를 데이터로 저장해둠

data() {
	return {
    	modal_open: false,
	},
    ...

 

 

2. 데이터에 따라 UI가 어떻게 보일지 작성

<div class="black-bg" v-if="modal_open"> //modal_open이 true일때 열림
    <div class="white-bg">
      <h2>상세페이지 제목</h2>
      <p>상세페이지 내용</p>
      <button @click="modal_open = false">닫기</button> // 닫기버튼을 누르면 false로 바꿈
    </div>
  </div>

  <div class="menu">
    <a v-for="(a, i) in header_menu" :key="i">{{ a }}</a>
  </div>
  <div v-for="(a, i) in list" :key="i" style="margin-top: 30px">
    <img :src="'/assets/' + imgName[i]" :alt="imgName[i]" width="300px" />
    <h4
      @click="modal_open = true"		// modal_open을 true로 변경
      @mouseover="mouseOver(i)"
      @mouseleave="mouseLeave(i)"
      :style="{ color: textColor[i], cursor: 'pointer' }"
    >
      {{ a.place }} 원룸
    </h4>

 

 

 

 

---

import / export 

import 는 script 안에서 한다는 것만 알아두면 리액트랑 똑같이 불러온다.

그리고 data 내에 불러온 데이터 변수를 지정해주고, 사용하면 된다.

<div v-for="(a, i) in onerooms" :key="i" style="margin-top: 50px">
    <h2>{{ onerooms[i].title }}</h2>
    <img :src="onerooms[i].image" alt="이미지" width="500px" />
    <h4
      @click="modal_open = true"
      @mouseover="mouseOver(i)"
      @mouseleave="mouseLeave(i)"
      :style="{ color: textColor[i], cursor: 'pointer' }"
    >
      {{ onerooms[i].content }}
    </h4>
    <p>월 {{ onerooms[i].price }}원</p>
</div>

 

 

 

---

v-else

 

v-if와 같이 써서,

if문의 조건이아니라면 ~이것을 보여주세요 할 때 사용한다.

예를 들어,

<template>
  <div>
    <div v-if="isLoggedIn">
      <!-- 사용자가 로그인한 경우 -->
      <p>안녕하세요! 환영합니다.</p>
    </div>
    <div v-else>
      <!-- 사용자가 로그인하지 않은 경우 -->
      <p>로그인이 필요합니다. 로그인해주세요.</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false,
    };
  },
  // 나머지 코드...
};
</script>

이렇게 사용할 수 있다.