본문 바로가기
반응형

VueJS/VueJS46

[VueJS] computed와 watch 속성 비교 vueJS에서 제공하는 computed와 watch 속성에 대해 알아보자. 왜 이 두가지를 동시에 다루냐면 서로 비슷한 특징을 가지고 있기도 하고, 처음 접할때도 둘을 비교하는 경우가 많았기 때문에 나 역시 같이 기록해두고자 한다. 역시 vueJS는 공식홈페이지가 너무 잘되어있기 때문에 예제를 그대로 가져와 사용해보고자 한다. 1. computed 원본 메시지: "{{ message }}" 역순으로 표시한 메시지: "{{ reversedMessage }}" var vm = new Vue({ el: '#example', data: { message: '안녕하세요' }, computed: { reversedMessage: function () { return this.message.split('').reve.. 2021. 9. 7.
[VueJS] checkbox 사용 및 활용 방법 (ft. v-model를 활용한 checkbox 사용) vueJs에서 checkbox를 사용하는 방법에 대해 알아보자. checkbox를 쓸때는 checkbox에 값을 넣어두고 체크여부에 따라 값을 가져오고는 하는데 vueJs에서는 신기하게도 값을 알아서 넣어준다. 코드를 통해 접근해보자. ▷ html mine it record check ▷ script new Vue({ el: '#app', data: { arr : [] }, methods : { checkArr : function() { console.log(this.arr); } } }); 이런식으로 구성되어있다면 어떤식으로 작동할까? 일단 화면구성은 아래와 같다. 이 상태의 화면에서 아래와 같이 몇개를 체크해보고 'check' 버튼을 눌러보자. ▶ 결과 저런식으로 v-model로 연결되어있는 배열에 .. 2021. 8. 30.
[VueJS] The "data" option should be a function that returns a per-instance value in component definitions error 자주 보는 에러는 아니지만 한번 겪은김에 기록해둔다. The "data" option should be a function that returns a per-instance value in component definitions 에러 내용을 살펴보면 대략 살펴보면 "데이터" 옵션을 함수로 선언하고 return을 통해 각 변수들을 반환하라는 의미로 보이는데 에러 뒷부분에 명시된것처럼 이 에러는 Vue.component 에서 발생하는 에러이다. Vue에서 data 옵션을 선언하는 방법과 Vue.component에서 data 옵션을 선언하는 방식에 차이가 존재하는데 즉, Vue.component에서 data 옵션을 잘못 선언했을때 발생하는 에러라는 의미이다. ▷ 에러가 발생한 코드 Vue.component('.. 2021. 6. 15.
[VueJS] 부모, 자식 간의 메소드 사용/접근하기 (ft. $parent, $refs, Inline Templates) vueJS에서 여러 component를 자식으로 두고 페이지를 구성할 때 공통으로 사용하는걸 상위 컴포넌트에 두고, 하위 컴포넌트에서 이를 사용하게 되는 방식으로 구현을 하게 되는데, 이때 상위 컴포넌트와 하위 컴포넌트 간의 메서드에 접근하는 방법에 대해 알아보자. 예제는 inline-template을 기반으로 하였으며 이 template 사용법은 3.x 버전부터는 사용이 중지된것으로 알고있다. ▷ 예제1) inline-tempate example mine it record VueJS Vue.component('mine-it', { data() { return { test : 'hi' } }, methods: { goParnet : function(){ this.$parent.goChild(); }, h.. 2021. 2. 20.
[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.
반응형
TOP

티스토리툴바