[Vue.js] 빠르게 배우기

<template>
  <div>
    <div class="flex">
      <div v-for="item in menus">{{ item }}</div>
    </div>
    <!-- index 사용하려면 괄호로 -->
    <ul>
      <li v-for="(item, index) in products">
        <h4 :style="red">{{ index }} 번</h4>
        <!-- <div @click="modal = true">{{ item.title }}</div> -->
        <div @click="onPopup(item)">{{ item.title }}</div>
        
        <img :src="item.image" alt=""/>
        <button @click="item.count++"> ❤️ {{ item.count }}</button>
      </li>
    </ul>

    <ul>
      <li v-for="(item, index) in products2">
        <h4 :style="red">{{ index }} 번</h4>
        <div @click="onPopup(item)">{{ item.title }}</div>
        <img src="../src\assets\itemImg\img_01.png" alt=""/>
        <button @click="item.count++"> ❤️ {{ item.count }}</button>
      </li>
    </ul>
  </div>

  <div class="modal-bg" v-if="modal" @click="modal = false">
    <div class="modal">
      <p class="title">팝업창입니다 </p>
      <p class="content">팝업의내용입니다</p>
    </div>
  </div>
</template>

 

Vue의 if문

v-if

v-else

v-else-if

 

Vue의 for문

v-for

 

Vue html에서 속성 값 불러오기(속성 앞에 :을 붙여줌)

 

기존

style="display: blodk; color: red;"

Vue

:style="display: block; color: red;" 

 

이미지도 같음

img src="/assets/img/~~"

 

:img src="/assets/img/~~"

속성 값이 동적이라면

:img src="item.image"

 

<script>
import testData from './assets/data/data';


export default {
  name: 'App',
  data(){
    // state 값
    return {
      modal: false,
      products: testData,
      menus: ['HOME', 'ABOUT', 'CART'],
      red: 'color: red',
      count: 0,
    }
  },
  // 함수 만드는 곳
  methods: {
    onPopup(){
      this.modal = true;
    },
  },
  components: {
    // HelloWorld
  }
}
</script>

 

import한 date.js

var data = [
    {
        id: 0,
        title: '역삼',
        image: require("@/assets/itemImg/img_01.png"),
        content: '',
        count: 0,
        price: 3000
    },
    {
        id: 1,
        title: '마포',
        image: require("@/assets/itemImg/img_02.png"),
        content: '',
        count: 0,
        price: 4000
    },
    {
        id: 2,
        title: '망원',
        image: require("@/assets/itemImg/img_03.png"),
        content: '',
        count: 0,
        price: 5000
    },
]

export default data;

이미지 값 절대경로 설정

- 경로를 require로 감싸준다

- assets 앞에 @를 붙여준다(html에서도 같음 =>  img src="@~~~"

 

* 파일명만 가지고 있을 때 html에서 적용할 경우

img src="require('@/assets/itemImg/${image}')

 

 

var data =

대신 export default 를 앞에 적어줘도 됨(데이터가 하나일경우)

여러개일경우

 

ex)

export {data1, data2} 

로 입력해서 전달