본문 바로가기
반응형

VueJS/VueJS46

[VueJS] input 바인딩 시 한글/일어/중국어 업데이트 문제 처리 (ft. v-on:input) vueJS에서 input 바인딩을 사용할 때 한글/일어/중국어 사용 시 업데이트 문제 처리에 대해 알아보자. v-model을 통한 양방향 바인딩을 사용할 때 문제가 생기는데, 위에서 설명한 한글/일어/중국어의 경우 바로바로 업데이트가 안되는 상황이 발생한다. 이는 vueJS 공식 사이트에서도 해당 내용을 다루고 있다. [IME](https://en.wikipedia.org/wiki/Input_method) (중국어, 일본어, 한국어 등)가 필요한 언어의 경우 IME 중 `v-model`이 업데이트 되지 않습니다. 이러한 업데이트를 처리하려면 `input` 이벤트를 대신 사용하십시오. 코드를 통해 다시한번 접해보자. ▷ 예제1) v-model 문제 new Vue({ el: '#app', data: { me.. 2020. 12. 1.
[VueJS] vue datepicker 컴포넌트화 하여 사용하기 (ft. 한글 달력) vueJS에서 따로 제공해주는 플러그인이나, 누군가 만들어놓은 라이브러리 같은건 찾지를 못해서. jquery-ui에서 제공해주는 datepicker를 Vue.component로 만들어서 사용하고자 한다. 일단 jqeury-ui를 주입하고 (당연히 jquery가 주입되어 있어야한다.) 시작해보자. {{ date }} Vue.component('datepicker', { template: '', mounted: function() { var self = this; $(this.$el).datepicker({ dateFormat: "yy-mm-dd" ,monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'] ,.. 2020. 11. 29.
[VueJS] vue sortable / draggable 사용하기 (ft. vuedraggable / SortableJS) jQuery UI에서 제공하는 sortable 기능을 vueJS에서 사용하는 방법에 대해 알아보자. vueJS에서 사용하려면 사용하는 라이브러리가 존재하는데 아래에 해당 라이브러리를 가지고 만들수 있는 데모 사이트가 존재한다. Full demo example : https://david-desmaisons.github.io/draggable-example/ draggable-example david-desmaisons.github.io 이제 하나하나 사용방법에 대해 알아보기에 앞서, 라이브러리를 사용하기 위해서는 필요한 스크립트를 선언해주어야한다. 하나 주의할 점은 위 순서대로 놔야 정상적으로 실행되니까 막 놓지 말자. 이제 예제를 통해 접해보자. ▷ 예제1) 기본 사용법 name : {{item.nam.. 2020. 11. 16.
[VueJS] vue 반복문, 리스트 렌더링 v-for 사용방법 (ft. 객체 반복) vueJS에서 제공하는 반복문, 리스트 렌더링 v-for 구문에 대해 알아보자. vueJS를 사용한다면 가장 많이 사용하는 구문 중 하나일 것이다. 예제 코드를 통해 바로 접해보자. ▷ 예제1) v-for 구문 기본 사용법 {{item}} new Vue({ el: '#it_list', data: { list : ['mine','it','record'] } }); ▷ 결과 기본적인 사용방법은 예제에 나와있는 것처럼 배열 데이터를 가지고 반복문에 사용될 태그에 v-for 구문을 삽입해주면 된다. ▷ 예제2) index 사용하기 {{item}} ({{index}}) ▷ 결과 for문에 index가 있는것처럼 v-for 역시 index값을 사용할 수 있다. 이는 html 구문에서 위 예제처럼 사용해주면된다. ▷.. 2020. 11. 15.
[VueJS] vue 조건 렌더링 v-show / v-if, v-else-if, v-else 사용방법 및 차이점 vueJS에서 제공하는 조건 렌더링 v-show 와 v-if 문법에 대해 알아보자. script 에서 사용하는 if와 동일하며, dom 요소를 조건에 따라 true일 때는 보이고 false일 때는 안보이게 하기 위해 사용된다. 코드를 통해 v-show 와 v-if 문법의 사용법과 차이점에 대해 알아보도록하자. ▷ v-show 문법 v-show 보이기 v-show 숨기기 new Vue({ el: '#it_list', data: { }, methods: { } }); ▷ 결과 결과를 보면 알겠지만 v-show의 특징은 조건이 false일 경우 dom 요소는 생성하지만 display:none 이라는 스타일을 가진 상태로 생성이 되어 화면상에서는 보이지 않는다. ▷ v-if 문법 v-if v-else-if v-.. 2020. 11. 14.
[VueJS] Vue.component templates 정의하는 방법 vue component 를 사용할때 tempalate를 정의하는 여러 방법이 존재하는데 그중에서 나는 두가지 방법을 써본것같다 아직 VueJS를 많이 써본게 아니라서 그렇다. 내가 직접 써본것만 정리해 두려 한다. ▷ Strings 이 방법에 내가 정리한 방법중에 동적으로 추가하는 방법에 대해 설명할 때 사용한 방식이다. Vue.component('it-component',{ props : [], template: 'mine' }); new Vue({ el: '#it_list', data: { }, methods: { } }); 그저 JavaScript 에서 template 를 string 으로 입력하는건데 간단한거면 상관없지만 코드가 많아질수록 확연하게 가독성이 떨어지는 아주 심각한 단점이 존재한다... 2020. 11. 12.
[VueJS] props 사용해서 데이터 전달하기 (ft. 검증) props란 무엇일까? vuejs에서 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용되는 단방향 데이터 전달 방식이다. 정적(Static) / 동적 (Dynamic) 데이터 전달 방식 정적으로 데이터를 전달하는 방법은 말 그대로 전달할 데이터를 직접적으로 명시해 주는 것을 의미한다. 동적으로 데이터를 전달하는 방법은 v-bind나 ":"를 사용하여 변수값을 전달하는 방법을 의미한다. 물론 데이터 전달에 있어서 문자열뿐만 아니라 모든 유형의 값을 prop에 전달할 수 있다. 자식 컴포넌트에서 데이터 받기 데이터를 받는 두가지 방법이 존재한다. 1. 배열에 이름만 명시해서 데이터 받기 export default { props: ['foo', 'bar'], ... } 단순하게 부모 컴포넌트에서 전달.. 2020. 11. 10.
[VueJS] props use camelCase Error : Note that HTML attributes are case-insensitive and camelCased props need to use their kebab-case equivalents when using in-DOM templates. vueJS에서 compoent를 사용하게 되면 props라는 속성을 사용하게 되는데 누구나 한번쯤은 겪을만한 이 에러에 대해 알아보자. props를 사용할 때 아무생각 없이 camelCase를 사용하게 되면 아래와 같은 에러가 발생한다. Note that HTML attributes are case-insensitive and camelCased props need to use their kebab-case equivalents when using in-DOM templates. 그냥 쉽게 말해서 카멜케이스를 사용하고싶으면 케밥케이스를 사용해라 라는 의미인데 Vue 공식 홈페이지에서 다음과 같이 안내를 해주고 있다. HTML 어트리뷰트는 대소문자 구분이 없기 때문에 브라우저는 대문자를 소문자로 변경하여 .. 2020. 11. 9.
[VueJS] 배열 데이터를 가지고 component 동적으로 추가하기 vueJS에서 배열 데이터를 가지고 component 동적으로 추가하는 방법에 대해 알아보자. 사실 제목만 가지고 유추할 수 있는데, v-for를 component template에 걸어서 사용하는걸 의미한다. (다른 방식으로도 사용하는 방법이 있겠지만 본문에서는 배열 데이터를 가지고 v-for문법을 사용하여 다룬다.) 이러한 방법을 사용하는 이유가 있는데 어떤 기능을 개발하느냐에 따라 다르겠지만 배열데이터를 가지고 v-for문을 돌려서 화면에 뿌려주는데 그 하나하나가 독립적인 기능을 가지고 있다면 component를 동적으로 생성하여 작업을 해야할때 사용한다. 예제 코드를 통해 접해보자. ▷ 예제1) 동적 component 생성 목록 추가 Vue.component('it-component',{ temp.. 2020. 11. 2.
반응형
TOP

티스토리툴바