일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- leetcode
- greedy
- 자료형
- 백준
- java
- hash table
- 코딩테스트
- 변수
- computed
- sorting
- JavaSceipt
- array
- string
- CSS
- 컴포넌트
- Python
- HTML
- JavaScript
- vue.js
- Algorithm
- 자료구조
- JS
- github
- scss
- 알고리즘
- 파이썬
- dynamic programming
- SasS
- math
- 프로그래머스
- Today
- Total
목록Vue.js (20)
Posis
이번 포스트에서는 리스트 렌더링 v-for에 대해서 다뤄보겠습니다. v-for v-for 디렉티브를 사용하여 배열을 기반으로 리스트를 렌더링 할 수 있습니다. {{ framework }} v-for 디렉티브는 item in items 형태로 특별한 문법이 필요합니다. 여기서 items는 원본 데이터 배열이고 item은 반복되는 배열 엘리먼트의 별칭입니다. 또한 v-for를 사용할 때는 :key 속성을 사용해야 합니다. :key key는 Vue가 노드를 식별하는 일반적인 메커니즘이기 때문에 v-for와 특별히 연관되지 않는 다른 용도로도 사용됩니다. v-for의 index v-for 디렉티브는 item in items에서 (item, index) in items 형태로 작성한다면 다음과 같이 나타납니다. ..
이번 포스트에서는 Vue.js에 조건부 렌더링, v-if와 v-show에 대해서 알아보겠습니다. v-if v-if 디렉티브는 조건에 따라 블록을 렌더링 할 때 사용합니다. 블록은 디렉티브의 표현식이 true 값을 반환할 때만 렌더링 됩니다. Click Hello Vue.js!! isShow는 true이고 Click 버튼을 클릭하면 true와 false가 매번 바뀌는 예제입니다. 첫 화면에는 isShow가 true이기 때문에 DOM에 나왔고 클릭 후에는 h1태그가 으로 변환됩니다. v-else v-if에서 조건이 맞지 않는다면 v-else가 있는 태그가 DOM에 표시됩니다. Click Hello Vue.js!! Goodbye Vue.js!! // 생략 isShow가 true일 때 'Hello Vue.js!..
이번 포스팅에서는 간단하게 v-bind와 v-on의 약어를 소개하겠습니다. v-bind v-bind는 데이터를 바인딩시킬 때 사용합니다. Hello Vue.js!! 위와 같이 fontColor의 데이터를 바인딩할 때 사용합니다. 하지만 매번 v-bind를 작성하면 개발 속도가 늦춰질 수 있기 때문에 다음과 같은 약어를 제공합니다. Hello Vue.js!! // 생략 속성 앞에 콜론(:)만 붙여주면 사용가능합니다. v-bind는 다양한 곳에 사용할 수 있습니다. class, href 등등 v-on v-on은 메소드내에 이벤트를 바인딩 시길 때 사용합니다. {{ msg }} 이번에는 add라는 메서드를 바인딩했습니다. 이도 위와 같이 약어를 사용해 보겠습니다. {{ msg }} // 생략 속성 앞에 골뱅이..
클래스와 스타일 바인딩 데이터 바인딩의 일반적인 요구사항은 엘리먼트의 클래스 목록과 인라인 스타일을 조작하는 것입니다. 클래스와 스타일 모두 속성이므로, v-bind를 사용하여 처리할 수 있습니다. 사용방법 Hello Vue.js!(isActive = {{ isActive }}) Hello Vue.js!(isActive = {{ isActive }}) class를 사용해 style을 넣을 때 보통은 class = 'style'의 형식으로 작성합니다. Vue.js에서는 v-bind:class(약어 -> :class)를 활용해서 객체를 전달하여 클래스를 동적으로 전환할 수 있습니다. 위 코드는 active 클래스는 isActive의 진실성에 의해 결정되는 구문입니다. isActive의 값이 처음에는 fals..
Getter 위 예제는 reverseMsg는 computed에서 만들어놓은 Readonly전용 함수입니다. 개발자가 직접적으로 msg의 data를 변경하지 않는다면 캐싱된 data를 얻어올 수만 있는 상황입니다. 하지만 vue.js문법을 통해서 setter를 통해서 값을 지정해서 변경시킬 수 있습니다. Setter reversedMsg메서드의 set은 직접적으로 값을 할당할 때 사용됩니다. 제가 콘솔에 쪽에 찍힌 거와 같이 메서드 실행 순서는 화면이 렌더 될 때 get()이 실행되고 캐싱되어서 화면에 나옵니다. 그 이후 버튼을 클릭하면 add() -> set(value) -> get()가 실행되는 것을 알 수 있습니다. 이를 통해서 computed에서도 setter(즉, 값을 지정)를 사용할 수 있다는 ..
이번 포스팅에서는 computed에 대해서 알아보겠습니다. computed 연결된 data의 값이 변경되었을 때, 복잡한 계산식을 계산해서 값을 캐싱해서 return 해주는 속성입니다. 캐싱 값을 계산하여 잠시 동안 저장해두는 것을 의미합니다. {{ msg }} 문자열 뒤집기 {{ reverseString }} 위 예제 코드는 'Hello Vue.js!!' 문자열을 뒤집어주는 코드입니다. 함수를 살펴보면 reverseString()은 msg의 문자열을 뒤집어주는 역할, changeMsg()는 isDone의 boolean값을 바꿔주기만 한다. 예제 코드를 실행하면 나오는 첫 화면입니다. 여기서 문자열 뒤집기 버튼을 클릭하면 'Hello Vue.js!!'가 뒤집어진 문자열이 화면에 나타나게 됩니다. 이때 콘..