[vue] 이벤트 핸들러와 이미지 넣기

이벤트 핸들러 사용 시에는 전통 방식으로는 onclick()=>{}
의 형태이지만 뷰에서는 v-on:click 또는 @click 으로 작성한다.(@는 뷰 문법 설치해주어야한다)

button 통해서 많은 이벤트핸들러가 있다!

 <button @click="신고수+=1 ">허위매물신고</button> <span>신고수 : {{신고수}} </span>
 <button @click="increase">숫자가 올라갑니다</button> <span>신고수 : {{신고수}} </span>

위와 같은 형태로 사용할 수 있다.

vue에서 함수 만들기

vue에서 함수만들고싶으면 스크립트 내 데이터 아래에 method:{ 함수(){} } 만들면 된다.
그리고 함수 안에서 데이터를 쓸 때에는 this.데이터명으로 사용해야한다.

<script>
export default {
  name: 'App',
  data() {
    return {
      신고수 : 0,
      메뉴들 : ['home','shop','about'],
      products : ['역삼동원룸','천호동원룸','마포구 원룸']
    }
  },
  
 ** methods :{
    increase(){
      this.신고수+=1;
      //vue는 **함수 안에서 데이터 쓸 때** 반드시 **this.데이터명**으로 작성해줘야한다.
    }**,
    함수2(){
    ~~~~~~
	}
  },
  components: {
  }
}
</script>

이미지 넣기

src에 있는 것 가져올 때 경로는 ./ 부터
src폴더 내에 assets 폴더에 이미지를 넣어야한다.
(ex. img src="./assets/이미지명.확장자" /> )

뷰에서의 개발팁은 데이터를 어떻게 만들건지 먼저 생각하는 것이 중요하다!!