본문 바로가기
반응형

VueJS57

[VueJS] vue 와 mCustomScrollbar 같이 사용하기 (ft. mCustomScrollbar 기본 사용법) 우선 본문에 들어가기에 앞서 mCustomScrolbar에 대해 간단하게 설명하자면 "jQuery custom content scroller" 즉, 기본적으로 제공되는 스크롤 overflow를 custom하여 보기좋게 보여주는 라이브러리 라고 생각하면 된다. 자세한 내용은 공식홈페이지에 들어가서 확인해보자. https://manos.malihu.gr/jquery-custom-content-scroller/ jQuery custom content scroller – malihu | web design Last updated on Jul 11, 2016 Originally published on August 1, 2010 by malihu, under Plugins. Highly customizable cu.. 2021. 1. 2.
[VueJS] v-for와 v-if 동시에 사용하기 (ft. 같은 노드 우선순위) vueJS에서 제공하는 v-for와 v-if 구문을 동시에 사용하면 어떻게될까? 우선 v-for구문과 v-if구문을 같이 사용하는건 정말 그 경우밖에 없는게 아니면 사용을 권하고싶지는 않다. 하지만 역시 꼭 사용해야한다면 알아둬야할게 있는데, 이게 버전마다 기준이 다르다는 것이다. 코드를 보기전에 결론부터 말하자면 둘이 같은 노드에 존재한다는 가정하에 2.x 버전에서는 v-for 구문이 더 높은 우선순위를 가지게 되는데, 요즘 나온 3.x 버전에서는 v-if 구문이 항상 더 높은 우선순위를 가지게 된다. 아마 아직 2.x 버전을 사용하는 곳이 많을텐데 버전에 따라 우선순위가 달라지니 알아두면 좋다. 일단 예제코드는 2.x버전을 기준으로 작성한 것이다. ▷ 예제1) 2.x 버전의 v-for v-if 우선순.. 2020. 12. 2.
[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.
반응형
TOP

티스토리툴바