알쓸전컴(알아두면 쓸모있는 전자 컴퓨터)

vue Template 동적 변환 가끔식 Template 를 동적으로 변환 하며 보여 주고 싶을때가 있는데 예를 들면 html 코드 미리보기 할때 vuejs 의 v-html 을 사용 하면 Custom tag나 표준이 아닌 tag의 경우 표현이 안됩니다. 그래서 v-runtime-template 기술을 사용 하면 됩니다. 오픈 소스 사이트 https://github.com/alexjoverm/v-runtime-template 샘플 코드 는 : https://codesandbox.io/s/884v9kq790 샘플 코드가 위와 같이 표현 됩니다. 아래는 오픈 소스 Readmd 를 퍼왔습니다. 오픈 소스 사이트에 들어 가면 좀더 상세히 사용법이 나와 있습니다. Getting StartedInstall it:np..

WYSIWYG Vue js Eidtor 추천 해당 라이브러리 문서화도 잘되어 있고 vuejs도 wrap 되어 있어서 소개 합니다. wrap = https://surmon-china.github.io/vue-quill-editor/ 실제 에디터 기능 : https://quilljs.com/ 밑에는 wrap 된 화면 이며 실제 사이트 예제는 훨씬 잘되어 있다 . 게다가 상업적으로도 무료인듯 하다 추후에 사용에 용이 할듯 하다.

Vue.Draggable LIst Drag UI 이분야 에서는 RubaXa/Sortable 가 대세인것 같아 각종 wrap 들 API가 많다. 그중에 vue에 맞춘 wrap 이 있다. 아래가 데모 이다 사용해본 결과 잘된다 .. https://github.com/SortableJS/Vue.Draggable#readme 그리고 똑같은 https://sagalbot.github.io/vue-sortable/ wrap가 있는데 현제 사용이 안되니 낚이지 말자 https://david-desmaisons.github.io/draggable-example/ Typical use: {{element.name}} .vue file: import draggable from 'vuedraggable' ... export..

vue cli 3.0 webcomponent 만들기 다른 웹 프로그램에서 쉽게 자신의 vue 라이브러리를 사용하기 위해서 흔히 It works! If you want to use the code I’ve been referring to as a template, I’ve put it in a repo here.PublishingFinally, if you want to share your web component with the world, there’s no better place than webcomponents.org. This site features a browsable collection of web components free for download. The showcased componen..

vue js chart 라이브러리 소개 apexcharts vue js 로 레핑 된 라이브러리가 추가 되어 소개 하고자 합니다. https://apexcharts.com/javascript-chart-demos/ 데모 사이트 이며 문서와 예제가 잘 정리 되어 있습니다. Vue.js component for ApexCharts추후에 실제로 사용 하면 좋을것 같습니다.

filepond vue js 파일 업로드 (추천) https://github.com/pqina/filepond A JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience. 위와 같은 라이브러리 인데 사용방법이 정말로 간단하다 . 일단 설치 법은 npm install filepond --savenpm install vue-filepond --savenpm install filepond-plugin-file-validate-type --save (플러그인 설치 옵션 사항이다) // ..

spring mvc 와 vue-auth with jwt 사용법 vue-auth 일단 기본 적인 설정은 셋업은 https://github.com/websanova/vue-auth/blob/master/docs/StepByStepGuide.md 해당 문서에 나와 있는 방법을 사용 하였습니다. 하지만 해당 문서 만보고 하면서 시행 착오가 많아 정리 합니다. 아래와 같이 코드에 셋업 했습니다. 저같은 경우에 개발 보드에서 프록시 모드를 사용하기 때문에vue.config.jsmodule.exports = { baseUrl: 'webfms/', devServer: { proxy: { '/W_Server': { target: 'http://127.0.0.1:8181/test/', changeOrigin: true, ..

watch 에서 값 변경 할때 TypeError: Cannot set property 날때 watch:{ value:(val)=>{ this.dialog = val; }, dialog:(val)=>{ this.$emit('input',val) } } 위와 같은 식으로 람다 함수를 사용 하면 안됩니다. watch:{ value:function(val){ this.dialog = val; }, dialog:function(val){ this.$emit('input',val) } } 위와 같은 방식으로 사용 해 줘야 합니다.

vue component v-model 만드는법 vue 에서 v-model 을 custom component 에서 사용 하는 방법을 알아보겠습니다. 먼저 Month: {{date.month}} Year: {{date.year}} import DatePicker from './DatePicker.vue'; export default { components: { DatePicker }, data() { return { date: { month: 1, year: 2017 } } } }) 위의 코드에서 보면 커스텀 component 로 date-picker 를 볼수 있습니다. 저 date-picker 의 component 을 보겟습니다. Month: Year: export default { props: ['va..

아래가 공식 문서이다 https://vuejs.org/v2/cookbook/packaging-sfc-for-npm.html#Base-Example Packaging Vue Components for npmBase ExampleVue components by nature are meant to be re-used. This is easy when the component is only used within a single application. But how can you write a component once and use it in multiple sites/applications? Perhaps the easiest solution is via npm.By packaging your componen..