HoneyPot 프로젝트에서 구독목록 리스트를 보여줘야 하는 과정이 있었는데 처음으로 해본 페이지네이션 구현하기를 남겨보려고 한다. 우선 완성본 근데 이제 미완성을 곁들인 .. [HTML 코드] //여기에는 카드에 들어갈 내용들을 작성 //pagination 버튼 생성 이전 {{ currentPage }} 다음 [script 코드] 1. 우선 data의 return 에 현재 페이지 수와 페이지 당 보여줄 카드 개수를 적어 준다. 2. computed에 현재 페이지에 표시할 카드 목록을 추출할 계산 된 속성을 입력 해준다. startIndex 변수에는 현재 페이지의 첫 번째 카드의 인덱스를 계산하고, endIndex 변수에는 현재 페이지의 마지막 카드 다음 카드의 인덱스를 계산한다. 즉, startInde..

v-on v-bind와 마찬가지로 지정된 해당 태그의 속성값을 지정하는 데 사용되는 디렉티브다. @는 v-on:의 축약표현, v-on:click=“doSomething”을 줄여서 @click=”doSomething” 이라고 표기해줄 수 있다. 클릭 클릭 [v-on] : input v-on:input 은 키다운 개수를 카운트 한다. cnt2:{{cnt2}} [v-on] : v-for에 v-on 사용 {{img.title}} return 초기 이미지 값(initimg)을 설정해 주고 v-on:click="initImg=img.url" 란 {{img.title}} 을 클릭할 때 초기 이미지로 주었던 값을 v-for="img in imgs" 에 있는 img.url 로 바꿔 달라는 의미이다. {{msg + ': ..

Vue Directive 란? HTML 태그 안에 v- 접두사를 가지는 모든 속성들을 의미하며 화면의 요소를 더 쉽게 조작하기 위해 사용하는 기능이다. 뷰의 데이터 값이 변경 되었을 때 화면의 요소들이 반응하여 변경된 데이터 값에 따라 갱신 된다. 따라서 화면의 요소를 직접 제어할 필요 없이 뷰의 디렉티브를 활용하여 화면 요소들을 조작 할 수 있다. v-bind v-bind는 지정된 해당 태그의 속성값을 지정하는 데 사용되는 디렉티브다. v-bind 지우고 : 로 축약 가능, v-bind:href=“url”을 줄여서 :href=”url” 이라고 표기해줄 수 있다. {{test1}} {{test2}} v-if 저장한 뷰 데이터 값의 참, 거짓 여부에 따라 해당 HTML 태그를 화면에 표시 여부를 결정하는 ..

MVVM 패턴은 Model + View + View Model를 합친 용어이다. Model : 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분 View : 사용자에서 보여지는 UI 부분 View Model : View를 표현하기 위해 만든 View를 위한 Model로 View를 나타내기 위한 데이터 처리를 하는 부분 MVVM 패턴은 Command 패턴과 Data Binding 두 가지 패턴을 사용하여 구현되며 View와 View Model 사이의 의존성이 삭제 되어 각각의 부분은 독립적이기 때문에 모듈화 하여 개발이 가능하다 Vue 의 개념을 찾아 보던 중 사람들이 Vue 는 MVVM 과 연관이 있다고 하면서 개념 정리를 해 놓은 것을 보았다. 그래서 MVVM이 어떻게 Vue 와 연관이 있는..