[Vue.js] filter(필터) 기본 사용법 및 전역 filter 설정 방법: 검색 필터 샘플 스크립트 및 돈 콤마 찍기 스크립트
Vue.js는 필터(filter)를 사용하여 텍스트의 형식화를 적용할 수 있다. 가령, 숫자 3자리 수 마다 콤마 찍기(돈 표기법), 또는 텍스트로 입력받은 값을 날짜형식으로 포맷팅하거나, 입력받은 문자를 모두...
[Vue.js] Vue 인스턴스 수명주기(Lifecycle Diagram) 테스트 해보기
뷰 인스턴스의 수명주기를 확인하기 위해 console.log()로 출력해 본 예제입니다. 아래 HTML 파일을 다운받은 후 크롬브라우저나 익스플로어에서 열면 확인할 수 있어요. 파일을 연 후 F12키를 눌러...
[Vue.js] (arrow function)화살표 함수()=> 사용시 this는 Window객체를 바인딩한다, Vue 인스턴스가 아니다.
Vue.js에서 화살표 함수(arrow function) 사용과 일반 함수 사용 방법은 매우 간단하지만 애로우 함수를 사용하는 경우 표현방식이 햇갈리는 경우가 발생하여 공부를 하게되었다. 그러면서 우연히 computed() 에서...
[Vue.js 기초] 반복문 v-for 예제로 마스터하기(key, index 등)
Vue.js에서 사용하는 반복문에 대해 알아봅니다. 배열이든, 객체이든 반복해서 출력해야 할 경우 v-for 디렉티브를 사용하게됩니다. 샘플코드를 보고 따라하는 방법이 가장 빠르게 배우는 지름길입니다. 눈으로 본 자료는...
[Vue.js] 조건문 v-if, v-else-if, v-else 사용법과 v-show 디렉티브와의 차이점
Vue.js에서 사용하는 조건문에 대해 알아봅니다. v-if를 사용하여 조건에 따른 조건부 렌더링이 가능합니다. 비교할 조건이 하나라면 v-if만 사용하여 처리하며, 2가지 일 경우, v-if와 v-else를 사용합니다. 2개...
[Vue.js] JSFiddle 웹사이트에서 코드 작성 및 실행 결과 확인
Vue.js 개발 환경을 PC에 설정하는 방법도 있으나, 웹사이트에서 바로 코드 작성 및 실행결과를 확인할 수 있는 사이트가 있어서 소개합니다. 개발자들이라면 누구나 아는 바로 그 jsfiddle...
[Vue.js] HighCharts 조건에 따른 레이블(Lable) 표기 방법 : 수치가 0인 값을 제거 하고 싶다면?
하이차트에서 레이블 표기시 조건에 따라 표기해야하는 경우가 있다, 가령 수치가 0인 값들은 표기하고 싶지 않다면 어떻게 해야할까? 데이터를 변조하는 방법과 하이차트에서 제공하는 포멧터 펑션을 이용하는...
[Vue.js] keep-alive로 캐시된 컴포넌트(페이지)를 reload 처리 하는 방법
특정 화면에 데이터를 추가해도 조회가 되지않는다는 오류가 있다고 하여 코드 분석을 시작하였다. 소스코드 분석하는 과정에서 어떤 메뉴는 클릭하면 클릭할 때 마다 백앤드 코드를 호출하여 매번...
[Vue.js] Vuex를 기본으로 구성한 프로젝트에서 URL의 파라미터 값들을 저장 후 필요시 호출하는 방법 ( 이전 페이지 이동시 파라미터값들을 유지하는 방법)
라우터를 사용하여 파라미터 값들을 전달하는 방법은 2가지가 있다. 하나는 params 방식이고 또 하나는 query를 사용하는 방식이다. 메인페이지에서 다른 페이지를 호출하여 페이지 이동이 발생했다고 하자. 이전...
[Vue.js] 컴포넌트를 렌더링하는 라우터(router) 와 삽질 중…….
vue.js의 라우터가 나에게 고통을 주고 있다. params를 이용한 값 전달에 문제가 있는 것 같다. 경로에 파라미터 값들을 노출하지 않기 위해서 router를 이용해 값을 전달하는 방법으로...
