Vue.js Lecture Note

# Event Bus, Life Cycle, ES6

# Component / Instance Option 순서

권고되는 순서

# 다른 Component로 값을 보내는 법

이벤트 명이 같으면 안 된다.

  1. event + props
  • 일반적으로는 다른 컴포넌트에 값을 보내줄 때, 상위 component에 값을 올린 후에 다시 하위 component로 내려줘야 한다.
  1. event bus
  • src 밑에 utils 폴더 -> bus.js 생성
export var bus = new Vue(); // export : 다른 곳에서 쓰기 위함

import { bus } from '../utils/bus';
  • this.$emit('...') : 밑에서 위로 올려보낼 때 사용 (이벤트 트리거)
removeAll: function() {
            localStorage.clear();
            this.$emit('remove-all'); // event bus -> 컴포넌트간 data 전달 가능
            bus.$emit('remove-all');
        }

beforeMount: function() {
        bus.$on('remove-all'); //이벤트를 받기 위함
}
  • 위 방식은 기본 최상위 컴포넌트인 root로 가는 것이 아니라 외부의 root라는 bus를 통해서 data를 전달하는 방식이다.
    • 복잡해질수록 나중에 tracking하기가 어렵다. (규칙에 의한 방식이 아니라, 일종의 편법이기 때문)
    • 따라서 위 방식을 팀 프로젝트 내에서 쓰려면 코딩 컨벤션을 따라야 한다.
    • 대개는 event로 올리고, props로 내리는 방법을 채택하고, 이 계층이 깊어지면 Vuex를 채택한다.
beforeDestroy: function() { // event를 제거할 때
        bus.$off('remove-all', this.removeItems)
}

$on으로 event를 생성한 이후에, event queue에 쌓이기 때문에, $off로 제거하는 것이 필요하다.

# Props 작성 방식

vue의 event bus를 사용할 때에 app에서 data를 내려 보내기 위해 props 사용

props: ['list'];

props: {
	list: Array;
}

# v-on 이벤트 작성 방식

<todo-footer v-on:clear="todoItems = []"></todo-footer>

이것도 가능하지만, 유지보수를 위해 아래와 같이 method로 작성해주는 것이 좋음

this.todoItems = [];
localStorage.clear();

Vue.js Event Bus에 대해 잘 정리된 글

추가적으로 리스트의 값이 바뀌고 나서 화면이 바로 바뀌는 것을 reactivity라고 말한다.

# 자바스크립트 for문 문법

for (var i = 0; i < arr.length; i++) {
	console.log(arr[i]);
}

arr.forEach(function(value, index) {
	console.log(value, indexedDB);
});

for (var key in arr) {
	console.log(key, arr[key]);
}
  1. Vue에서는 이렇게 쓴다.
<li v-for="(item, index) in list" :key="index"></li>

key는 unique한 값 (key는 id나 index값을 주로 사용함)

# Event, emit, payload

this.$emit('add:todo', value); // 동작: 대상

event info

payload : 인자

this.$emit('remove-each', item, index); // payload의 순서대로 들어감

payload order

# Vue 파일에서 style 적용

<template>
	<h1>Todo App</h1>
</template>

<style scoped>
	h1 {
		color: blue;
	}
</style>

style에 scoped 속성 추가하면 그 component의 file에만 적용되는 스타일이 된다.

# Mounted

template이 string에서 tag로 변경되는 시점이다.

export default {
  //vcrea
  created() { // document 생성 x
    var h1 = document.querySelector('h1');
    console.log('created', h1);
  },
  //vbm
  beforeMount() { // document 생성 x
    var h1 = document.querySelector('h1');
    console.log('before mount', h1);
  },
  //vm
  mounted() { // template가 실제 dom에 있지 않고 string 상태에서, mounted가 되어야 tag로 변환된다.
    var h1 = document.querySelector('h1');
    console.log('mounted', h1);
  },
};
</script>

lifecycle

created - beforeMount, Mounted 순서로 뜨는 것을 볼 수 있다.

# form tag

form 태그는 submit 되면 새로고침이 되는 특징이 있다. 이것을 막기 위해서,

event.preventDefault();

혹은

<form v-on:submit.prevent="submitForm"></form>

이런 처리들을 해줘야 한다.

이와 비슷한 event modifiers에는 prevent를 포함해 6가지 종류가 있다

# Babel

최신 JS 문법(ES6 이상)이 여러 브라우저에서 돌아갈 수 있게 해주는 것이 Babel이다.

Babeljs

babel

Babel을 쓰는 이유는 IE 때문임을 알 수 있다.

# 자바스크립트 최신문법 (ES6)

1. destructuring

var { name, id } = data;

2. 변수 선언

참고

let a = 2; // 한 번 선언한 것은 다시 선언 할 수 없다.

const c = 20; // const도 마찬가지

3. for문

ES6이전

JS는 ES6 이전에 var 선언으로 마지막 값에 접근이 가능한 문제가 있었지만,

ES6

let을 통해서 해당 문제를 해결하였음.

4. Async, Await

    init() {
      loginUser()
      .then(getTodo)
      .then(displayTodo)
      .catch()
    },
    getTodo() {
      return new Promise((resolve, reject) => {
        resolve();
      //return axios.get()
      })
    }

Promise chaining은 코드가 복잡해지기 때문에 async, await를 쓰는 것이 최근 권장된다.

async function 함수명() {
	await 비동기_처리_메서드_명();
}

일반적으로 await의 대상이 되는 비동기 처리 코드는 axios 등 프로미스를 반환하는 API 호출 함수.

    async loginUser(){
      const user = await getUser();
      const todo = await getTodo(user.id);
      this.todo = todo;
    }

기본적으로 js는 코드가 위에서 아래로 실행되는데, async, await를 사용하지 않으면 위의 코드가 완료되기 전에 뒤에 코드가 실행되지 않을 것이다.

async & await에서 예외처리 하는 방법은 try catch이다. 프로미스에서 .catch()를 사용했던 것처럼 async에서는 catch {}를 사용하면 된다.

# 화살표 함수

arr.forEach((value, index) => {
	console.log(value, index);
});

만약에 인자가 하나라면 괄호를 없애도 된다.

var sum = (a, b) => {
	return a + b;
};

var vm = this;
return axios.get('https://jsonplaceholder.typicode.com/posts/1').then(data => {
	this.post = data.post; // 화살표 함수를 쓰면 vm이 아닌 this를 사용해도 된다.
});

인스턴스 option 속성에는 화살표를 쓰면 안된다. 바로 위의 this 범위가 달라지기 때문.

fetchItems() {
	…
}

대신에 이런 식으로 작성이 가능하다.

# Enhanced Object Literal

향상된 객체 리터럴(표기법) : key와 value가 같아질 때 사용한다.

var obj = {
	num, // num: num,
};

vue의 component 정의에서도 예를 들어 TodoInput이 html에서는 todo-input으로 바뀌기 때문에 사용 가능하다. (대소문자 구별을 하지 않기 때문이다)

# import, export

  • 값이나 변수가 나가는 곳에서 export var a
  • 다른 파일에서 값을 받아오기 위할 때 사용
  • 받는 곳에서 import {값 or 함수} from '가져오는 위치'
  • export default
    • 해당 파일에서 무조건 하나만 들고 오겠다면 default를 붙인다.
    • 이때는 무조건 하나만 들고 오기 때문에, import sum from '...' 처럼 { } 없이 들고 올 수 있다.

← Render, Webpack, Vuex →