Vue.js 정리 (코딩애플 Vue 유튜브 무료강의)

vue 프로젝트 생성하기 전

node.js를 설치하면 npm을 사용할 수 있는데, npm은 각종 웹개발 라이브러리 설치 도우미로 @vue/cli 설치가 가능하다.

 

프로젝트 생성

vue create 프로젝트명

 

 

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</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;
}
</style>

<template> 안에는 HTML
<script> 안에는 JS
<style> 안에는 CSS

npm run serve

  : 실시간 미리보기와 같은 기능

 

 

{{데이터 바인딩}}하는 이유
1. HTML은 하드코딩 해두면 변경이 어렵다.
2. Vue의 실시간 자동 렌더링 기능을 이용 가능하다.
+ HTML 속성도 데이터 바인딩이 가능하다. (: 속성="데이터이름)

2강 숙제

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <div>
    원룸가게
    <h4>{{products[0]}}</h4>
    <p>{{ price1 }} 만원</p>
  </div>
  <div>
    <h4>{{products[1]}}</h4>
    <p>{{ price2 }} 만원</p>
  </div>
  <div>
    <h4>{{products[2]}}</h4>
    <p>{{ price3 }} 만원</p>
  </div>
</template>

<script>


export default {
  name: 'App',
  data(){
    return{
      price1 : 60, 
      price2 : 70,
      price3 : 80,
      products : ['역삼동원룸','천호동원룸','마포구원룸'],
    }
  },
  components: {
    
  }
}
</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;
}
</style>

 

 

---

Vue의 HTML 반복문

<태그 v-for= " 작명 in 횟수" : key="작명> </a>

1. 작명 특징
- 변수 작명 2개까지 가능
   - 왼쪽 변수는 array내의 데이터, 오른쪽 변수는 1씩 증가하는 정수

<태그 v-for= " (a, i) in 횟수" : key="i"> {{ a }} </a>

2. key" "의 용도
- 반복문 돌린 컴퓨터가 구분하기 위해 씀

 

3강 숙제 <상품 목록 반복문으로 축약하>

<template>


<div class = "menu">
  <a v-for="i in 메뉴들" :key="i">{{ i }}</a>
</div>

  <div>
    원룸가게
  </div>
  <div v-for="(a,i) in products" :key="i">
    <h4>{{products[1]}}</h4>
    <p>{{ price[i] }} 만원</p>
  </div>
  
</template>

<script>


export default {
  name: 'App',
  data(){
    return{
      price : ['90', '80', '70'],
      products : ['역삼동원룸','천호동원룸','마포구원룸'],
      메뉴들: ['Home', 'Shop', 'About'],
    }
  },
  components: {
    
  }
}
</script>

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

}


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

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


</style>

 

---

Vue에서 함수 작성법

methode:{
	함수명(){
    }
}

※ 함수 안에서 데이터 쓸 땐 this.데이터

 

4강 숙제  <신고버튼 3개와 신고 수 증가 기능 만들>

<template>


<div class = "menu">
  <a v-for="i in 메뉴들" :key="i">{{ i }}</a>
</div>

  <div>
    원룸가게
    <h4>{{products[0]}}</h4>
    <p>{{ price1 }} 만원</p>
    <button @click="신고수[0]++">허위매물 신고</button> <span>신고수 : {{신고수[0]}}</span>
  </div>
  <div>
    <h4>{{products[1]}}</h4>
    <p>{{ price2 }} 만원</p>
    <button @click="신고수[1]++">허위매물 신고</button> <span>신고수 : {{신고수[1]}}</span>
  </div>
  <div>
    <h4>{{products[2]}}</h4>
    <p>{{ price3 }} 만원</p>
    <button @click="신고수[2]++">허위매물 신고</button> <span>신고수 : {{신고수[2]}}</span>
  </div>
</template>

<script>


export default {
  name: 'App',
  data(){
    return{
      price1 : 60, 
      price2 : 70,
      price3 : 80,
      products : ['역삼동원룸','천호동원룸','마포구원룸'],
      메뉴들: ['Home', 'Shop', 'About'],
      신고수: [0,0,0],
    }
  },
  methods : {
    increase(){
      this.신고수++;
    }
  },
  components: {
    
  }
}
</script>

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

}


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

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


</style>

 

 

 

---

5강 숙제 <모달창 닫기버튼과 기능>

 

<template>

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


<div class = "menu">
  <a v-for="i in 메뉴들" :key="i">{{ i }}</a>
</div>

  <div>
    <img src="./assets/room0.jpg" class="room-img">
    <h4 @click="모달창 = true">{{products[0]}}</h4>
    <p>{{ price1 }} 만원</p>
    <button @click="신고수[0]++">허위매물 신고</button> <span>신고수 : {{신고수[0]}}</span>
  </div>
  <div>
    <img src="./assets/room1.jpg" class="room-img">
    <h4 @click="모달창 = true">{{products[1]}}</h4>
    <p>{{ price2 }} 만원</p>
    <button @click="신고수[1]++">허위매물 신고</button> <span>신고수 : {{신고수[1]}}</span>
  </div>
  <div>
    <img src="./assets/room2.jpg" class="room-img">
    <h4 @click="모달창 = true">{{products[2]}}</h4>
    <p>{{ price3 }} 만원</p>
    <button @click="신고수[2]++">허위매물 신고</button> <span>신고수 : {{신고수[2]}}</span>
  </div>
</template>

<script>


export default {
  name: 'App',
  data(){
    return{
      price1 : 60, 
      price2 : 70,
      price3 : 80,
      products : ['역삼동원룸','천호동원룸','마포구원룸'],
      메뉴들: ['Home', 'Shop', 'About'],
      신고수: [0,0,0],
      모달창 :false,
    }
  },
  methods : {
    increase(){
      this.신고수++;
    }
  },
  components: {
    
  }
}
</script>

<style>

body{
  margin : 0
}
div {
  box-sizing: border-box;
}
.black-bg{
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  position: fixed; padding: 20px;
}
.white-bg{
  width: 100%;
  background: white;
  border-radius: 8px;
  padding: 20px;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;

}
.room-img{
  width: 100%;
  margin-top: 40px;
}
.menu{
  background: darkslateblue;
  padding: 15px;
  border-radius: 5px;
}

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


</style>

 

---

6강 import/export 

export default 변수명
import 변수명 from '파일의 경로'

여러가지 파일을 내보내고 싶을 때
export{변수1, 변수2}
improt{변수1, 변수2} from 경로

<template>


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


<div class = "menu">
  <a v-for="i in 메뉴들" :key="i">{{ i }}</a>
</div>

  <div v-for="(item,index) in 원룸들" :key="index">
    <img :src="원룸들[index].image" class="room-img">
    <h4>{{원룸들[index].title}}</h4>
    <p>{{원룸들[index].price}}</p>
  </div>
</template>

<script>

import data from './assets/oneroom.js';

export default {
  name: 'App',
  data(){
    return{
      price1 : 60, 
      price2 : 70,
      price3 : 80,
      products : ['역삼동원룸','천호동원룸','마포구원룸'],
      메뉴들: ['Home', 'Shop', 'About'],
      신고수: [0,0,0],
      모달창 :false,
      원룸들 : data,
    }
  },
  methods : {
    increase(){
      this.신고수++;
    }
  },
  components: {
    
  }
}
</script>

<style>

body{
  margin : 0
}
div {
  box-sizing: border-box;
}
.black-bg{
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  position: fixed; padding: 20px;
}
.white-bg{
  width: 100%;
  background: white;
  border-radius: 8px;
  padding: 20px;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;

}
.room-img{
  width: 100%;
  margin-top: 40px;
}
.menu{
  background: darkslateblue;
  padding: 15px;
  border-radius: 5px;
}

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


</style>