이젠 서론 쓸 시간도 없다! 바로 본론!v-if: 조건부 렌더링을 수행하는 directive : 표현식 값의 true/false를 기반으로 요소를 렌더링: django html에서 클라이언트의 상태와 요청에 의한 출력 화면과 유사 위처럼 정의했을 때, 클릭할 때마다 isSeen은 !isSeen에 의해 true는 false로, false는 true로 바뀌는 반응형 변수를 활용할 수 있으며, p tag 내부에 v-if와 v-else의 조건에 의해 html에 보이는 화면이 바뀐다. if와 else가 있다면 짝궁인 else-if도 있다. 반응형 변수에 random함수를 입혀준다면 호출 시, 랜덤하게 출력되는 모습도 확인할 수 있다.그렇다면 모든 tag에 v-if를 입혀주어야 할까? 물론 아니다. 전체를 감싸고있..
저번엔 Attribute 속성을 추가하는 것을 배웠다. 동일하게 Class와 Style 속성을 Binding 하는 것을 배울 것인데, 속성으로 다루지 않고 나눈 이유는 반응성 Web에서 가장 많이 다루는 속성이기 때문이다. 예를들어, 클릭했을때 새로운 Attr가 생기는 것 보다는 bootstrap의 class 추가 혹은 style의 추가로 반응을 띌 수 있다. front에서 중요한 부분이니 집중해보자!v-bindClass and Style Bindings: class와 style은 모두 HTML 속성이므로 다른 속성과 마찬가지로 v-bind를 사용하여 동적으로 문자열 값을 할당할 수 있다: Vue에서 class 및 style 속성 값을 v-bind로 이용할때 객체 or 배열을 활용하여 on / off 혹..
오늘은 간단하게 Directive의 기본 형태와 어떤 종류가 있는지에 대해 살펴볼 예정이다. 굳이 나눈 이유는... 그만큼 세부사항이 중요하기 때문에 나눠 다루려고 한다. 가보자고Template Syntax: DOM을 기본 구성 요소 인스턴스의 데이터에 선언적으로 바인딩(연결) 할 수 있는 HTML 기반 템플릿 구문을 사용 Text Interpolation: 데이터 바인딩의 가장 기본적인 형태 ( Mustache syntax : 콧수염 구문 ): 다른 언어에서도 많이 사용하는 형태로, 해당 구성 요소 인스턴스의 속성 값으로 대체한다Raw HTML: 변수나 함수를 호출하는 것이 아니라 HTML 자체를 호출 할 수 있는 방법: 콧수염 구문은 데이터를 일반 텍스트로 해석하기 때문에 v-html을 이용하여 ht..
- Total
- Today
- Yesterday
- baby-gin
- 중복순열
- dfs
- vue
- Django
- Authentication System
- ChatGPT
- 함수
- CRUD
- restapi
- Serializer
- views.py
- basic syntax
- HTML
- Python
- Database
- Method
- JavaScript
- 백준
- 순열
- app
- 카운팅정렬
- 연산자
- SQLite
- Python3
- SQL
- Sequence types
- CodeTree
- vue3
- 재귀
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |