Vue.js 썸네일형 리스트형 [vue2] Vuetiful Datatable 사용하기 들어가기 테이블 형태의 데이터 표현은 매우 많이 사용되는 UI이다. 이런 Data Table 종류의 컨트롤들은 데이터를 테이블 형태로 자주 출력하고 테이블 형태로 데이터를 수정할 때 많이 사용한다. 이전에 사용 중인 element UI 라이브러리 중에 Table 컴포넌트가 있었는데 단순 데이터 표현에는 적합하지만 편집 기능이 없었다. 그래서 대안으로 찾은게 Vuetiful 라이브러리에서 DataTable이다. 혹시나해서 Vuetify UI 라이브러리가 아니라 Vuetiful이다. Vuetiful은 Vuejs용 컴포넌트 라이브러리로서 Calendar, Chip, Datatable, Datetime-picker, Dynamic, Floating-Panel, Paginator, Panel, Tab-contro.. 더보기 [vue2] vue.draggable 사용하기와 v-treeview 적용 검토 들어가기 v-treeview에서 드래그앤드롭을 구현하기 위해 vue.draggable을 사용을 간단하게 검토해보았다. 일단 vue.draggable 사용법을 살펴보고 v-treeview을 적용을 해보았다. 결론을 먼저 말하면 v-treeview 적용 검토결과 제대로 적용되지 않았다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ vue.draggable 사용하기 vue.draggable은 vue에서 손쉽게 드래그 앤 드롭 작업을 구현하기 위한 모듈이다. 먼저 헤더 내용을 작성하자. 다음으로 vue.draggable로 화면에 표시할 간단한 구조를 만들어보자. 목록을 표시하고 목록간에 드래드 앤 드롭을 하는 예제이다. {{item}} 사용할 라이브러리을 포함시.. 더보기 [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] vuetify 기본 구성 들어가기 vuetify는 vue.js에서 사용하는 대표적인 UI 컴포넌트 프레임워크 중에 하나이다. 라이센스는 MIT license이다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 설치 yarn add vuetify yarn add sass@~1.32 sass-loader deepmerge -D plugin src 밑에 plugins 폴더에 vuetify.js 파일 생성한다. plugins 폴더가 없다면 새로만들면 된다. import Vue from 'vue'; import Vuetify from 'vuetify/lib/framework'; // import 'vuetify/dist/vuetify.min.css'; Vue.use(Vuetify); exp.. 더보기 [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에서 레이아웃은 기본 기능이기 보다는 라우터의 기능과 컴포넌트 기능을 적절하게 활용하는 형태이다. 다른 프레임워크에서는 페이지를 임포트하여 구성하거나 이를 위한 별도 라이브러리를 사용하는 경우가 많다. 물론 더 훌륭한 기능을 사용하고 싶다면 추가 라이브러리를 사용할 수도 있.. 더보기 이전 1 2 다음
