반응형 즐거움 넘치는 IT 세계/코드로 만드는 디자인69 [ 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. [ 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. 이전 1 2 3 4 5 6 7 8 다음 반응형
