Vue-Project 생성

※ 작업폴더 생성 c:\나만의경로\workspace_vue
※ 주의 : Visual Studio Code에서 코딩시 들여쓰기 규칙이 맞지 않으면 에러 발생

1. 맛보기 Vue 프로젝트 생성 - 명령프롬프트에서 실행

1) project01 프로젝트 생성 (기본옵션으로만 구성)

  c:\나만의경로\workspace_vue>vue create project01

  방향키로 선택
  ? Please pick a preset: (Use arrow keys)
    Default ([Vue 3] babel, eslint)         <-------선택
    Default ([Vue 2] babel, eslint)
    Manually select features

2) project01 프로젝트 구조

 ┌─node_modules                  프로젝트에서 쓰는 모든 라이브러리 관리
 ├─public
 │  ├─favicon.icon
 │  └─index.html                 페이지 하나로 서비스가 구동되며, 자바스크립트가 페이지를 동적으로 구성한다
 ├─src
 │  ├─assets                         
 │  ├─components                         
 │  ├─App.vue                    메인 페이지. HTML로 컴파일해서 index.html 변환 동작된다             
 │  └─main.js                    npm run serve실행 후 최초로 실행되는 파일. App.vue의 코드를 index.html로 실행시켜주는 역할 
 ├─babel.config.js
 ├─jsconfig.json
 ├─package.json                  project01 프로젝트의 모든 정보(라이브러리 버전, 프로젝트 설정기록등)
 ├─package-lock.json
 ├─README.md
 └─vue.config.js

3) project01 프로젝트 실행

 c:\나만의경로\workspace_vue\project01>npm run serve

 App running at:
 - Local:    http://localhost:8080/
 - Network:  http://고정IP:8080/

4) project01 프로젝트 중지 : Ctrl + C

유의사항 : 주석에서 오류나는 경우 script 항목에 추가한다

/* eslint-disable */

---

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <p>
    <img alt="Vue logo" width="300" src="./assets/pepe2.png">
  </p>
  <!-- 데이터 바인딩 1.-->
  <div>
    {{ title }}
  </div>
  <div>
    <h4 style="color:blue">서초원룸</h4>
    <p>{{ price1 }}만원</p>
  </div>

  <div>
    <h4 :style="style1">역삼원룸</h4>
    <p>{{ price2 }}만원</p>

  </div>

  <hr>

  <!-- 데이터 바인딩 2.(배열) -->
  <div>
    <h4>{{ products[0] }}</h4>
    <p>10만원</p>
  </div>

  <div>
    <h4>{{ products[1] }}</h4>
    <p>20만원</p>
  </div>

  <div>
    <h4>{{ products[2] }}</h4>
    <p>30만원</p>
  </div>

  <!-- 3.반복문 -->
  <div class="menu">
    <a>home</a>
    <a>products</a>
    <a>About</a>
  </div>

  <hr>
  <div class="menu">
    <a v-for="m in 3" :key="m">home{{ m }}</a>
  </div>
  <hr>



  <hr>
  <div class="menu">
    <a v-for="menu in menus" :key="menu">home{{ menu }}</a>
  </div>
  <hr>


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

  <!-- products를 반복문으로 해보기 -->
  <div v-for="(p, i) in products" :key="i">
    <h4>{{ p }}</h4>
    <p> 10만원 </p>
  </div>
  <hr>

  <!-- 5 이벤트 핸들러 -->
  <div>
    <h4>{{ products[0] }}</h4>
    <p> 10만원
      <!-- <button v-on:click="함수명">허위매물신고</button> -->
      <button @click="report++">허위매물신고</button>
      <span>신고수:{{ report }}</span>
    </p>

  </div>
  <div>
    <h4>{{ products[1] }}</h4>
    <p> 10만원
      <!-- <button v-on:click="함수명">허위매물신고</button> -->
      <button @mouseover="report++">허위매물신고</button>
      <span>신고수:{{ report }}</span>
    </p>

  </div>
<hr>
  <!-- 6 이벤트와 함수 -->
  <div>
    <h4>{{ products[2] }}</h4>
    <p> 40만원
      <button @click="increase">허위매물신고</button>
      <span>신고수:{{ report }}</span>
    </p>

  </div>
  <hr>

  <!-- 7 허위매물신고 각각 동작하기  -->
  <div>
    <h4>{{ products[0] }}</h4>
    <p> 40만원
      <button @click="reportCount[0]++">허위매물신고</button>
      <span>신고수:{{ reportCount[0] }}</span>
    </p>
  </div>


  <div>
    <h4>{{ products[1] }}</h4>
    <p> 40만원
      <button @click="reportCount[1]++">허위매물신고</button>
      <span>신고수:{{ reportCount[1] }}</span>
    </p>
  </div>


  <div>
    <h4>{{ products[2] }}</h4>
    <p> 40만원
      <button @click="reportCount[2]++">허위매물신고</button>
      <span>신고수:{{ reportCount[2] }}</span>
    </p>
  </div>

  <!-- 모달창 만들기 조건문 -->
  <div>
    <h4 @click="modalOpen=true">{{ products[0] }}</h4>
    <p>30만원</p>
  </div>

  <div class="black-bg" v-if="modalOpen==true">
    <div class="white-bg">
      <h4>상세페이지</h4>
      <p>상세페이지 내용</p>
      <button @click="modalOpen=false">닫기</button>
    </div>
  </div>
<hr>

<div>
{{ a }}
<br>
  
{{ b }}

</div>

</template>

<script>

// import 변수명  from 파일경로
//변수를 사용하지 않으면 에러 발생
import {apple,apple2} from './assets/oneroom.js'

// document.getElementById('title').innerText='투룸';
// 기존 javascript, jquery  데이터 바인딩
// $/("#아이디명").text(??)

export default {
  name: 'App',
  components: {

  },
  data() {
    //데이터 보관(변수)
    return {
      title: '원룸샵',
      price1: 60,
      price2: 40,
      style1: 'color : red',
      products: ['신사동 원룸', '논현동 원룸', '강남 원룸'],
      menus: ['HOME', 'SHOP', 'ABOUT'],
      report: 0,
      reportCount: [0, 0, 0],
      modalOpen : false,
      a : apple,
      b : apple2
    }
  },
  methods: {
    increase() {
      this.report += 1;
      //data()에 선언된 변수는 this.변수 접근한다
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.menu {
  background: deepskyblue;
  padding: 15px;
  border-radius: 5px;
}

.menu a {
  color: aliceblue;
  padding: 10px;
}

.black-bg {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 5);
  padding: 20px;
}

.white-bg {
  width: 100%;
  background: white;
  border-radius: 8px;
  padding: 20px;
}</style>

1.데이터 바인딩

2.데이터 바인딩 -배열 사용

3.반복문 사용

4.products를 반복문

5.이벤트 핸들러- 이벤트 발생시 숫자 증가

6.이벤트와 함수

7.허위매물신고 각각 동작하기

8.모달창 만들기 조건문

클릭시

닫기 클릭

9.import

js-변수 선언

var apple=10;
var apple2=100;

// 외부 변수 선언
export{apple,apple2}