필기 내용

Vue API 공식 문서

• 필요한 API를 직접 찾아보는 습관을 길러보자. 여러가지 갖다 써보면서 익히는게 좋을 것 같다.

https://v3.router.vuejs.org/kr/api/#router-link

라우팅하는 방법

• views에 vue 파일 생성 후 vbase를 치면 자동 생성됨.

<!-- Vue VSCode Snippets 익스텐션을 설치해야 자동완성이 가능하다.-->
<template>
  <div>
    <div style="background-color: yellow">My Test View</div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped></style>

• 이후에 routes의 index.js 파일에서 routes 배열에 해당 컴포넌트를 추가해준다.

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView // 위에서 import를 했을 때
  },
  {
    path: '/about', // 라우팅 경로
    name: 'about', // name 값
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue') // import하지 않았을 때 여기서 불러옴 (이걸 더 많이 씀)
  }
]

• app.vue에서 라우팅을 받아오는데, route-link로 받아오고 route-view에서 출력해준다.

!) router-link와 a태그의 차이
: a태그는 전체 새로고침을 하지만, router-link는 부분 새로고침을 해주어 불필요하게 파일을 다시 받아오는 일을 줄인다. (Single Page Application)

<template>
  <div id="app">
    <h1>Hello My Vuejs</h1>
    <nav>
      <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> |
      <router-link to="/myTest">MyTest</router-link>
    </nav>
    <router-view />
  </div>
</template>

Vue의 라이프 사이클

v-model을 이용한 실시간 데이터 바인딩

vue의 라이프 사이클에 따라서 화면이 실시간으로 반응하는 것처럼 mounted가 된다.
다음은 input에 따라서 입력값이 바뀌는 코드이다.

template>
  <div>
    <h1>binding test</h1>
    <div>
      <input v-model="message" />
    </div>
    <div style="background-color: yellow">{{ message }}</div> <!--전달받은 message를 뿌려준다. -->
  </div>
</template>

<script>
export default {
  data() { <!-- data binding -->
    return {
      message: ''
    }
  }
}
</script>

<style lang="scss" scoped></style>

메소드와 이벤트 바인딩

이벤트는 @click과 같이 사용하며, onClick과 유사하다.
매개변수가 없는 함수는 소괄호 없이 사용하도록 한다.
(@click === v-on: click == onClick)
이벤트 정의(바인딩)는 변수처럼 script에 만들어준다.

<template>
  <div>
    <h3>1. 클릭/ 더블클릭 이벤트</h3>
    <p>내 나이는 {{ age }}</p>
    <button @click="addAge(oneYear)">나이 먹기</button>
    <button @click="minusAge(oneYear)">어려지기</button>
    <button @dblclick="addAge(10 * oneYear)">나이 10살 먹기</button>
    <button @dblclick="minusAge(10 * oneYear)">나이 10살 어려지기</button>
    <button @dblclick.once="addAge(10 * oneYear)">나이 1살 먹기 한번만</button>
    <hr />
    <input v-model="message" @keyup.enter="printMessage" />
    <p>{{ inputMessage }}</p>
    <div style="width: 200px; height: 200px; border: 1px solid orange" @mousemove="mouseTrack">
      <h3>X좌표: {{ mouseX }}, Y좌표: {{ mouseY }}</h3>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: 20,
      oneYear: 1,
      message: null,
      mouseX: 0,
      mouseY: 0,
      inputMessage: null
    }
  },
  methods: {
    addAge(year) {
      this.age += year
    },
    minusAge(year) {
      if (this.age > 0) {
        this.age -= year
      }
    },
    printMessage() {
      this.inputMessage = this.message
    },
    mouseTrack(e) {
      this.mouseX = e.offsetX
      this.mouseY = e.offsetY
    }
  }
}
</script>

<style lang="scss" scoped></style>

computed와 method

computed는 렌더링 시에 매번 실행되며, method는 호출할 때만 실행된다.

computed는 변동된 값이 실시간으로 적용된다.
ex. return this.age + this.a -> a값이 증가하면 같이 증가됨.

<template>
  <div>
    <button @click="a++">a증가</button>
    <button @click="b++">b증가</button>
    <p>A : {{ a }}</p>
    <p>B : {{ b }}</p>
    <p>A+AGE : {{ addToA }}</p>
    <p>B+AGE : {{ addToB }}</p> <!-- 변수처럼 값 불러오기 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: 0,
      b: 0,
      age: 20
    }
  },
  computed: {
    addToA() {
      return this.age + this.a
    },
    addToB() {
      return this.age + this.b
    }
  }
}
</script>

<style lang="scss" scoped></style>

v-show와 v-if를 이용한 조건문

value가 true인지 false인지에 따라 출력을 해준다.

v-if는 해당 노드 자체가 실제로 나타나거나 사라지는 반면
v-show는 해당 노드의 style속성에서 display:none값으로 제어 한다.

<template>
  <div>
    <h1>v-if, v-show Test</h1>
    <button @click="error = !error">Toogle error</button>
    <button @click="success = !success">Toggle success</button>
    <p>현재 error 상태는?</p>
    <p v-if="error" class="errBox">에러입니다.</p>
    <p v-else>에러 상태가 아닙니다.</p>
    <p>현재 success 상태는?</p>
    <p v-show="success" class="sucBox">성공입니다.</p>
    <p v-show="!success">성공 상태가 아닙니다.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      error: false,
      success: false
    }
  }
}
</script>

<style lang="scss" scoped></style>

v-for문

v-for문의 사용법은 이렇다.

<tag v-for="(element, index) in array" :key="`element-${index}`">{{element}}</tag>

:key는 각각의 요소들에게 key를 부여하는 것인데, for문의 element는 JSON 형태로 출력되기 때문에 각각에 key를 부여한다.

단순히 index로 입력해버리면 다른 반복문에서의 key값 역시 모두 index 순서대로 들어가기 때문에 값이 중복된다.

따라서 {"element-0" : "orange"}와 같은 형식으로 값을 부여해준다.

<template>
  <div>
    <h1>fruit : {{ fruits }}</h1>
    <div style="margin-left: 40%; margin-right: 40%">
      <ul>
        <li v-for="(fruit, index) in fruits" :key="`fruit-${index}`">{{ fruit }}</li>
      </ul>
    </div>
    <div>
      <div v-for="(user, index) in users" :key="index">{{ user.name }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fruits: ['apple', 'orange', 'banana', 'mango'],
      users: [
        { name: '홍길동', age: 20, gender: 'male' },
        { name: '김길동', age: 23, gender: 'male' },
        { name: '고길순', age: 25, gender: 'female' }
      ]
    }
  }
}
</script>

<style lang="scss" scoped></style>

추가내용

• rest-API에 대해서 kebab case(dash case)를 사용해야 한다는 설명
  (https://www.rocketpunch.com/cards/post/436146)

• ctrl + / : html, vue의 주석 단축키