내가 자꾸 까먹어서 쓰는 개발 이야기/Vue.js 검색 결과
6 개의 검색 결과가 있습니다.
내가 자꾸 까먹어서 쓰는 개발 이야기/Vue.js

[vue sfc] IE용 빌드 세팅

링크로 대체함. https://soraji.github.io/front/2019/12/05/IE11blankVuejs/ [Vue.js] Vue를 적용하니 IE11에서 하얀화면(blank)으로 나올때 vue로 실컷 작업한뒤, chrome에서 신나게 작업을 하고 있는데, soraji.github.io 별거 다 해봤는데 저것만 먹히더라.

2020. 6. 29. 10:27
내가 자꾸 까먹어서 쓰는 개발 이야기/Vue.js

Vue.js SPA (Single Page Application)

시원하게 설명 된 곳이 없어서 삽질하다 직접 쓴다. 다른 글들을 참고하여, Laravel과 webpack과 vue를 설치한다. [Laravel] resources/views/app.blade.php Laravel에서 view 가 있는 route는 얘가 다 한다고 보면 된다. /routes/web.php

2020. 6. 1. 14:20
내가 자꾸 까먹어서 쓰는 개발 이야기/Vue.js

템플릿 디렉티브 믹스

Vue.js 가이드의 내용에 따라, keyup, keydown 등의 이벤트를 @keyup 디렉티브로 사용 해 왔다. https://vuejs.org/v2/guide/events.html#System-Modifier-Keys Event Handling — Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org 이곳을 보면 이벤트 디렉티브에 키 조합이 사용 가능한 것을 알수있다. alt+key 라던가, ctrl+key 라던가.. 대표적으로 @keyup.enter 를 많이 쓰게 되는데, 이 중 "enter" 부분은 key code로도 대체 가능하다. @keyup.enter == @keyup.13 input element 에서는 특정 키에 대해서 이벤트 ..

2019. 4. 24. 10:54
내가 자꾸 까먹어서 쓰는 개발 이야기/Vue.js

[webpack 4] vendor와 common 합체

webpack을 3에서 4로 업데이트 했다. 같은 툴인데 뭐가 얼마나 다르겠나 하고 시작했다. 많이 달랐다. 이 쉐키들... 일단 가장 중요한 요소로, CommonsChunkPlugin 이 deprecated 되어 사용할 수 없게 되었다. 대신 config.optimization.splitChunks 를 사용해야 한다. 샘플만 보고 따라했더니, 기존에 common 으로 묶었던 공통 js가 vendor.js 와 common.js 로 분리되었다. 게다가 css도 단일 파일로 만들던것이 직접 만든 css 파일들이 포함되지 않게 되어버렸다. 구글을 하루 종일 뒤진 끝에 분리 된 파일들을 병합할 수 있었다. 추가/변경 된 부분만 나열하자면 이렇다. (기존 entry 등은 대부분 동일하다) mode: "none",..

2019. 3. 14. 12:27
내가 자꾸 까먹어서 쓰는 개발 이야기/Vue.js

[webpack] blueimp-fileupload jquery plugin 사용하기

blueimp-fileupload 플러그인이 webpack과 의존성 충돌이 발생하여 이것과 jquery, jquery-ui 등을 별도로 사용했었다. 오랜만에 생각이 나 구글을 다시 뒤져보니 해법이 있었다. 1. script-loader 설치 > npm install --save-dev script-loader 2. 기존 페이지 내의 태그를 제거하고, 해당 플러그인이 사용되는 js에 다음과 같이 import 시킨다. require('script-loader!blueimp-file-upload/js/vendor/jquery.ui.widget.js'); require('script-loader!blueimp-tmpl/js/tmpl.js'); require('script-loader!blueimp-load-im..

2018. 7. 31. 17:03
내가 자꾸 까먹어서 쓰는 개발 이야기/Vue.js

Vue 에서 방문수령(?) 하기

사실 Vue 보다는 axios에 관한 내용일수도 있겠다. 아래 2개의 Vue 객체가 있다. const obj1 = new Vue({data: {list: [],},methods: getList() {axios.get("/list/1").then( response => {this.list = response.data;});}}}); const obj2 = new Vue({data: {},methods: {getList() {}}}); 두 객체는 각각의 js 파일로 분리되어 있으나, webpack 또는 script 태그를 통해 서로를 호출할 수 있다. obj2에 중복된 메서드를 생성하지 않고, obj2에서 obj1의 메서드를 통해 동일한 데이터를 제공 받으려 한다. 처음엔 이렇게 해봤다. axios.get(..

2018. 1. 23. 15:43