[Vue.js] Vue 이벤트, 모달 만들기

버튼을 클릭시에 기능을 실행하는 경우를 글로 써볼려고 한다.

js와 vue의 비교

<div>
  <h4>{{products[0]}}</h4>
  <p>50만원</p>
  <button @click="신고수++">허위매물신고</button>
  <span>신고수 : {신고수}</span>
</div>

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

이벤트 종류

• @click : 마우스로 클릭했을 때 이벤트가 실행된다.
• @mouseover : 마우스를 갖다 댔을 때 자바스크립트를 실행가능하다.
• @input : 인풋에 값을 입력했을 때 자바스크립트를 실행가능하다.

→ 이것말고도 여러 가지가 가능하다. 이는 실행하고자 하기 전에 검색해서 사용하면 좋을듯하다.

함수 사용

methods : { 
  increase(){ 
    this.신고수 += 1 
  } 
}

반응형

이는 script구문에서 methods를 만들어서 사용한다. 함수만들 때에는 함수이름(){}로 작성한다. 그리고 이건 데이터를 가져다 쓸 때는 this.데이터이름 이라고 사용해야 한다.

<div>
  <h4>{{products[0]}}</h4>
  <p>50만원</p>
  <button @click="increase()">허위매물신고</button>
  <span>신고수 : {신고수}</span>
</div>

그리고 templates에 @click="increase”로 작성해야 함수로 적용된다. 그리고 간혹가다가 함수를 한글로 작성할 경우 적용이 안되는 경우 있으니 유의하자.

모달만들기

이미지 넣기

<img src="./경로">

경로를 지정해서 태그에 알려주면 된다. 그런데 기본적으로 assets파일에 이미지를 넣어 관리한다. 그러므로 assets파일에 넣어 이미지를 꺼내주자.

모달창 만들기

body {
  margin : 0;
}
div {
  box-sizing: border-box;
}
.black-bg {
  width: 100%; height:100%;
  background: rgba(0,0,0,0.5);
  position: fixed; padding: 20px;
}
.white-bg {
  width: 100%; background: white;
  border-radius: 8px;
  padding: 20px;
}

모달의 css를 만들고 이를 모달 데이터를 만들어 true로 만들어준다.

data(){
  return {
    모달창열렸니 : true,
  }
}

그래야 열리면 true로, 닫혔을 경우 false하여 쉽게 관리가 가능하다.