vuejs 썸네일형 리스트형 [vue2] package 버전 및 빌드시간 사용 pakcage version package.json에 version 정보가 있다 이를 활용하는 방법을 살펴보자. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 일단 값을 가져오는 방식은 간단하다. 단순 json 파일을 로딩하고 필요로 하는 속성을 추출하면 된다. import { version } from '../../package'; vue.js에서 version을 사용하기 위해 computed을 추가했다. computed: { version() { return version; }, } 내부적으로 버전을 처리하는 방법도 있지만, 현재 배포된 버전을 확인할 수 있도록 화면에 출력해보자. v {{ version }} 위의 방식은 오른쪽 하단에 같은 자리에 출력.. 더보기 [vue2] 목록에서 체크박스 선택 처리 vue.js에서 배열 데이터를 목록 또는 표 형태로 출력하는 방식은 매우 간편하다. 그러나, 출력된 목록에서 일부 데이터를 선택해서 처리하는 경우는 어려워보인다. 이 부분도 쉽게 처리 하는 방법이 있다. 들어가기 목록으로 출력하고 데이터 선택은 체크박스로 처리하는 예제이다. 저도 예전에는 상당히 복잡하게 만든 기억이 있다. 여기서는 최종 3가지 방식으로 처리하는 예를 살펴보겠다. 물론 다른 방식도 있을 수도 있지만, 제가 사용했던 것 중에 그나마 좋다고 생각하는걸 정리했다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 간단한 목록 출력 처리할 데이터는 vue.js에 있는 가이드 문서를 참고해서 사용했다. data() { return { todos: [ {.. 더보기 [vue2] vuetify 팝업 모달창 사용 vuetify를 사용한 팝업 모달창 사용법을 간단하게 정리해보았다. 들어가기 vuetify의 v-dialog을 사용해서 팝업모달창을 만들어보자. 작성자: ospace114@empal.com, http://ospace.tistory.com/ template 작성 확인 script 작성 사용예 등록된 컴포넌트명이 "Popup"이라고 가정하겠다. 사용할 팝업창을 ref 형태로 추가한다. let res = this.$refs.popup.open(this.popupValue); if (res) { console.log('result is', res); } else { console.log('popup cancel'); } $refs 통해서 open()을 호출한다. 참고 [1] Dialogs, https://vue.. 더보기 [vue2] 여러 숫자 자동입력 컴포넌트 작성자: ospace114@empal.com, http://ospace.tistory.com/ 속성 size: 숫자 입력 개수 사용예 소스코드 더보기 [vue2] 레이아웃 구성 웹페이지는 여러 화면으로 구성되어 있다. 일반적으로 상단에 로고와 메뉴, 가운데에 컨텐츠, 하단에 사이트정보 등 형태로 되는 경우가 많다. 이런 화면을 모든 페이지에 반복적으로 나타나는데, 모든 페이지에 같은 작업을 반복적으로 하기에는 매우 비효율적이다. 이때 필요한게 레이아웃을 구성해여 화면 분할해서 작업하는 형식이다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 들어가기 vue.js에서 레이아웃은 기본 기능이기 보다는 라우터의 기능과 컴포넌트 기능을 적절하게 활용하는 형태이다. 다른 프레임워크에서는 페이지를 임포트하여 구성하거나 이를 위한 별도 라이브러리를 사용하는 경우가 많다. 물론 더 훌륭한 기능을 사용하고 싶다면 추가 라이브러리를 사용할 수도 있.. 더보기 [vue2] Vue.js 프로젝트 기본 구성 초기 소스코드를 구성할 경우 해야할 일이 많다. 최근 프레임워크는 많이 간소화되어서 해야할 작업이 매우 많이 줄어들었지만 그래도 해야할 일이 좀 있다. 사용할 목적에 따라 달라질 수 있지만, 웹 어플리케이션을 만든다고 가정해서 가장 기본적인 환경 구성을 정리해보았다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 들어가기 Vue.js을 몇번 사용하면서 반복적으로 구성하면서 필요로 하는 작업이 있다. 그때마다 검색하면서 똑같은 작업하기가 번거롭기 때문에 한번 정리해보았다. Vue.js는 버전 3까지 나왔지만, 여기서는 버전 2에 대한 환경 구성을 다룰려고 한다. Vue.js 프로젝트 구성은 vue cli을 사용해서 초기 구성을 할 수 있다. vue cli도 .. 더보기 이전 1 다음
