Frontend/Vue3 (13) 썸네일형 리스트형 [Vue3] Form 입력 바인딩 (v-model) 1. v-bind와 v-on을 함께 사용- v-bind를 사용하여 input 요소의 value 속성 값을 입력 값으로 사용- v-on을 사용하여 input 이벤트가 발생할 때마다 input 요소의 value 값을 별도 반응형 변수에 저장하는 핸들러를 호출 {{ inputText1 }} 2. v-model 사용 (양방향 바인딩) {{ inputText2 }} - v-model은 단순 text input 뿐만 아니라 checkbox, radio, select 등 다양한 타입의 입력 방식과 함께 사용 가능- checkbox 활용1) 단일 체크박스와 boolean 값 활용 {{ checked }}.. [Vue3] 이벤트 핸들링 (v-on) 1. Inline Handlers- 주로 간단한 상황에 사용한다.- v-on은 생략하고 @만 쓸 수 있다. Add 1 Count: {{ count }} 2. Method Handlers- Inline handlers로는 불가능한 대부분의 상황에서 사용한다.- 기본 DOM Event 객체를 자동으로 수신한다. Hello Inline Handler에서의 메서드 호출- 메서드 이름에 직접 바인딩하는 대신 Inline Handler에서 메서드를 호출할 수도 있다.- 이렇게 하면 기본 이벤트 대신 사용자 지정 인자를 전달할 수 있다. Inline Handlers에서의 event 인자에 접근하기- Inline Handlers에서 원래.. [Vue3] 동적 데이터 바인딩 (v-bind) 1. Attribute Bindings- HTML 속성 값을 Vue의 상태 속성 값과 동기화되도록 한다.- v-bind는 생략하고 : 만 쓸 수 있다. Move to url - 대괄호로 감싸서 argument에 Javascript 표현식을 사용할 수 있다.- 대괄호 안에 작성하는 이름은 반드시 소문자로만 구성 가능하다. (브라우저가 속성 이름을 소문자로 강제 변환)- Javascript 표현식에 따라 동적으로 평가된 값이 최종 argument 값으로 사용된다. Dynamic Attr 2. Class and Style Bindings- 클래스와 스타일 모두 속성이므로 v-bind를 사용하여 문자열 값을 할당할 수.. [Vue3] 템플릿 문법 1. Text Interpolation- 이중 중괄호 구문(콧수염 구문)을 사용한다.- v-once directive를 사용하면 렌더링 이후 값이 변경되어도 처음 렌더링 할 때의 값을 유지한다. Message: {{ msg }} once : {{ msg }} msg 변경 2. Raw HTML- 콧수염 구문은 데이터를 일반 데이터로 해석하기 때문에 실제 HTML을 출력하려면 v-html을 사용해야 한다. {{ rawHtml }} 3. Attribute Bindings- 콧수염 구문은 HTML 속성 내에서 사용할 수 없다.- v-bind directive를 사용하여 데이터를 HTML 태그의 속성 값과 .. [Vue3] Vite를 이용하여 Vue 프로젝트 생성하기 1. npm을 사용하기 위해 Node.js를 설치한다.https://nodejs.org/ko/ 2. cmd창을 켜고 프로젝트를 생성할 폴더로 이동한다.3. npm create vue@latest 명령어를 입력하고 프로젝트 이름과 옵션을 선택하면 프로젝트가 생성된다. 4. 프로젝트 폴더로 이동하여 code . 명령어로 vs code를 실행한다. 다음과 같이 폴더와 파일들이 생성된 것을 확인할 수 있다. 5. vs code에서 터미널을 열고 npm install 명령어로 npm을 설치한다. node_modules 폴더와 package-lock.json 파일이 추가된다. 6. npm run dev 명령어로 실행한다. 이전 1 2 다음
