Dust

<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} 

로 입력해서 전달

https://v2.ko.vuejs.org/v2/guide/installation.html

npm install vue

node는 이미 깔려있어서

냅다 뷰를 깔긴 했는데..

막상 뷰 버전을 확인하려고 하니까 안돼서.. cli을 설치했따

cli -> command line interface의 약자로 터미널에 명령어를 입력할 수 있게 해줌

예를 들어 뷰 버전을 확인하고 싶을 때 

vue -v 이런식으로

원하는 경로로 설정 후 프로젝트를 생성해준다

냅다 받았기때문에 제일 최신 버전일것.. Vue 3을 선택해줌

설치가 다 되면 이런 화면이 뜬다

npm run serve로 뷰 실행!

혹시 포트번호를 변경하고 싶으면 프로젝트를 열고 package.json 파일에서 설정해주면 된다

(만든 프로젝트 파일을 열고 package.json 파일 내 script -> serve 를 보면 옵션을 설정할 수 있음, 포트 번호를 변경해줌)

난 4200 포트로 설정ㅎ

짠 방금 뷰로 만든 프로젝트를 실행했다!