첫번째 프로젝트

1.  프로젝트 생성(프로젝트명은 소문자로만 해라)

vue create vue-commerce

 

2. App.vue 파일의 내용을 아래와 같이 바꾼다.

<template>

  <h1>Hello world</h1>

  <hr/>

  <h2>{{ title }}</h2>

  <ul>

    <li v-for="product in products" :key="product.id">

      <a href='#' @click="linkClicked(product.title)"> {{product.title}} : {{ product.price }} </a>

    </li>

  </ul>

  <button @click="buttonClicked">상품추가</button>

</template>

<script>

export default {

  name: 'App',

  methods: {

    buttonClicked() {

      console.log('button clicked...');

    },

    linkClicked(prod) {

      console.log(`${prod} 이 선택되었습니다.`);

    }

  },

  data() {

    return {

      title: '상품목록',

      products: [

        {

          id: 1,

          title: '아이폰',

          price: 35000,

        },

        {

          id: 2,

          title: '갤럭시',

          price: 45000,

        },

        {

          id: 3,

          title: '아이패드',

          price: 55000,

        },

        {

          id: 4,

          title: '맥북프로 M2',

          price: 85000,

        },

      ],

    }

  },

  components: {

   

  }

}

</script>

<style>

</style>