반응형 분류 전체보기163 [ jquery 기초 ] jquery Filter - 기본 필터(Basic Filter) | Filter를 이용한 개체 접근 형식(표현식) 설명 :animated 애니메이션이 동작중인 모든 요소와 일치하는 요소를 반환합니다. :eq(index) Index에 해당하는 요소를 반환합니다.(단일요소) :even 짝수의 요소를 반환합니다. (0부터 시작) :odd 홀수의 요소를 반환합니다. (0부터 시작) :first 첫번째 요소를 반환합니다. :last 마지막 요소를 반환합니다. :gt(index) Index 보다 높은 Index에 해당되는 요소를 모두 반환합니다. :lt(index) Index 보다 낮은 Index에 해당되는 요소를 모두 반환합니다. :header 모든 헤더 요소들을 반환합니다.(h1,h2,h3….) :not(selector) Selector와 일치되는 요소를 제외한 나머지 요소.. 2019. 10. 3. [ 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. [ jquery 기초 ] jquery - DOM 계층을 이용한 요소 접근 | DOM 이란? HTML 트리 구조를 통해 클라이언트 영역에서 재조합 기능을 제공하여 사용자와 상호 작용을 하는 구조적인 모델, 즉 트리구조내에서 객체에 개별 접근하는 방법을 말한다. HTML은 트리 구조로 자신,부모,조상,자식,후손 등에 쉽게 접근이 가능하다. | DOM의 구조 출처: | 계층 접근 셀렉터 종류 형식(셀렉터) 셀렉터 표현식 Child Selector $(“parent > child”) Descendant Selector $(“ancestor descendant”) Next Adjacent Selector $(“prev + next”) Next Siblings Selector $(“prev ~ siblings”) | Child Selector : $("Parent > Child") 부모.. 2019. 10. 2. [ 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. [ jquery 기초 ] jquery Chain | Chain 이란? jQuery의 메소드들은 반환값으로 자기 자신을 반환해야 한다는 규칙을 가지고 있다. 이를 이용하면 한번 선택한 대상에 대해서 연속적인 제어를 할 수 있다. jQuery 예제 코드를 보면 태그가 하나 있고 a태그에 href 속성과 target 속성을 jQuery를 이용해 변경하려고 합니다. 해당 소스를 실행해 보면 실행된 코드는 jQuery를 이용해 변경된 내용으로 출력된 것을 볼 수 있습니다. 즉, 여기서 보듯 .attr셀렉터를 이용해 연결연결하여 연속적으로 제어를 하고 있습니다. 이 구조가 Chain 이라고 할 수 있습니다. 1. Chain의 장점 코드가 간결해진다. 인간의 언어와 유사해서 사고의 자연스러운 과정과 일치한다. 2. 탐색(traversing) Chain의 대상을 바.. 2019. 10. 1. [ 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. 이전 1 2 3 4 5 6 7 8 ··· 19 다음 반응형
