본문 바로가기
반응형

VueJS57

[VueJS] v-cloak : 렌더링 되기 전 {{ }}(머스태쉬 태그) 숨기기 vueJS에서 제공해주는 v-cloak 디렉티브에 대해 알아보자. vueJS를 사용하자마자 눈에 거슬리는게 있는데, 이게 바로 머스태쉬 태그{{}} 이다. script 코드가 아직 실행되기 전이여서 값이 바인딩 되기 전에 깜빡이며 잠깐 보이는건데 이게 매우 거슬린다. 이럴때 사용하는게 v-cloak 디렉티브이다. v-cloak 디렉티브를 사용하여 렌더링되어 바인딩 되기 전에 {{}}태그를 숨길 수 있다. 예제 코드를 통해 사용방법에 대해 알아보고 vueJS를 사용하면서 거슬렸던 깜빡임을 제거해보자. ▷ 예제1) v-cloak 디렉티브 기본 사용법 메시지: "{{ message }}" var vm = new Vue({ el: '#example', data: { message: '안녕하세요' }, }) 이렇.. 2021. 11. 11.
[VueJS] v-once : 정적 콘텐츠 지정, 정적 디렉티브 vueJS의 기본 디렉티브 중 하나인 v-once에 대해 알아보자. 제목처럼 v-once가 정적 디렉티브라 불리는 이유는 처음 한번만 렌더링을 수행하며, 그 이후 데이터가 변경되어도 그대로 유지되기 때문이다. 즉, 처음 렌더링 된 후 캐싱되도록 지정한다고 생각하면된다. 이러한 특성을 사용하여 정적 콘텐츠를 지정할 수 있다. 예제를 통해 실제 어떻게 적용되는지 알아보도록 하자. ▷ 예제1) v-once 기본 사용법 유지 메시지: "{{ message }}" 변경 메시지: "{{ message }}" 내 블로그는 mine-it-record야 var vm = new Vue({ el: '#example', data: { message: '안녕하세요' }, methods : { change : function().. 2021. 11. 11.
[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.
반응형
TOP

티스토리툴바