[Vue.js] 기본 문법 ( 데이터바인딩, 반복문, 조건문, Event Handler, 동적 UI, Import/Export )

💡 데이터 바인딩

<script>

export default {
  name: 'App',
  data() {
    return {
      price1: 60,
      price2: 40,
      products: ['역삼동 원룸', '천호동 원룸', '마포구 원룸'],
      style1 : 'color:red'
    }
  },
  components: {
  }
}
</script>

 

위와 같이 script 태그 안에 data() 중괄호 안에 return 중괄호 안에 변수명과 값을 넣어준다.

  <div>
    <h4 :style="style1">{{ products[0] }}</h4>
    <p>{{ price1 }} 만원</p>
  </div>

 

• 그럼 위에 태그에서 {{ }} 를 이용해서 데이터를 넣어줄 수 있다.
• 앞에 : 를 붙여서 style, id 역시 데이터 바인딩으로 넣을 수 있다.

---

💡 반복문

  <div class="menu">
    <a v-for="작명 in 3" :key="작명">Home</a>
  </div>

 

v-for 을 이용하면 되는데 html 태그 뒤에 위와 같은 방법으로 넣어줄 수 있다.

key 를 넣지 않으면 에러가 발생한다.

(반복문을 돌면서 변화하는 변수)

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

 

만약 3 자리에 array 나 object 를 넣으면 그 개수만큼 반복한다.

---

💡 Event Handler

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

 

버튼을 클릭했을 때 @이벤트를 넣어준다.

export default {
  name: 'App',
  data() {
    return {
      count: 0,
      menus: ['Home', 'Shop', 'About'],
      products: ['역삼동 원룸', '천호동 원룸', '마포구 원룸'],
      style1 : 'color:gray'
    }
  },
  methods : {
    increase() {
      this.count++;
    }
  },

  components: {
  }
}

 

함수를 만드는 공간은 data() 아래에 methods: 를 만들어서 여기에 함수를 만들어준다.

# 이 때 count 변수를 인식 못하기 때문에 this. 를 사용해준다.

 

vue 에서는 함수를 호출할 때 이름만 호출해주면 된다.

---

💡 조건문 ( v-if )

  <div v-if="1==1">
    ㅎㅇ
  </div>
  <div v-else-if="1==3">
    ㅎㅇ2
  </div>
  <div v-else>
    ㅎㅇ3
  </div>

 

v-if="조건식"

을 사용해서 조건이 만족할 때만 해당 태그가 보이도록 할 수 있다.

마찬가지로  else if, else 도 사용 가능하다.

---

💡 동적 UI 만들기 ( Modal )

1. UI 디자인 해놓기

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

 

2. UI 의 현재 상태를 데이터로 만들어 둠

export default {
  name: 'App',
  data() {
    return {
      modal_status: false,
      imgs: ['/room0.jpg', '/room1.jpg', '/room2.jpg'],
      count: [0, 0, 0],
      menus: ['Home', 'Shop', 'About'],
      products: ['역삼동 원룸', '천호동 원룸', '마포구 원룸'],
      style1 : 'color:gray'
    }
  },
  methods : {
    increase(num) {
      this.count[num]++;
    }
  },

  components: {
  }
}

 

위에 보면 modal_status:false 로 먼저 상태를 데이터로 만들어뒀다.

 

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

  <div class="black-bg" v-if="modal_status==true">

 

UI 가 true 일 때만 보이도록 설정했다.

---

💡 Import, Export 로 파일 분리

위와 같이 파일분리를 하고 해당 파일에서 변수나 함수, 데이터를 가져올 때

 

보내는 쪽 파일에서 export default 또는 export { } 를 사용해 보내고

 

받는 쪽에서는 보낸 쪽 스타일에 맞춰서 같은 형태로 받아온다.