vue.js7 [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 클래스와 스타일 바인딩 (Class and Style Bindings) Vue 클래스와 스타일 바인딩 (Class and Style Bindings) Vue.js에서 클래스와 스타일 바인딩은 HTML 요소의 클래스 및 인라인 스타일을 동적으로 조작할 수 있는 기능을 제공하여 데이터 상태에 따라 요소의 모양 및 스타일을 변경할 수 있음. (다른 속성과 마찬가지로 v-bind를 사용하여 동적 할당) # HTML 클래스 바인딩 객체 바인딩 클래스를 동적으로 객체를 :class( = v-bind:class)에 전달. Class Style Binding page 배열 바인딩 :class를 배열로 바인딩하여 클래스 목록을 작성할 수 있음. 2023. 10. 26. 이전 1 2 다음
