분류 전체보기38 [Vue.js] Vue Form 입력 바인딩(Form Input Bindings) Form 입력 바인딩(Form Input Bindings) 폼을 처리할 때, 값 바인딩을 수동으로 연결하고 이벤트 리스너를 변경하는 것을 v-model 디렉티브를 사용하여 단순화 할 수 있습니다. 또한 v-model은 및 요소에도 사용가능하며, 과 경우, checked 속성과 change 이벤트를 사용. 는 value를 속성으로 사용하고 change를 이벤트로 사용. # 텍스트 (Text) 텍스트 메세지 :{{ message }} # 여러 줄 텍스트 (Multiline text) 내부에 이중 중괄호 문법은 작동하지 않으므로 v-model을 사용해야 합니다. 여러 줄 텍스트 여러 줄 메세지: {{ multipleMsg }} # 체크박스 (Checkbox) 체크박스 {{ checked }} 체크된 이름: {.. 2023. 10. 26. [Vue.js] Vue 이벤트 핸들링 (Event Handling) 이벤트 핸들링 (Event Handling) # 이벤트 리스닝 v-on 디렉티브는 단축 문법으로 @ 기호를 사용, DOM 이벤트를 수신하고 트리거될 때, 사전 정의된 코드를 실행. 주요 문법은, v-on:click="handler" ( = @click="handler") # 인라인 핸들러 (Inline Handlers) 인라인 핸들러 1추가 숫자 값: {{ count }} # 메서드 핸들러 (Method Handlers) 메서드 핸들러 환영하기 # 인라인 핸들러에서 메서드 호출 메서드 이름을 직접 바인딩하는 대신, 인라인 핸들러에서 메서드를 호출 가능. (사용자 지정 인자를 메서드에 전달) 인라인 핸들러에서 메서드 호출하기 안녕이라고 말하기 잘가라고 말하기 # 인라인 핸들러에서 이벤트 객체 접근 인라.. 2023. 10. 26. [Vue.js] Vue 리스트 렌더링 (List Rendering) 리스트 렌더링 (List Rendering) # v-for v-for 디렉티브를 사용하면 배열을 리스트로 렌더링할 수 있음. item in items 형식의 문법을 사용하는데, items는 배열, item은 배열 내 반복되는 요소의 별칭. → Vue.js에서 반복문을 사용 시, :key 속성이 필수 Vue가 각 노드의 ID를 추적 및 기존 엘리먼트를 재사용, 재정렬할 수 있도록 각 항목에 대해 고유한 key 속성 필요. {{ item.message }} This is List Rendering page {{ item.title }} 또한 v-for는 현재 아이템의 인덱스를 가리키는 선택적 두 번째 별칭도 지원. {{ parentMessage }} - {{ index }} - {{ item.message.. 2023. 10. 26. [Vue.js] Vue 조건부 렌더링 (Conditional Rendering) 조건부 렌더링 (Conditional Rendering) # v-if v-if 디렉티브는 조건부로 표현식이 참인 경우 블록을 렌더링. (초기 조건이 false면 아무 작업도 실행x) Vue는 정말 멋지죠! # v-else v-else 디렉티브로 v-if에 대한 참이 아닌 경우를 렌더링. 전환 Vue는 정말 멋지죠! 아닌가요? 😢 # v-else-if v-if에 대한 "else if 블록" 역할. A B C A/B/C 아님 # v-if v-if는 단일 엘리먼트에 연결해야 하지만 둘 이상의 엘리먼트를 전환 시, 보이지 않는 래퍼 역할을 하는 엘리먼트에 v-if를 사용할 수 있음. 최종 렌더링된 결과에는 엘리먼트가 포함되지 않음. 페이지 전환 제목 1 단락 1 단락 2 제목 2 단락 1 단락 2 # v.. 2023. 10. 26. 이전 1 2 3 4 5 6 7 ··· 10 다음
