Vue Computed vs Watch 차이점 정리

Vue에는 Computed, Watch, Mehtods 속성을 언제 사용하면 좋을지 정리입니다. 헷갈릴 수도 있지만, 언제 사용하면 좋을지 알아두시면 유용합니다. 1. Computed 오직 데이터 바인딩에서만 사용 데이터가 변경될때 실행 다른 데이터 값에 의존하는 데이터에 사용 Vue Computed란? 사용 해야 하는 이유 Vue에서 동적 값을 출력하는 핵심 기능인 computed 가 있습니다. computed를 이용하면 좀 더 간편하게 데이터를 출력시킬 수 있고, 성능을 향상할 수 있습니다. Computed는 언제 사용해야 하는가? {{ price + powerku.tistory.com 2. Watch 템플릿에 직접 사용 X 데이터 변경이 일어나고 부수적인 Side Effect 발생이 필요할때 사용(..

• format_list_bulleted Develop/Vue
• · 2023. 5. 12.
• textsms

Vue Watch 속성 사용 언제 사용하는 것이 좋을까?

Vue에서 감시자(Watch) 속성이 있습니다. Vue watch 란? watch 속성은 데이터를 감시하고 있고, 데이터가 변경이 될 때, 정의된 함수를 실행합니다. watch 사용방법 data의 정의한 message를 watch 속성 안에 넣고 함수를 작성합니다. message 데이터가 변경이 되면 정의한 함수가 실행됩니다. Composition API const message = ref('Hello, Vue!'); watch(message, function(newValue, oldValue) { console.log('message 변경됨:', newVal, oldVal); }); Options API new Vue({ data: { message: 'Hello, Vue!' }, watch: { me..

• format_list_bulleted Develop/Vue
• · 2023. 5. 10.
• textsms

Vue Computed란? 사용 해야 하는 이유

Vue에서 동적 값을 출력하는 핵심 기능인 computed 가 있습니다. computed를 이용하면 좀 더 간편하게 데이터를 출력시킬 수 있고, 성능을 향상할 수 있습니다. Computed는 언제 사용해야 하는가? {{ price + '원' }} 위와 같이 price 값 뒤에 원이라는 단위를 붙여야 된다면 template에서 넣어 줄 수 있습니다. 하지만 이렇게 하게 된다면, 문제점이 있습니다. 복잡한 연산의 경우 알아보기 어렵습니다. 매번 컴포넌트가 렌더링 될 때마다 실행됩니다. computed 기능을 사용하여 연산하게 되면 해당 연산이 따로 분리되기 때문에 유지보수에 좋고, 알아보기 쉽습니다. price라는 값의 의존성을 가지게 되며 price 값이 변경될 때만 연산을 진행합니다. price 값이 변..

• format_list_bulleted Develop/Vue
• · 2023. 5. 8.
• textsms

Vue 양방향 바인딩 v-model

Vue에서는 양방향 바인딩을 v-model를 이용하여 간단하고 쉽게 할 수 있는 방법이 있습니다. 양방향 바인딩이란? 입력요소의 이벤트를 수신하는 동시에 값을 보내는 방식입니다. 동시에 데이터 통신이 일어나기 때문에 양방향 바인딩이라고 합니다 v-model 이란? Vue의 v-bind 속성과 v-on 속성을 이용하여 양방향 바인딩을 할 수 있는 유용한 방법입니다. v-on 이벤트를 이용하여 데이터에 값을 넣는다. v-bind를 이용하여 속성에 데이터를 넣어준다. Vue.component("App", { data() { return { name: "" }; }, template: ` 이름: {{ name }} `, methods: { setInput(event) { this.name = event.targ..

• format_list_bulleted Develop/Vue
• · 2023. 5. 2.
• textsms

Vue 반복문 v-for 배열, 객체 렌더링

v-for 구문을 이용해서 반복문을 사용해서 배열이나 객체를 순서대로 렌더링 할 수 있습니다. 배열 v-for const App = { data() { return { array: ['superman', 'batman', 'pororo'] } }, } 배열의 경우 v-for문의 앞부분은 배열의 항목이고 뒷부분은 배열의 이름입니다. {{ hero }} 결과 superman batman pororo 객체 v-for const App = { data() { return { object: { 1: 'superman', 2: 'batman', 3: 'pororo' } } }, } 객체의 경우 첫번째 인자는 값이고 두번째 인자는 객체의 key 값입니다. 아래와 같이 사용할 수 있습니다. {{ key }} : {{v..

• format_list_bulleted Develop/Vue
• · 2023. 4. 28.
• textsms

Vue 조건문 v-if v-else v-else-if

Vue에서 조건에 따라서 렌더링 할 수 있습니다. v-if v-else v-else-if 구문을 이용하면 됩니다. 직접 사용하면서 확인해 보겠습니다. v-if v-if문은 조건에 따라서 엘리먼트를 렌더링 할 수 있습니다. const App = { data() { return { score: 100 } } } 위 와 같이 score를 100으로 지정하고 A학점입니다. score가 90점 이상이면 렌더링 됩니다. v-else v-else는 v-if문의 조건이 아닌 경우에 렌더링 할 엘리먼트에 적용하면 됩니다. const App = { data() { return { score: 80 } } } score를 80으로 변경하고 A학점입니다. B학점 입니다. v-else가 타게 되어 B학점입니다. 표시됩니다. v..

• format_list_bulleted Develop/Vue
• · 2023. 4. 27.
• textsms

Vue 이벤트와 methods 사용하기

Vue에서 이벤트를 등록해서 사용하고 methods를 이용해서 함수를 호출할 수 있습니다. 이벤트 등록 하기 이벤트는 일반적으로 v-on을 앞에 붙이지만 줄여서 @를 사용합니다. inline-code를 이용해서 이벤트에서 실행될 로직을 작성할 수 있고 메서드를 사용해서 작성할 수 있습니다. 간단한 로직의 경우에는 인라인 코드를 이용해서 사용하고, 복잡한 로직의 경우에는 메서드로 따로 빼서 처리하시면 됩니다. button // 인라인 코드 button // 메서드 메서드 methods 메서드는 vue 인스턴스에서 사용할 메서드를 등록해서 사용할 수 있습니다. 아래와 같이 메서드 등록 후 사용할 수 있습니다. 기본적으로 이벤트에서 method 호출 시에 event 관련 파라미터가 기본적으로 전달됩니다. 해당..

• format_list_bulleted Develop/Vue
• · 2023. 4. 24.
• textsms

Vue 데이터 바인딩 보간법 v-bind

Vue 에서 보간법을 이용하고 데이터 바인딩 할 수 있고 v-bind를 이용해서 속성을 사용할 수 있습니다. const App = { data() { return { name: '파워쿠의 블로그', address: 'https://powerku.tistory.com/' } } } Vue 컴포넌트 옵션의 데이터들을 어떻게 사용하는지 알아보겠습니다. 보간법 Vue 템플릿 문법 입니다. 중괄호를 두 개를 사용합니다. {{ name }} v-bind attribute 속성을 사용할때는 v-bind 보간을 사용해야합니다. 줄여서 :도 사용 가능합니다. v-bind:href="address" 사용 예시 {{ name }} 이동하기 위에서 정의한 name, address 데이터 들을 보간법을 이용하여 바인딩 할 수 ..

• format_list_bulleted Develop/Vue
• · 2023. 4. 20.
• textsms

Vue 인스턴스 생성 및 연결하기

Vue 인스턴스를 생성하고 element에 연결해서 Vue를 이용하여 컴포넌트를 생성하겠습니다. HTML를 이용하여 아래와 같이 화면을 만들 수 있습니다. 하지만 "파워쿠의 블로그"나 "url 주소"의 경우 데이터에 따라 문자를 변경하거나 HTML 구조를 변경할 수 있습니다. 이러한 작업들을 Vue에서 하기 위해서는 Vue 인스턴스를 생성하고 화면에 연결해야 합니다. 파워쿠의 블로그 이동하기 Vue 인스턴스 생성 Vue API 중 createApp를 이용해서 인스턴스를 생성합니다. createApp 파라미터에는 컴포넌트 옵션이 들어 있는 객체를 넣습니다. const App = { data() { return { name: '파워쿠의 블로그', address: '/https://powerku.tistory..

• format_list_bulleted Develop/Vue
• · 2023. 4. 19.
• textsms

Vue 프로젝트 만들기 npm init vue

Vue 프로젝트 세팅 하고 실행하는 방법입니다. 설치에 앞서 Node.js를 16 버전 이상으로 설치해야 합니다. 아래 사이트에서 설치하시면 됩니다. https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Vue 프로젝트 만들기 npm init vue create-vue 패키지가 설치가 안되어있으면 아래 버전을 설치하겠냐고 물어봅니다. y를 입력하고 엔터를 입력합니다. PS C:\Users\power\WebstormProjects> npm init vue Vue.js - The Progressive JavaScript Framework √ Project na..

• format_list_bulleted Develop/Vue
• · 2023. 4. 13.
• textsms