두 개 이상의 값 변경 감지둘 이상의 값에 대한 변경을 감지하여 하나의 값이라도 변경이 일어나면 특정 메서드를 실행하는 코드가 필요했다. 아래 코드는 computed에 임의로 정의한 data1(), data2()의 반환 값을 watch에서 감지하여 둘 중 값이 하나라도 변경되면 동일한 handleUpdate() 함수가 호출되도록 작성한 것이다. 주의할 점은 감시하는 값이 객체인 경우에는 "deep" 속성을 추가해야 변경을 감지할 수 있다.computed: { data1() { return this.$store.state.data1; // vuex 상태 값1 }, data2() { return this.$store.state.data2; // vuex 상태 값2 }},watch: { d..

extra v-if HTML DOM 요소를 보이기/숨기기 위해 실무에서는 v-if 문법을 주로 사용한다. 사용자의 권한에 따라 부여하는 기능을 달리할 때 사용할 수 있다. if 문은 순차적으로 비교하므로 "일반 사용자 > 매니저 > 관리자" 순으로 사용자가 많으므로 이를 감안하여 순서를 설계하는 것이 유리하다. 조회 생성 조회 생성 조회 삭제 v-show v-if는 [그림 2]와 같이 HTML DOM 요소를 생성/삭제한다. DOM 트리를 리페인팅하기 때문에 리소스를 많이 사용한다. 반면 v-show는 [그림 3]과 같이 style에서 보이기/감추기 처리를 한다. 개발자는 사용자의 UX를 항상 고려해야 한다. 이러한 태도는 코드를 개선하는 것보다 더 중요하다. 인공지능 블록체인 사물인터넷 기타 comput..

학습내용 1. 강의영상 https://youtu.be/sqH0u8wN4Rs 유튜버 개발자의 품격님의 "한시간만에 끝내는 Vue.js입문" 강의 내용은 크게 두 파트로 나눌 수 있겠다. 본 페이지에는 Vue.js의 다음과 같은 내용을 다룬다. 데이터 처리 메소드 Instance-Lifecycle 데이터 바인딩 v-model 사용 @이용 이벤트 호출 배열 형식의 데이터 v-for 콘트롤 v-if(또는 v-show) 이용한 엘리멘트 화면 보이기(감추기) watch 이용 실시간 데이터 모니터링 2. 학습 중 작성한 코드 Welcome to {{title}}! Welcome to {{title2}}! Get Set {{d.t}} {{d.v}} {{d.t}} 3. 코드 실행 C:\workspace\vuejs\tes..