본문 바로가기
728x90

v-on4

[Vue] 동적인 웹 앱을 구현할 때 자주 사용하는 디렉티브 v-if : 지정한 뷰 데이터 값의 참, 거짓 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않는다. 🚨 해당 태그를 완전히 삭제 v-for : 지정한 뷰 데이터의 개수만큼 해당 HTML 태그를 반복 출력한다. v-show : v-if와 유사하게 데이터의 진위 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않는다. 🚨 css style 효과만 display:none; 으로 주어 실제 태그는 남아 있고 화면 상으로만 보이지 않는다. ex) 🧐 코드 해석 : countDownTimer가 0 이상일때만 보여준다. 이런식으로 v-show에 조건을 주면 됨!! v-on : 화면 요소의 이벤트를 감지하여 처리할 때 사용한다. ex) v-on:click은 해당 태그의 클릭 이벤트를 감지하.. 2022. 7. 6.
[Vue] .vue 파일의 기본 구조 화면에 표시할 요소들을 정의하는 영역 ex) HTML + 뷰 데이터 바인딩 뷰 컴포넌트의 내용을 정의하는 영역 ex) template, data, methods 등 템플릿에 추가한 HTML 태그의 CSS 스타일을 정의하는 영역 v-bind + props : 상위 컴포넌트에서 하위 컴포넌트로의 데이터 전달 v-on + $emit : 하위 컴포넌트에서 상위 컴포넌트로 데이터 전달 2022. 7. 5.
[Vue] Vue 약어 🌱 v-bind 약어 ... ... v-bind: = : 단방향 바인딩 🌱 v-on 약어 ... ... v-on: = @ - 참조 : https://kr.vuejs.org/v2/guide/syntax.html 2022. 7. 4.
[Vue] Vue에 대해서 Vue {{데이터}} : 데이터를 있는 그대로 표시 v-bind : 요소의 속성을 데이터로 지정 v-model : 입력폼과 데이터의 연결 v-on : 이벤트 연결 v-if : 조건에 따라 표시 v-for : 반복해서 표시 computed : 데이터를 사용한 계산 watch : 데이터의 변화 감시 transition : 표시 / 바표시에 애니메이션 처리 component : 컴포넌트 조립 싱글 파일 컴포넌트(Single File Components) 체계 .vue 파일로 프로젝트 구조를 구성하는 방식 확장자 .vue 파일 1개는 뷰 애플리케이션을 구성하는 1개의 컴포넌트와 동일하다. 2022. 1. 24.
728x90