반응형 Vue입문16 [ VueJS 입문 ] 컴포넌트의 사용 / Intro to Components 컴포넌트(components란?) (공식사이트 - 컴포넌트) '컴포넌트는 하나의 독립된 기능을 하는 부품' https://jsfiddle.net/sunghun/th2m9ws7/77/ 샘플을 보면 여러개의 Vue인스턴스들이 동일한 형태로 반복 사용된걸 볼 수 있다. 이렇게 똑같은 인스턴스를 반복하는것은 비효율적이다. 이처럼 반복되는 사용을 피할 수 있는 방법이 바로 컴포넌트를 활하는 것이다. 즉 반복할 것을 컴포넌트로 만들어두고 필요할때 꺼내어 쓴다로 이해하자. Vue.component('태그이름', 옵션) https://jsfiddle.net/sunghun/th2m9ws7/79/ 위 내용을 살펴보자. 'Hello'는 우리가 사용할 컴포넌트의 태그명이라고 생각하고 실제 HTML 코드 상에서 태그명을 그대로.. 2019. 10. 3. [ VueJS 입문 ] 여러 인스턴스 사용하기 / Multiple Instance 여러 Vue 인스턴스 사용하기 - https://jsfiddle.net/sunghun/th2m9ws7/74/ 샘플을 보면 인스턴스 각각 vm1, vm2 라는 변수에 담았다. 그리고 vm2에는 methods에 vm1의 title을 '변경됨' 이라고 바꾸도록 하였다. 결과를 보면 첫번째 인스턴스의 vm1을 두번째 인스턴스 vm2에서 가져와 사용할 수 있는것을 확인 할 수 있다. 그리고 각 인스턴스가 아닌 다른 외부 'setTimeout' 이라는 함수에서 vm1을 3초뒤에 title값을 변경해 보았다. 이 역시 잘 작동하는걸 볼 수 있다. 즉 인스턴스간의 서로 연결하여 작업이 가능하면 인스턴스가 아닌 다른 곳의 함수에서 역시 인스턴스를 가져다가 작업이 가능하다. 2019. 10. 2. [ VueJS 입문 ] Computed VS Watch 언제써야할까? Computed VS Watch (공식사이트 - computed와 watch) 계산된 속성인 computed와 비슷한 역할을 하는 watch가 있다. 두가지의 차이점과 목적에 맞게 사용할 수 있도록 알아보자. 감시자, watch - https://jsfiddle.net/sunghun/th2m9ws7/60/ 샘플을 보면 @click 디렉티브로 count가 1씩 감소하는 내용이다. Javascript부분을 보면 watch가 존재한다. Data에 선언된 count가 watch안에도 그대로 선언되어 있다. 그래서 기존의 값과 변환한 값을 감시하는 역할을 합니다. 클릭이 되어질때마다 현재값과 변경값을 반환한다. 차이 - https://jsfiddle.net/sunghun/th2m9ws7/68/ 샘플을 보면 cou.. 2019. 10. 1. [ VueJS 입문 ] 클래스와 스타일 바인딩 클래스와 스타일 바인딩 이전에 다루었던 html속성을 바인딩 하기위한 v-bind 디렉티브를 사용할 때 class와 style을 사용해 원하는 스타일링을 할 수 있다. v-bind:class="클래스명" v-bind:class="{ 클래스명:조건 }" 위 처럼 v-bind:class는 문자열과 객체 또는 배열을 둘 다 받을 수 있다. 객체를 받은 경우 클래스명은 객체의 속성 키에, 해당 클래스가 적용되야하는 조건이 속성 값으로 들어간다. https://jsfiddle.net/sunghun/th2m9ws7/57/ 샘플의 내용을 하나씩 살펴보자. 1번 사각형 : v-bind:class가 객체를 받는 경우 태그에 v-on:click 디렉티브로 attachRed의 값을 True/False로 변경해주고 동일하게 .. 2019. 9. 30. [ VueJS 입문 ] v-for, 리스트 렌더링 / 반복문 반복 내용 처리, v-for v-for="아이템명 in array" 수많은 데이터들을 반복되는 리스트로 뿌려야한다면 그 많은 내용을 전부 일일히 적을 수는 없을 것이다. 이럴때 사용되는 v-for 디렉티브를 이용하여 반복되는 내용을 처리해보자. 우선 간단한 장볼 리스트를 만들어 샘플을 만들어 보겠다. https://jsfiddle.net/sunghun/th2m9ws7/45/ 샘플을 보면 list라는 변수에 array 형태로 장볼 리스트들을 생성하였다. 이 내용을 li 태그에 v-for 디렉티브를 사용하여 li 를 반복적으로 list의 아이템 수 만큼 반복하여 뿌려 리스트를 만들었다. v-for 내의 현재 index값 - https://jsfiddle.net/sunghun/th2m9ws7/47/ 위 리스트.. 2019. 9. 29. [ VueJS 입문 ] 조건부 렌더링 v-for / v-for vs v-show 조건부 랜더링 v-if, v-else - https://jsfiddle.net/sunghun/th2m9ws7/39/ 샘플을 보면 Vue 인스턴스내 data에 dog라는 변수에 true를 할당하였고, 현재 dog가 true라면 false를 false라면 true로 할당하는 버튼을 만들었다. 그리고 두 태그에는 v-if="dog"와 v-else 디렉티브를 설정하였다. v-if="조건상태" 그렇게 하여 처음 실행시에는 dog=true 이기 때문에 '반려동물은 강아지지!' 가 떠있고 버튼을 누르게 되면 '무슨소리, 고양이지!' 로 태그가 서로 번갈아가며 조건이 만족된 내용만 노출이 되고 있다. v-if를 갖는 template를 활용한 조건부 그룹 - https://jsfiddle.net/sunghun/th2m9.. 2019. 9. 28. [ VueJS 입문 ] 양방향 데이터 바인딩 v-model / two way binding / VueJS Directive VueJs의 꽃, 양방향 데이터 바인딩, v-model 이전까지의 내용은 Vue -> Template의 단방향 데이터 바인딩 이었다면 이제는 Vue ↔ Template의 양방향 데이터 바인딩을 보도록 하겠다. 이를 가능하게 해주는 디렉티브는 v-model이다. 폼 입력 바인딩 양방향 데이터 바인딩이 자주 사용되는 대표적 예는 폼 입력을 할 수 있는 input태그 이다. Vue 공식 사이트에도 다루고 있다. https://jsfiddle.net/sunghun/th2m9ws7/36/ 샘플을 보면 {{ name }}은 단방향데이터 바인딩으로 Vue인스턴스가 가진 정보만 보여주는 역할 이지만 input 태그의 v-model 디렉티브를 통해 Vue의 data 값을 직접 수정 할 수 있다. 2019. 9. 27. [ VueJS 입문 ] 계산된 속성 computed, computed vs methods / VueJS Instance VueJS의 자동 계산된 속성 computed - https://jsfiddle.net/sunghun/th2m9ws7/30/ 샘플은 앞에 js코드를 넣는 샘플과 동일한 결과 값이지만 소스를 보면 Vue의 computed 속성 안에 isLargerThenTen() 이라는 함수를 선언하고 count * 3 값이 10보다 작은지, 큰지를 확인하고 return하도록 했다. 그런데, computed가 아닌 methods 속성에도 동일하게 사용을 하면 같은 결과가 나오게 된다. 그렇다면 computed와 methods는 무슨 차이를 가지고 있는가? Computed VS Methods ( 공식사이트 - 계산된 속성과 감시자 ) - https://jsfiddle.net/sunghun/th2m9ws7/35/ Data 객.. 2019. 9. 26. [ VueJS 입문 ] 템플릿에 직접 JavaScript 코드 넣기 디렉티브에 js코드 넣기 - https://jsfiddle.net/sunghun/th2m9ws7/21/ 샘플을 보면 버튼을 클릭할때마다 +1씩 증가하는 샘플이다. 버튼에 v-on:click="count ++"라는 내용을 보면 기존에는 methods를 넣어야할 부분에 js코드를 직접 삽입하였다. {{ mustache }} 에 js코드 넣기 - https://jsfiddle.net/sunghun/th2m9ws7/24/ 위의 샘플과 같아보이지만 {{ count }} 부분에 *3을 추가하였다. Count는 클릭시마다 1씩 증가를 하지만 {{ mustache }} 안의 *3 으로 3의 배수로 숫자가 나타나게 된다. https://jsfiddle.net/sunghun/th2m9ws7/27/ 위 샘플은 삼항연산자와 .. 2019. 9. 25. 이전 1 2 다음 반응형
