JUMP개발자의 개발일기 JUMP개발자의 개발일기

Vue.js에서 ES-LINT 설정이 켜져 있으면, JS Syntax 오류를 잡아주는 장점이 있지만, console.log 등 개발할때 필요한 부분에 대해서도 오류로 잡히는 경우가 존재한다. 그렇기 떄문에 ES-LINT 설정을 끄고 싶은 경우가 존재할 수 있는데, 아래와 같이 해결할 수 있다. 1. 주석 이용 - eslint-disable 주석을 이용한다. /* eslint-disable */ methods: { fetchData() { console.log('e') } } 2. vue.config.js 설정파일 이용 vue-cli 3버전 이상에서는 webpack.config.js에 선언하였던 설정들을 vue.config.js에서 관리할 수 있게 되었다. 아래와 같이 파일을 생성하고, lintOnSave..

Vue에서 아래와 같은 테이블을 그리려면 아래와 같이 하면 된다. 우선 테이블을 그리고 당연히 데이터의 수만큼 tr 태그를 돌려야 한다. (v-for 사용) 데이터 안에 html 태그가 존재할 때는 아래와 같이, v-html 태그를 사용해야한다. 1. html태그 : 2. 하이퍼링크 : {{item.link}} 3. 이미지링크 : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74..

watch : watch 속성은 특정 데이터의 변화를 감지하여 자동으로 특정 로직을 수행해주는 속성임. 아래 소스의 경우 num 변수의 숫자가 변할 시에 watch가 그것을 감지하여 log를 찍는다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 Document {{ num }} add new Vue({ el : '#app', data() { return { num : 10, } }, watch: { num : function() { this.logText(); } },..

Vue에서 권고하는 HTTP 통신 라이브러리는 액시오스(Axios)이다. Promise 기반의 HTTP 통신 라이브러리이며 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되있고 다양한 기능을 제공한다. 아래 예제 소스를 보면 AJAX와 유사하기 때문에 쉽게 이해가 가능하다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 Document button {{users}} new Vue({ el : '#app', data() { return { users :..

하위 컴포넌트의 메서드에서 상위 컴포넌트로 통신하는 방법은 VUE에서 emit을 사용한다. 아래 소스와 결과를 보면 쉽게 이해가 가능하다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 Document {{ num }} //하위 컴포넌트 app Header에서 클릭 이벤트 발생 (emit 사용) var appHeader = { template : 'Click', methods : { passEvent :function..

Props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 Document appHeader = { template : '{{ propsdata }}', props : ['propsdata'] }, appContent ={ template : '{{propsdata}}', props : ['propsdata'] } new Vue({ el : '#app', data : { message : "HI bins", num : 3 }, componen..

Vue는 기본적으로 컴포넌트를 조합하여 화면을 구성을 많이 한다. 컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발이 가능하고, 재사용이 가능하기 때문이다. 전역 컴포넌트는 아래와 같이 선언한다. 전역 컴포넌트는 선언하면 어디에서든지 사용이 가능하다. 마치 전역 변수 같은 개념이라고 할 수 있다. 1 2 3 4 // 전역 컴포넌트 // Vue.component('컴포넌트 이름', 컴포넌트 내용); Vue.component('app-header', { template: 'Header' }); http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scr..