본문 바로가기
반응형

Library & Framework/VueJS33

[VueJS] $set()/$delete() - 객체, 배열 데이터 변경 및 삭제 감지 요청 vueJS의 가장 큰 특징은 양방향 바인딩이라 생각된다. 하지만 그 양방향 바인딩의 특징이 VueJS를 사용하면서 객체 데이터나 배열 데이터를 사용하게 되면 새로운 속성 및 데이터가 추가되거나 삭제되는 것을 감지하지 못하는 경우가 자주 생긴다. 여기서 "값이 갱신되었다." 라고 요청을 하는 메서드인 Vue.set / $set 와 Vue.delete / $delete 가 존재한다. ▷ 구문 배열 : Vue.set(arr, index, value) // == this.$set(arr, index, value) 객체 : Vue.set(obj, key, value) // ==this.$set(obj, key, value) Vue.delete(obj, key) // == this.$delete(obj, key) .. 2021. 1. 23.
[VueJS] v-bind 와 v-on 약어 사용하기 vueJS에서 가장 많이 사용되는 v-bind 와 v-on 표현식에 대한 약어에 대해 알아보자. 아마 가장 많이 사용하는 표현식이라 vueJS에서도 약어를 만들어놓은게 아닐까하는 생각이든다. 예제를 통해 접해보자. ▷ 예제1) v-bind 약어 ... ... ... ▷ 예제2) v-on 약어 ... ... ... 확실히 익숙해지니까 약어가 굉장히 편리하다. 출처 : https://kr.vuejs.org/v2/guide/syntax.html#%EC%95%BD%EC%96%B4 템플릿 문법 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 2021. 1. 23.
[VueJS] 값에 따라 class 적용하기 (ft. v-bind:class , v-bind class multiple) vueJS에서 클래스 바인딩을 하는 방법에 대해 알아보자. vue를 사용하기 이전에는 스크립트로 특정 태그를 가져와 조건에 따라 클래스를 추가하고 제거하는 과정을 했다면, vueJS를 사용하게 되면 그 일련의 과정들이 매우 간결해진다. 일단 기본적인 구문은 아래와 같다. ▷ 구문 v-bind:class = {적용될 클래스명 : true/false 조건식} 이제 예제 코드를 통해 접해보자. ▷ 예제1) 데이터 값으로 클래스 적용하기 new Vue({ el: '#app', data: { isActive : true }, }); 이런식으로 true/false가 될 조건식을 데이터를 기준으로 클래스 적용이 가능하다. 굳이 boolean값이 아니더라도 true/false를 만들어낼 수 있는 조건이라면 아무거나 상.. 2021. 1. 20.
[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.
반응형
TOP