분류 전체보기 (14) 썸네일형 리스트형 [Vue] v-model 문법: 사용자의 입력값 받기 사용자의 입력 값 받기 사용자의 입력값 받는 법 1 $event.target.value 사용하여 받기 사용자가 태그 안에 입력할 때마다 그 값을 month 변수에 저장됨 값은 모두 문자열(String) 자료형으로 저장됨 사용자의 입력값 받는 법 2 v-model 문법을 사용하여 받기 v-model 문법을 사용하기 위해서는 해당 변수를 데이터에 저장해둬야 함 (아래 코드 참조) 입력값의 자료형이 숫자면 초기값도 숫자로, 문자면 초기값도 문자로 만들어줘야함 이해를 돕기 위한 예시 data() { return { month: 1 // 자료형이 숫자면 숫자로 세팅 month: '' // 자료형이 문자면 문자로 세팅 }; [Vue] 자식 컴포넌트에서 부모 컴포넌트 데이터 변경(커스텀 이벤트 전송) 자식 컴포넌트 ▶ 부모 컴포넌트 데이터 변경 (커스텀 이벤트 전송) 부모에게 메세지를 보낼 때 자식 컴포넌트에서 $emit('작명', '전달할 데이터')를 추가하여 데이터를 변경할 수 있음 {{a.title}} {{a.price}} 원 자식 메세지를 수신할 때 $event 변수에는 자식 컴포넌트데이터가 담겨있음 @작명 = "실행시킬 코드"를 추가하여 동작시킬 수 도 있음 자식 컴포넌트에서 함수로 축약하여 보낼 때 {{a.title}} {{a.price}} 원 methods안에 함수명을 정의하고 해당 html 요소에 함수명을 입력 단 함수로 정의할 때는 this를 붙여줘야 함 [Vue 기초] 데이터 바인딩, v-for, 이벤트 리스너 추가하는 법 Vue 데이터 바인딩하는 법 ① ② Vue 컴포넌트의 'methods'안에 이벤트 처리 동작을 정의 함수명을 정의할때 methods 안에 함수명(){ 실행할 코드}를 입력하면 됨 - 정의한 데이터를 끌고와서 사용하고 싶을때는 this.데이터명 이런식으로 사용해야 함 [Vue 에러] vue : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\User\AppData\Roaming\npm\vue.ps1 파일을 로드할 수 없습니다. Vs code 터미널에서 Vue 스크립트가 실행되지 않는 현상 해당 에러 해결법 1. 윈도우 Powershell을 관리자 권한으로 실행 2. 실행한 Powershell에 아래와 같은 명령어 입력 Get-ExecutionPolicy 위의 명령어를 입력한 결과 나는 입력한 결과 Restricted로 설정되어 있었음 Restricted는 Powershell 스크립트 실행 정책중 하나이고 모든 스크립트를 비활성화되어 있는 상태임 3. 스크립트 실행 정책 변경 명령어 입력 Set-ExecutionPolicy RemoteSigned 위의 명령어를 입력하면 실행 규칙 변경 의사를 물어봄. Y 입력 이제 다시 vs code로 돌아가서 사용하면 됨. 자동 스크롤 감지 기능 : IntersectionObserver 활용 방법 IntersectionObserver 함수 물체나 요소가 화면에 보이는지 감시하고, 보이거나 숨겨질 때 특정 동작을 수행할 수 있는 JavaScript 기능입니다. 스크롤 이벤트 대신 사용되며, 웹 페이지의 성능을 향상시킵니다. - 감시요소의 가시성을 모니터링할 수 있음. - 이 함수의 이점은 타이머, 스크롤 이벤트를 사용하지 않아도 됨 (번거롭게 스크롤의 높이, 작동 시간 이런 걸 계산하고 구하지 않아도 됨) observe observe메서드는 IntersectionObserver안에 감시하고자 하는 대상을 등록하는 용도로 사용됨 - 감시요소가 화면에 들어올 때나 나갈 때를 감지 observer.observe(감시요소); // 감시 대상 요소 등록 var box1 = document.getElement.. [Swiper.js] 다양한 멋진 캐러셀을 구현하는 JavaScript 라이브러리 Swiper.js란? Swiper.js는 다양한 종류의 캐러셀 기능을 구현하는데 도움을 주는 JavaScript 라이브러리입니다 이 라이브러리를 사용하면 다양한 종류의 멋진 캐러셀, 슬라이드를 쉽게 만들 수 있습니다 Swiper.js CDN 연결 ~ 기본 설정까지 Swiper.js에 들어가서 Swiper.js 라이브러리를 다운로드합니다 해당 웹 사이트에 접속했으면 "Download" 또는 "Get Started"를 클릭 Swiper.js CDN 불러오기 Swiper의 기본 레이아웃을 추가 Slide 1 Slide 2 Slide 3 ... Swiper의 기본 CSS 적용 .swiper { width: 600px; height: 300px; } Swiper의 기본 Js 연결 const swiper = new.. [Vue.js] props를 사용한 부모-자식 컴포넌트 통신법 props 간략 설명 props는 Vue에서 부모 컴포넌트에서 자식 컴포넌트로 데이터 전달을 하기 위해 사용되는 문법임 자식 컴포넌트에 데이터를 전송하면 자식 컴포넌트에서 해당 데이터를 사용할 수 있게 됨 Vue.js 데이터 전송 : 부모 -> 자식(props) 사용법 부모 컴포넌트 -> 자식 컴포넌트 데이터 전송을 위한 props 3스텝 ① 보내고 (export) ② 등록하고 (import) ③ 쓰면 됨 ① 부모 컴포넌트 // Vue.app // 태그:작명 = "하단의 데이터 이름" ② 자식 컴포넌트 // Card.vue export default { name : 'cardComponent', props : { productsData : Array, // 작명한 데이터명 : 자료형 } } props에 .. 컴포넌트 import error vue/multi-word-component-names 해결법 error Component name "Discount" should always be multi-word 이 오류는 Vue.js의 vue/multi-word-component-names 규칙을 위반해서 나오는 에러임 해결법은 간단합니다. 컴포넌트 이름을 수정하면 오류를 수정할 수 있습니다 // 에러 문구 error Component name "Discount" should always be multi-word vue/multi-word-component-names // 이전 컴포넌트 이름 name: 'Discount', // 수정된 컴포넌트 이름 (예시) name: 'DiscountCalculator', 생성한 컴포넌트 파일에서: Discount > DiscountCalculator로 수정 안의 nam.. 이전 1 2 다음
