vue-extends

Dec 19, 2019 in vue, vue 기본문법

component 확장해서 사용하기

extends는 기존 컴포넌트를 확장해서 유사한 컴포넌트를 만들수 있는 방법입니다.

/* Hello.vue */
<template>
    <div>
        {{ message }}
    </div>
</template>

<script>
export default {
    data() {
        return {
            message: "Hello extends 사용하기"
        }
    },
    created() {
        console.log('Hello created 호출');
    }
}
</script>

/* HelloWorld.vue */
<script>
import Hello from './Hello.vue';

export default {
  name: 'HelloWorld',
  extends: Hello,
  data() {
    return {
        message: "HelloWorld extends 사용하기"
    }
  },
  created() {
    console.log('HelloWorld created 호출');
  }
}
</script>

extends를 사용할 경우 data, computed, methods, filters는 오버라이딩이 된다. 하지만 라이프사이클은 모두 순서대로 호출이 된다.

Comment and share

DOM 요소에 직접 접근

Dec 19, 2019 in vue, vue 기본문법

vue를 사용하게 되면 DOM요소에 대한 관리를 vue가 해주기 때문에 직접 접근할 일이 드물지만, 특별한 케이스에 한해서 DOM 요소에 접근을 해야할 경우가 생길수 있습니다.

1. DOM 요소에 접근

<template>
    <div>
        <span ref="message"></span>
    </div>
</template>

<script>
export default {
    created() {
        this.$refs.message.innerHTML = "ref 테스트"
    }
}
</script>

this.$refs.ref이름 으로 DOM요소에 접근 가능

2. 자식 컴포넌트의 메서드 호출

<template>
    <div>
        <childComponent ref="child"/>
    </div>
</template>

<script>

/* parentComponent */
import childComponent from './childComponent'

export default {
    components: {
        childComponent
    },
    created() {
        this.$refs.child.displayConsole()
    }
}

/* childComponent */
export default {
    methods: {
        displayConsole() {
            console.log('ref 테스트')
        }
    }
}
</script>

Comment and share

watch의 사용

Dec 19, 2019 in vue, vue 기본문법

watch는 데이터에 대한 변화를 감지할 때 주로 사용하게 됩니다.

데이터가 Array나 Object인 경우

대상이 array나 Object인 경우에 문제가 발생합니다. object의 프로퍼티나 array의 자식 값의 변화에는 감지를 하지 못합니다. 그래서 set를 이용하여 중첩된 관계에 대한 반응성을 추가 할수 있습니다.

Comment and share

computed의 사용

Dec 19, 2019 in vue, vue 기본문법

computed를 사용하면서 느낀 점

computed는 기본 데이터를 가공 처리 작업 후에 데이터 바인딩을 해주어야 하는 경우에 주로 사용하는 거 같습니다. 기본 데이터가 변경 되면 computed가 실행이 되어서 처리 로직을 실행 한 후에 결과를 변경후 렌더링합니다. 기존 데이터가 변경이 되는 걸 감지한다는 점에 있어서 watch와 비슷한 기능을 하는 것 처럼 보이지만 실제로는 watch를 사용하는 것보다는 computed를 사용하는게 더 적절한 경우가 많다고 생각합니다.

computed VS watch

watch는 해당 데이터의 변화를 감지하면 메소드가 실행이 됩니다. computed도 내루 로직에서 사용 하는 데이터가 변경이 되면 감지하여 메소드가 실행이 됩니다. 이를 보면 두개의 속성이 비슷하게 사용되는 것 처럼 느낄수 있습니다. 둘 모두를 사용했을 때 같은 결과를 얻어 낼수 있다면 computed를 사용하는 것이 좋다고 생각합니다. watch를 사용 할 때는 주로 사용자의 입력등 비동기인 경우에 사용하는 것이 좋다고 생각합니다.

computed VS methods

computed와 methods의 가장 큰 차이는 캐싱입니다. 두 속성 모두 사용자가 원하는 결과를 낼수 있지만 computed 같은 경우에는 종속 된 대상(실행부에서 사용한 인스턴스 데이터 등)의 값이 변화할 때만 다시 실행을 하게 됩니다. 그렇게 때문에 computed를 사용해도 되는 경우에는 methods 보다는 computed를 사용합시다.

팁

computed는 필수적으로 return 받은 값으로 데이터 바인딩 합니다.

computed 속성의 메서드에서 await를 썼더니 원하지 않는 결과 도출(당연하게도 await를 메서드에 설정하면 해당 메서드는 Promise를 return하기 때문)

GET | SET

computed의 프로퍼티는 직접 수정으로 인한 값이 수정 되지 않는다

export default {
    data() {
        return {
            num1: 10,
            num2: 20
        }
    },
    computed: {
        sum() {
            return num1 + num2
        }
    },
    methods: {
        updateSum() {
            this.sum = 100; // 이렇게 직접 값을 주어도 변경 되지 않는다 => 이런식의 코딩은 노노
        }
    }
}

sum 앞에 아무런 키워드를 입력하지 않으면 get이 생략된 것으로써 값을 가져오는 기능을 한다
sum 앞에 set 키워드를 넣어서 해당 sum을 동작하게 하는 데이터를 변경하는 식으로 코드 작성

export default {
    data() {
        return {
            num1: 10,
            num2: 20
        }
    },
    computed: {
        get sum() {
            return num1 + num2
        },
        set sum() {
            this.num = 10   // sum을 직접 수정하는게 computed 메서드를 동작하게 하는 데이터를 변경하는 식으로 작성
        }
    }
}

Comment and share

컴포넌트 간 데이터 전송(9)

Dec 19, 2019 in vue, vue 기본문법

상위 - 하위 컴포넌트간의 데이터전달

각 컴포넌트는 고유한 유효범위를 가지고 있기 때문에 다른 컴포넌트의 값을 직접 참조할수가 없습니다. 그래서 컴포넌트간의 데이터를 전달 하는 방법을 알아야 합니다.

1. 상위 컴포넌트에서 하위 컴포넌트로 값 전달

이 방법은 상위 컴포넌트에서 하위 컴포넌트로 v-bind 디렉티브를 이용해서 값을 전달 할수 있습니다.

상위 컴포넌트

상위 컴포넌트에서는 하위 컴포넌트에 v-bind 디렉티브를 이용해서 속성에 값을 전달합니다.

<child-componenet v-bind:msg="message"></child-componenet>

<script>
export default {
    data() {
        return {
            message: '안녕하세요'
        }
    }
}
</script>

하위 컴포넌트

하위 컴포넌트에서는 상위 컴포넌트에서 속성의 값을 props 속성을 이용하여 전달 받을 수 있습니다.

<script>
export default {
    props: {
        msg: String     // 속성명 : 전달 받을 타입으로 작성
    }
}
</script>

2. 하위 컴포넌트에서 상위 컴포넌트로 값 전달

하위 컴포넌트에서 상위 컴포넌트로 값을 전달하기 위해서는 이벤트를 활용합니다. 이벤트를 발생시키는 $emit, $on을 이용하여 값을 전달 합니다.

하위 컴포넌트

하위 컴포넌트는 상위컴포넌트로 값을 전달 할 상황이 생기면 $emit을 이용하여 이벤트를 발생시키면서 데이터를 전달 합니다.

<button @click="onClick">클릭</button>

<script>
export default {
    data() {
        return {
            msg : '안녕하세요.'
        }
    },

    methods: {
        onClick() {
            this.$emit('@click', this.msg);
        }
    }
}
</script>

상위 컴포넌트

하위 템플릿에 추가한 이벤트에서는 상위 컴포넌트의 메서드를 호출 할수 있기 때문에 하위 컴포넌트에서 $emit과 함께 전달한 데이터를 상위 컴포넌트로 전달 할수 있습니다.

<child-component @@click="onSubmit"></child-component>

<script>
export default {
    methods: {
        onSubmit(msg) {
            console.log(msg);
        }
    }
}
</script>

단점 : 트리구조가 복잡하게 얽혀있는 구조인 경우에 하나의 데이터를 변경하려고 해도 연관된 상하위컴포넌트 전체를 변경해야 하기 때문에 유지 보수의 어려움

3. 이벤트 버스

상위-하위 컴포넌트 간의 데이터 통신은 상-하위 관계가 복잡하게 이루어져 있을 경우에 연관된 props와 이벤트 발생가 많이 생성이 되어서 하나를 수정해야 한다면 관련된 모든 props와 이벤트를 수정하여야 하기 때문에 유지보수의 어려움이 있습니다. 그래서 이벤트 버스를 활용하면 직접 관계가 없는 컴포넌트끼리 데이터를 전송할수 있습니다.

이벤트 버스 또한 $emit와 $on을 활용 합니다.

1) 이벤트 버스 생성

Vue의 프로토 타입으로 $EventBus(이름은 상관 없음) 뷰 인스턴스를 생성합니다(이때 아무런 옵션을 설정하지 않습니다). 이렇게 생성하면 컴포넌트 내부에서 this.$EventBus로 접근이 가능합니다.

1
2
3

import Vue from 'vue'

Vue.prototype.$EventBus = new Vue();

2) 데이터를 전달 하려는 컴포넌트

<button @click="onClick">클릭</button>

<script>
export default {
    methods: {
        onClick() {
            this.$EventBus.$emit('@click', '안녕하세요');
        }
    }    
}
</script>

3) 데이터를 전달 받는 컴포넌트

<script>
export default {
    created() {
        this.$EventBus.$on('@click', (msg) => {
            console.log(msg);
        });
    }
}
</script>

4) 이벤트 해제

<script>
export default {
    methods: {
        created() {
            this.$EventBus.$on('@click', () => {
                console.log('생성')
            });
        }, 
        destroyed() {
            this.$EventBus.$off('@click')
        }
    }
} 
</script>

장점

서로 연관이 없는 컴포넌트끼리 직접적으로 쉽게 데이터를 전송하고 받을수 있다.

단점

이벤트 버스를 너무 남용하게 되면 데이터의 흐름을 파악하기 힘들다(이벤트를 emit 했는데 누가 받고 있는지 실제 소스 코드를 확인하기 전까지는 확인이 어렵다).

대안

데이터 중앙집중식 방식을 채용하고 있는 vuex를 사용한다.

사용처

spinner(페이지 전환시에 로딩 처리)는 이벤트 버스가 좋다고 한다. 이벤트 버스는 훅에 선언하는 것이 좋다.

주의

이벤트 버스를 등록 하는 경우 필히 beforeDestory(destroyed)에 $off를 해주어야 한다. 하지 않으면 무한 증식한다.

Comment and share

CLI3를 통한 프로젝트 생성(8)

Dec 19, 2019 in vue, vue 기본문법

1. vue-cli 설치

1	npm install -g vue-cli

2. vue-cli3 설치(최신 버전으로 설치)

1	npm i -g @vue/cli

3. vue-cli3를 통한 프로젝트 생성

1	vue create 프로젝트명

4. 프로젝트 서버 시작

1	npm run serve

5. eslint 끄기

package.json와 동일한 depth에 vue.config.js 만들기

아래 코드 넣기

1
2
3

module.exports = {
    lintOnSave: false
}

6. cli 2.x vs cli 3.x

명령어
- 2.x : vue init 프로젝트이름 파일위치
- 3.x : vue create 프로젝트이름
웹팩 설정파일
- 2.x : 노출되어 있다 => 웹팩 설정 가능
- 3.x : 노출되어 있지 않다 => 웹팩 설정을 위한 다른 방법을 학습하여야 함
프로젝트 구성
- 2.x : 깃헙의 템플릿을 다운로드 후 사용하게 됨
- 3.x : 플러그인 기반으로 기능 추가
ES6 이해도
- 2.x : 필요없다
- 3.x : 필요하다

Comment and share

뷰 싱글파일 컴포넌트 체계(7)

Dec 19, 2019 in vue, vue 기본문법

Vue.component를 사용하는 전역 컴포넌트로는 구조 파악이나 스타일 적용등에 있어서 어려움이 많아서 복잡한 뷰 프로젝트에서 사용하기가 힘듭니다. 그래서 .vue 파일로 프로젝트를 구성하는 방식인 싱글파일컴포넌트를 사용합니다. 1개의 .vue파일은 1개의 컴포넌트가 됩니다.

구조

<template>
    
</template>

<script>
export defualt {
    data() {
        return {

        }
    },

    methods: {

    },

    created() {

    }
}
<script>

<style>

</style>

template 영역은 HTML 요소가 들어가는 부분입니다. script 영역은 컴포넌트에 대한 속성이 들어가는 부분입니다. style은 HTML 요소에 대한 스타일을 적용 할수 있습니다.

Comment and share

CLI를 통한 프로젝트 생성(6)

Dec 19, 2019 in vue, vue 기본문법

CLI는 .vue파일을 웹브라우저가 인식할수 있는 형태의 파일로 변환해주는 웹팩이나 브라우저리파이 같은 도구들이 적용된 초기 프로젝트 구조를 쉽게 구성하게 해주는 역할을 합니다.

설치 방법

1	npm install vue-cli -global

사용방법

고급 웹팩 기능을 활용한 구성입니다.

1	vue init webpack

웹팩의 최소 기능만을 구성합니다.

1	vue init webpack-simple

고급 브라우저리파이 기능을 활용합니다.

1	vue init browserify

브라우저리아피의 최소기능만을 구성합니다.

1	vue init browserify-simple

최소 뷰 기능만이 들어간 HTML 파일 1개를 생성합니다.

1	vue init simple

웹팩 기반의 프로그래시브 웹앱기능을 지원합니다.

1	vue init pwa

기타

고급기능들은 테스팅, 문법 검사등도 지원합니다.
CLI를 통해 설치 후에 npm install을 통해 뷰 애플리케이션 구동을 위한 라이브러리를 다운 받아야 합니다.
웹팩은 자체 서버(노드 서버)를 제공해 주기 때문에 npm run dev를 통해서 실행 가능합니다.

Comment and share

뷰 디렉티브(5)

Dec 18, 2019 in vue, vue 기본문법

1. v-if

v-if는 조건부로 렌더링을 할때 사용을 합니다. 조건부가 참이면 렌더링을 거짓이면 렌더링을 하지 않습니다. 조건을 만족하지 않으면 렌더링 자체를 하지 않기때문에 돔에 추가 되지 않습니다.

1	<div v-if="type === 'A'">v-if를 사용해보겠습니다.</div>

v-else도 사용 가능합니다.

1 2	<div v-if="type === 'A'">참이면 실행하세요.</div> <div v-else>거짓이면 실행하세요.</div>

v-else-if도 사용가능합니다.

1 2	<div v-if="type === 'A'">type이 A이면 실행하세요.</div> <div v-else-if="type === 'B'">type이 B이면 실행하세요.</div>

조건에 따라서 화면에 보이거나 숨겨야 하는 경우 v-if를 사용하면 좋습니다. 하지만 토글기능을 사용해야 할 경우에는 렌더링을 다시 해주어야 하기 때문에 v-if 보다는 v-show가 좋을수있습니다. template 태그에서도 사용가능합니다.(template 태그 그 자체는 사용해도 화면에 렌더링 되지 않고 내부 자식 태그들만 렌더링 해줍니다.)

2. v-show

v-show는 v-if랑 비슷한 역할을 합니다. v-if랑 다른 건 렌더링은 모두 하지만 숨기고 보이는 건 css의 display none 속성을 사용합니다. v-if와 마찬가지로 조건을 만족하면 화면에 보이고 만족하지 않으면 보이지 않습니다.

1	<div v-show="true">v-if를 사용해보겠습니다.</div>

잦은 보이거나 숨기는 기능을 사용하게 된다면 v-show를 사용하면 좋습니다(렌더링을 다시 하는 것보단 css로 none또는 block하는게 더 효율적). v-show는 초기 렌더링 비용이 높기 때문에 유의 해야 합니다.

3. v-for

v-for는 지정한 뷰 데이터의 개수만큼 해당 HTML 태그를 반복해서 출력 합니다. 대상은 Array뿐아니라 Object도 가능합니다.

1
2
3

<ul>
    <li v-for="item in list">{{item}}</li>
</ul>

for문에 대한 index도 사용 가능합니다.

1
2
3

<ul>
    <li v-for="(item, index) in list">{{index + ' : ' + item}}</li>
</ul>

정리

하나의 태그에 두개 이상의 다중 for문은 작성이 불가능합니다.
v-if랑 함께 사용은 가능 하나 공식가이드에서는 권고하지 않습니다.
for문을 사용할때는 :key 속성을 부여하는게 좋습니다(값은 유일값으로).
컴포넌트에도 v-for를 사용 가능합니다.
2.2 버전 이상부터는 :key 속성을 사용하여야 합니다(유일 값).
template 태그에서도 사용 가능합니다.
리스트뿐 아니라 객체도 사용가능 => Collection에서 사용가능

4. v-bind

v-bind는 HTML 속성 값에 데이터를 바인딩하거나 하위 컴포넌트의 props 속성에 값을 바인딩 할때 사용합니다. 사용방법은 v-bind:속성명="데이터" 또는 축약으로 :속성명="데이터"으로도 사용가능합니다.

1 2	<div v-bind:id="type"></div> <!-- 데이터 type의 값이 바인딩 됩니다. --> <div v-bind:id="'type'"></div> <!-- type이라는 문자열으로 설정합니다. -->

class 속성에 객체를 전달할 수도 있습니다. 객체를 활용하면 여러개의 class를 쉽게 바인딩 할수 있습니다. 객체의 값이 true면 해당 객체의 key명이 class로 지정됩니다.

1 2	<div v-bind:class="{active: true}"></div> <div v-bind:class="{active: true, on: true}"></div>

5. v-model

v-model은 form에서 주로 사용되는 속성입니다. 폼에 입력한 값을 뷰의 데이터와 바인딩하는 역할을 합니다. 다른 디렉티브와는 다르게 양방향으로 바인딩 되기 때문에 input에 값을 입력하면 뷰의 데이터도 변경이
됩니다. v-model에서 사용하는 태그는 input, select, textarea 등이 있습니다.

1	<input type="text" v-model="value">

여러 체크박스를 하나의 배열로 바인딩 할수 있습니다. 체크를 하게 되면 배열에 하나씩 추가 됩니다.

1
2
3

<input type="checkbox" value="김씨" v-model="checkboxNames">
<input type="checkbox" value="이씨" v-model="checkboxNames">
<input type="checkbox" value="박씨" v-model="checkboxNames">

.number 수식어를 사용하면 자동으로 숫자로 형변환은 해줍니다.

1	<input type="text" v-model.number="num">

.trim 수식어를 사용하면 자동으로 trim을 해줍니다.

1	<input type="text" v-model.trim="value">

6. v-on

v-on은 이벤트를 감지하는 기능입니다. 사용하는 방법은 v-on:이벤트명="실행부"이고 축약은 @이벤트명="실행부" 입니다. 이벤트가 발생해서 메서드를 호출하면 파라미터로 아무것도 넘기지 않았다면 event가 넘어옵니다.

1	<button v-on:click="onClick">클릭</button> <!-- onClick은 메서드로써 괄호()는 넣지 않아도 됨 -->

이벤트를 실행시킬때 파라미터를 넘겨줄수 있습니다.

1	<button v-on:click="onClick('type')"></button> <!-- 해당 버튼을 눌렀을 때 onClick 메서드를 호출하면서 type이라는 문자열을 파라미터로 전달 -->

사용자 파라미터를 넘겨주면서 이벤트 객체도 넘겨 줄때는 $event를 사용합니다.

1	<button v-on:click="onClick('type', $event)"></button>

.stop 수식어를 통해서 버블링을 막을수 있습니다.

1	<button v-on:click.stop="onClick">버튼</button>

.prevent 수식어를 통해서 event.preventDefault() 역할을 대신 할수있습니다.

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

.once 수식어는 최대 한번만 실행 가능하도록 설정합니다.

1	<form v-on:submit.once="onSubmit"></form>

키에 대한 수식어를 사용 가능합니다. 종류에는 .enter, .tab, .delete(Delete와 Backspace 모두), .esc, .up, .down, .left, .right가 존재하며 config.keyCodes를 통해서 사용자 정의 키 수식어를 만들수도 있습니다.

1	<input type="text" v-on:keyup.enter="onSubmit">

수식어는 체이닝이 됩니다.
이벤트는 기본이벤트 뿐 아니라 사용자 정의 이벤트도 사용가능합니다.

Comment and share

뷰 옵션(4)

Dec 18, 2019 in vue, vue 기본문법

1. 인스턴스 생성시에 옵션

1) template

해당 하는 타겟에 HTML 요소를 삽입해줍니다.

사용방법

루트 태그는 오직 하나만 존재하여야 합니다. 하위 태그는 상관 없습니다.

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="app"></div>
    
<script src="https://unpkg.com/vue"></script>
<script>
    var app = new Vue({
        el: '#app',
        template: '<div><p>안녕하세요</p><button>클릭</button></div>'
    });
</script>
</body>
</html>

2) data

뷰 인스턴스의 데이터 값을 설정할때 사용합니다.

사용방법

데이터 바인딩 할때 사용이 가능합니다.
template 영역에도 {{}}를 사용해서 데이터 바인딩이 가능합니다.
데이터 타입은 number, string, object, array등 모두 가능합니다.
뷰 인스턴스의 메서드 속성에서 this.data키 로 접근 가능합니다.

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="app"></div>
    
<script src="https://unpkg.com/vue"></script>
<script>
    var app = new Vue({
        el: '#app',
        template: '<div><p>{{message}}</p><button>{{obj.button}}</button></div>',
        data: {
            message : '안녕하세요',
            obj : {
                button: '클릭'
            }
        }
    });
</script>
</body>
</html>

3) methods

말그대로 메서드를 정의 할수있는 속성입니다. 맨 뒤에 s를 잊지 맙시다.

사용방법

1
2

뷰 인스턴스의 각 메서드 내부에서 this.메서드이름으로 호출 가능합니다
{{}} 내부에서도 메서드를 호출 가능합니다. 이땐 this를 생략하고 메서드이름으로 호출 할수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="app"></div>
    
<script src="https://unpkg.com/vue"></script>
<script>
    var app = new Vue({
        el: '#app',
        template: '<div><p>{{message + "" + add()}}</p></div>',
        data: {
            message: '10 곱하기 10은 ',
            num: 10
        },
        methods: {
            add() {
                return this.num * this.num
            }
        }
    });
</script>
</body>
</html>

4) computed

복잡한 계산을 처리 한 후에 데이터를 출력해야 하는 경우에 사용할수 있습니다. 메서드를 호출할때랑 다르게 ()를 사용하지 않습니다.

사용용도

데이터를 처리하는 로직을 실행한 후에 화면에 출력 해야 하는 경우 methods 대신에 computed를 사용하도록 합시다.
computed 내부에서 사용한 값의 변화가 발생 할때 재연산해서 결과를 다시 렌더링 해줍니다.

장점

동일한 연산은 반복해서 처리하지 않고 미리 저장해 놓은 값을 불러옵니다.
여러번 호출 되어도 캐싱에 의해서 한번만 처리하기 때문에 속도 상승
methods는 호출 할때마다 실행되기 때문에 computed를 사용할수 있는 경우에는 computed를 사용합시다.

주의 사항

computed 그 자체의 값은 data 처럼 변경이 불가능 하다
computed의 set 메서드를 활용하여 우회해서 값을 변경하는 것이 가능한데 이것 또한 직접 computed의 값을 변경하는게 아닌 computed와 연계되는 대상의 값을 변경하는 방식

data() {
    num1 : 10,
    num2 : 20
},
computed: {
    get sum() {
        return this.num1 + this.num2;
    },
    set sum() {
        this.num2 = 30;
    }
}

메소드는 호출 한 횟수만큼 실행되는 것을 알수있다.

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="app"></div>
    
<script src="https://unpkg.com/vue"></script>
<script>
    var app = new Vue({
        el: '#app',
        template: '<div><p>{{sum()}}</p><p>{{sum()}}</p></div>',
        data: {
            num1: 10,
            num2: 20
        },
        methods: {
            sum() {
                console.log("sum을 실행합니다.");

                return this.num1 + this.num2;
            }
        }
    });
</script>
</body>
</html>

computed는 캐시 기능으로 값의 변화가 없으면 한번만 실행된다.

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="app"></div>
    
<script src="https://unpkg.com/vue"></script>
<script>
    var app = new Vue({
        el: '#app',
        template: '<div><p>{{sum}}</p><p>{{sum}}</p></div>',
        data: {
            num1: 10,
            num2: 20
        },
        computed: {
            sum() {
                console.log("sum을 실행합니다.");

                return this.num1 + this.num2;
            }
        }
    });
</script>
</body>
</html>

5) watch

computed와 유사한 기능을 제공하지만 데이터 호출과 같이 시간이 상대적으로 더 많이 소모되는 비동기 처리에 적합합니다. 값이 변경이 되면 포착하여 해당 메서를 호출해 줍니다.

사용방법

data 속성의 값을 메서드의 이름으로 작성하면 해당 data의 값이 변경이 되면 해당 메서드가 호출됩니다.

사용용도

사용자의 input 값 변경에 따른 로직을 처리할때 사용합니다.
DB등과 같은 비동기 처리 후에 해당 값이 변경 되었을 때 로직을 처리할때 사용합니다.

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="app"></div>
    
<script src="https://unpkg.com/vue"></script>
<script>
    var app = new Vue({
        el: '#app',
        template: '<div><p>{{num2}}</p><button>{{setNum()}}</button></div>',
        data: {
            num1: 10,
            num2: 20
        },
        methods: {
            setNum() {
                this.num1 = 30;

                return this.num1;
            }
        },
        watch: {
            num1() {
                this.num2 = 40;
            }
        }
    });
</script>
</body>
</html>

Comment and share

component 확장해서 사용하기

1. DOM 요소에 접근

2. 자식 컴포넌트의 메서드 호출

데이터가 Array나 Object인 경우

computed를 사용하면서 느낀 점

computed VS watch

computed VS methods

팁

computed는 필수적으로 return 받은 값으로 데이터 바인딩 합니다.

GET | SET

상위 - 하위 컴포넌트간의 데이터전달

1. 상위 컴포넌트에서 하위 컴포넌트로 값 전달

상위 컴포넌트

하위 컴포넌트

2. 하위 컴포넌트에서 상위 컴포넌트로 값 전달

하위 컴포넌트

상위 컴포넌트

3. 이벤트 버스

1) 이벤트 버스 생성

2) 데이터를 전달 하려는 컴포넌트

3) 데이터를 전달 받는 컴포넌트

4) 이벤트 해제

장점

단점

대안

사용처

주의

1. vue-cli 설치

2. vue-cli3 설치(최신 버전으로 설치)

3. vue-cli3를 통한 프로젝트 생성

4. 프로젝트 서버 시작

5. eslint 끄기

6. cli 2.x vs cli 3.x

구조

설치 방법

사용방법

기타

1. v-if

2. v-show

3. v-for

정리

4. v-bind

5. v-model

6. v-on

1. 인스턴스 생성시에 옵션

1) template

사용방법

2) data

사용방법

3) methods

사용방법

4) computed

사용용도

장점

주의 사항

5) watch

사용방법

사용용도

Moon Star