[VueJS] component
[VueJS] component 동일한 포맷이 반복되는 템플릿의 경우 기존의 html 코드로 표현하면 그 포맷의 갯수만큼 코드길이가 늘어났다. 하지만 VueJS에서는 이를 Component를 통해 관리할 수 있다. Vue.component 함수를 통해 컴포넌트를 생성하고, 첫번째 인자로 컴포넌트 이름, 두번째 인자로는 템플릿에 사용될 변수값을 props, 틀을 template 이라는 속성 값으로 하는 객체를 넣어주면 됩니다. 중요한 점은 template에 선언되는 html 틀의 경우 VueJS 기본 기능들이 모두 동일하게 동작하기 때문에 편리하게 사용 가능하다는 점입니다.
[VueJS] method & event handling
[VueJS] method & event handling method 메소드는 특정 객체에 포함되어 동작한다. VueJS에서는 메소드 선언을 Vue 객체에 methods 라는 어트리뷰트를 선언함으로써 생성 가능합니다. 주의할점이 하나 있는데, VueJS 에서 메소드선언에서는 arrow function이 사용되면 안됩니다. 그 이유는 methods 영역에 arrow function 선언시 this 바인딩이 안되므로, data()함수에 정의된 변수값에 접근이 불가능 하기 때문입니다. 위와같이 작성시 원하는대로 동작하지 않음 제대로 동작하는 코드 event handling 더하기 {{ counter }} 위와같은 click 이벤트 생성시 v-on:click이후 영역은 javascript 코드 영역이므로, 연사..
[VueJS] list
[VueJS] list v-for VueJS 데이터에는 리스트형태의 데이터를 담을 수 있습니다. 또한 이를 html 에서 순회시키기 위한 v-for 어트리뷰트를 지원합니다. {{ item.id }} v-bind & :attribute VueJS에서는 태그와 어트리뷰트에 변수값을 대입시키기 위해 v-bind 혹은 :어트리뷰트명 표현식을 활용합니다. {{ item.id }} template 태그 for loop를 각각의 태그속에서 동작시키고 싶을때에는 template 태그를 활용하면 됩니다. {{ item.id }} 동적으로 List 추가 외부 플러그인 없이 동적으로 새로운 list를 구현하기 위해서는 자바스크립트 코드를 통해 DOM을 구현하고 그에 맞는 텍스트를 직접 스트링형태로 추가하고 append 해주..
[VueJS] data binding
[VueJS] data binding Vue는 script 형태의 import만으로 동작 가능하다. cdn주소를 통해서 import 한 후, Vue 객체를 생성하고, el(엘리먼트) 어트리뷰트값에 DOM 셀렉터를 매칭시켜주면 사용할 수 있습니다. data() & v-model data() 함수의 리턴 블록내에 인스턴스내부에서 사용할 데이터를 정의할 수 있습니다. 또한, 이를 태그 내의 v-model 이라는 어트리뷰트를 설정함으로써 동기화 시킬 수 있습니다. 로그인 {{ data }} 중괄호를 활용함으로써 데이터 값을 html 상에 출력할 수 있습니다. 아이디 : {{ userId }} 비밀번호 : {{ userPassword }} 이러한 식의 표현방법은 데이터값이 변경될때마다 동적으로 변경되기 때문에, ..
Javascript 기초 - 1배열lengthvar arr = [1,2,3,4]; arr.length; // 4배열 길이를 알려줌joinvar arr = [1,2,3]; arr.join(); // "1,2,3" (default) arr.join(':'); // "1:2:3"concatvar arr = [1,2,3]; arr = arr.concat(4,5); // [1,2,3,4,5] arr.concat([6,7]); // [1,2,3,4,5,6,7]reversevar arr = [1,2,3,4]; arr.reverse(); // [4,3,2,1]push, popvar arr = [1,2,3]; arr.push(4); // 4 arr; // [1,2,3,4] arr.pop(); // 4unshift, sh..