기업과제 3번쩨 .. 필수조건은 Vue.js를 사용하라!!
혹시 Vue 사용해보신분~?
팀원들 : ...
음.. Vue 학습부터 하고 오시죠!!
이렇게 뷰를 입문하게 됬다.
배우면서 리액트와 비교를 하게 될거 같다.

입문한 느낌

몇가지 살펴보지 않았지만 리액트보다 뭔가 쉽다!
오늘 배운정도로 과제를 하는데는 문제가 없을 꺼란 생각이드는건 잘못인걸까..?
데이터 바인딩, 태그반복, 이벤트, 상태에 따른 태그 on/off!!
뭔가 엄청 빠르고 쉽게 배우는 느낌이다.

Vue 프로젝트 생성

CDN을 이용해서 Vue를 사용할수 있고 cli에 명령어를 입력해서 프로젝트를 만들어 사용할 수 있다.

cli를 통해 프로젝트를 만들어서 배워보기로했다.
먼저 vue/cli를 설치해야한다.
그리고 vue procject를 생성한다.

$ npm install -g @vue/cli
$ vue creat [projectName]
//vue3로 선택!

Component 구성

크게 아래의 3영역으로 나눠볼수 있다.
물론 vue 문법을 쓰기때문에 각문법들은 기존문법들과 차이가 있다.

<template>
[HTML 영역]
</template>

<script>
[Javascript 영역]
</script>

<style>
[CSS 영역]
</style>

기초 문법

데이터 바인딩

react

const Componetn () =>{
 const name = 'react'
 const url = 'https://codingapple1.github.io/vue/room1.jpg'
 return (
  <div>
   <img src ={url} alt=""/> 
     {name}
  </div> 
)}

//{} 내에서 js를 사용할 수 있다. tag 변수나 tag inner 영역에 모두 사용할 수 잇다.

vue

<template>
<div>
   <img :src ="url" alt=""/>  // tag의 속성에 데이터 바인딩으 위해선 속성앞에 ':'붙이고 사용할 수 있다.
     {{name}}  // 이중 중괄호내에 아래의 data 값을 사용할 수 있다.
  </div> 
</template>

<script>
export default { //객체 내부에
  name: 'Component',
  data() {
    return { // data 함수의 return 객체에 키-값 형태로 변수를 지정
      name: 'react',
      url: 'https://codingapple1.github.io/vue/room1.jpg'
    };
  },
  methods: {}, // 함수를 지정해놓는곳
  components: {}, // 컴포넌트를 지정해 놓는곳
};
</script>

// 위에서 methods에 함수를 넣는다고했지만, data 함수 내에 넣어도 정상적으로 동작했다.
// 명시적인부분인지 확인해봐야겠다.

v-for

동일한 형태의 tag를 나열할때 react에서는 map을 이용하고, vue에서는 tag에 v-for 속성을 이용한다.

<template>
<div>
  <div v-for="(fruit, idx) in fruits" :key="idx">{{fruit}}</div> 
  // 배열을 줄줄이나열할때 react에서 map을 사용하는 것과 유사하다.
  </div> 
</template>

<script>
export default {
  name: 'Component',
  data() {
    return { 
      fruits: ['apple', 'banana', 'mango'], // 배열이 있을때
    }
  },
};
</script>

-----

<tag v-for="변수 in 횟수" >{{변수}}</tag> // 지정한 횟수만큼 변수를 나열
<tag v-for="인자 in 배열" >{{인자}}</tag> // 배열의 인자를 순수대로 나열
// react에서와 마찬가지로 반복해서 태그를 생성하면 각태그는 key 값을 지정해 주어야한다.  
// "인자 in 배열"형태에서 인자는 (인자, 인덱스)형태도 가능하다. 인데스를 key로 쓸 수 있다.

v-on:click, @click

태그에 이벤트는 어떻게 지정하는가
v-on:click과 같은 형태로 사용가능하다. (예: v-on:mouseover)
v-on: ==> @로 대체가능
v-on:click ➔ @click 가능

<template>
 <button @click="" >더하기</button>
 
</tempate>
<script>
export default {
  name: 'Component',
  data() {
    return { 
     count:0,
    }
  },
};
</script>

v-if

v-if는 해당 속성의 boolean 값에 따라 tag가 보이거나 안보이게 할 수 있다.
react에서 삼항연산자나, && 쓰는것보다 편한거 같다.

<tag v-if="value" > on/off </tag>