vue.js
-
[vue.js] v-forvue.js 2019. 7. 3. 18:53
1. 리스트 렌더링과 v-for v-for 디렉티브를 사용하여 배열을 기반으로 리스트 렌더링을 할 수 있다. 이 디렉티브는 item in array 형태의 특수 구문을 필요로 한다. 이 구문에서 array는 원본 데이터 배열이고, item은 순회되는 배열의 엘리먼트의 별칭이다. 2. 범위를 가진 v-for v-for 디렉티브는 객체나 배열이 아닌 정수를 받을 수 있다. 이때 정수가 전달되면 템플릿이 지정된 수만큼 반복한다. 은 item in array 형태로 작성된 것이다. array에 배열이 아닌 정수가 들어간것. 즉 li태그가 11번 반복 될 것이다. 저 상태에서 그냥 i 만 찍어보면 ( {{ i }} ) 저 상태에서 그냥 i -1을 하면 다음과 같이 나오고 나는 2 x {{ i - 1 }} = {{..
-
[vue.js] v-show, v-if, v-elsevue.js 2019. 7. 3. 18:47
1. 조건부 렌더링 조건부 렌더링이란 조건에 따라 다르게 렌더링 할 수 있는 것을 말하며, v-show, v-if, v-else, v-else-if 가 있다. 2. v-show v-show는 조건 상태값에 따라 결과값이 보이고 보이지 않게 된다.. 즉 display의 css 속성을 토글해 보여주거나 감추는 것이다. v-show="조건상태" 이렇게 쓸 수 있다. 예를 들어 어떤 글자가 꼭 입력이 되야만 생성되는 버튼을 만든다고 한다면 다음과 같이 v-show 디렉티브를 이용해 만들 수 있다. 저번에 포스팅했던 v-model 을 이용해 textarea를 message 변수와 바인딩 해서 메세지를 표시한다. 그리고 button에 v-show="조건상태" 를 입력하여 textarea에 글이 있으면 버튼이 보이게..
-
[vue.js] v-modelvue.js 2019. 7. 3. 18:36
1. v-model v-model 디렉티브는 양방향 데이터 바인딩을 통해 예를들어 사용자가 입력한 엘레멘트 안의 내용을 벼경할 때 메세지 값을 동적을 변경해준다. 화면을 띄우면 이렇게 내가 데이터 객체에 message의 속성값으로 적은 문자가 나온다. 이때 내가 input창에 다른것을 입력한다면 h1태그의 메세지도 똑같이 바뀌는 것을 볼 수 있다. input창 내용을 지우면 지우는대로 바꾸면 바꾸는 대로 h1태그의 내용도 바뀐다. 이것이 양방향 데이터 바인딩이며, 양방향 데이터 바인딩은 뷰에서 모델의 값을 변경하면 모든 것이 최신으로 유지되는 것을 의미한다. 2. 만약 이것을 jQuery로 한다면? 입력 엘리먼트를 만들고 id 나 class를 지정하여 원하는 엘리먼트 입력값과 일치하도록 변경하는 함수를 ..
-
[vue.js] Mustache(이중중괄호), v-bindvue.js 2019. 7. 3. 18:32
1. Mustache 구문 - 이중 중괄호 데이터 바인딩의 가장 기본 형태는 'Mustache' 구문 (이중 중괄호)을 사용한 텍스트 보간이다. 화면에 문자열을 출력하는 간단한 경우에 쓰인다. 화면에서는 다음과 같이 나온다. Mustache 태그는 해당 데이터 객체의 msg 속성 값으로 대체된다. 또한 msg 의 속성이 변경될 때마다 갱신된다. 즉 내가 msg: 고친다. 라고 한다면 화면에 이렇게 변경된 msg의 값이 나온다. 2. 디렉티브 화면에 문자열을 출력하는 간단한 경우에는 {{ }} 이중중괄호를 쓰면 되지만, 만약 html 속성 내에서 vue 내에 선언된 값을 사용하고 싶어진다면? 그때는 v-bind 라는 디렉티브를 쓰면 되는데, 이때 디렉티브란 v- 접두사가 있는 특수 속성을 말하며 여러가지 ..
-
vue.js 란?vue.js 2019. 7. 3. 18:23
vue.js 란? vue.js 란 프런트엔드 웹 프레임워크다. 프레임워크는 건축을 할 때 뼈대를 두고 살을 붙이는 작업이라기 보다는 건축을 할 때 필요한 재료들(이미 재단이 되어있는 재료들)을 제공을 해주어서, 우리가 그것들을 가지고 이리저리 합치고 뭉치고 해서 건물을 만드는 것이라고 한다. - vue.js 는 구글에서 일하던 에번 유가 개발했는데, 구글에서는 AngularJS 라는 프레임워크를 이미 개발한 상태였다. 이미 AngularJS 가 있음에도 vue.js 를 개발한 이유는 다음과 같은 이유여서이다. 1. AngularJS 는 배우기 쉬운 프레임워크가 아니다. 2. AngularJS 는 양방향 데이터 바인딩 기능을 사용하는 싱글 페이지 어플리케이션 개발인데, 작성해야하는 프로그램의 크기가 거지기..