WEB/Vue.js

👀 Vue.js 톺아보기 시리즈 👀1. 컴포넌트 등록하기(https://jimyu-s-record.tistory.com/93)2. 선언적 렌더링, reactive(), ref()(https://jimyu-s-record.tistory.com/94?category=1260912)3. Proxy 객체(https://jimyu-s-record.tistory.com/95)4. 속성 바인딩(v-bind)(https://jimyu-s-record.tistory.com/96)5. 템플릿 문법(https://jimyu-s-record.tistory.com/97)6. Event Listeners (v-on) (https://jimyu-s-record.tistory.com/98)7. Form Bindings (v-bi..

👀 Vue.js 톺아보기 시리즈 👀1. 컴포넌트 등록하기(https://jimyu-s-record.tistory.com/93)2. 선언적 렌더링, reactive(), ref()(https://jimyu-s-record.tistory.com/94?category=1260912)3. Proxy 객체(https://jimyu-s-record.tistory.com/95)4. 속성 바인딩(v-bind)(https://jimyu-s-record.tistory.com/96)5. 템플릿 문법(https://jimyu-s-record.tistory.com/97)6. Event Listeners (v-on) (https://jimyu-s-record.tistory.com/98)7. Form Bindings (v-bi..

👀 Vue.js 톺아보기 시리즈 👀1. 컴포넌트 등록하기(https://jimyu-s-record.tistory.com/93)2. 선언적 렌더링, reactive(), ref()(https://jimyu-s-record.tistory.com/94?category=1260912)3. Proxy 객체(https://jimyu-s-record.tistory.com/95)4. 속성 바인딩(v-bind)(https://jimyu-s-record.tistory.com/96)5. 템플릿 문법(https://jimyu-s-record.tistory.com/97)6. Event Listeners (v-on) (https://jimyu-s-record.tistory.com/98)7. Form Bindings (v-bi..

👀 Vue.js 톺아보기 시리즈 👀1. 컴포넌트 등록하기(https://jimyu-s-record.tistory.com/93)2. 선언적 렌더링, reactive(), ref()(https://jimyu-s-record.tistory.com/94?category=1260912)3. Proxy 객체(https://jimyu-s-record.tistory.com/95)4. 속성 바인딩(v-bind)(https://jimyu-s-record.tistory.com/96)5. 템플릿 문법(https://jimyu-s-record.tistory.com/97)6. Event Listeners (v-on) (https://jimyu-s-record.tistory.com/98)7. Form Bindings (v-bi..

👀 Vue.js 톺아보기 시리즈 👀1. 컴포넌트 등록하기(https://jimyu-s-record.tistory.com/93)2. 선언적 렌더링, reactive(), ref()(https://jimyu-s-record.tistory.com/94?category=1260912)3. Proxy 객체(https://jimyu-s-record.tistory.com/95)4. 속성 바인딩(v-bind)(https://jimyu-s-record.tistory.com/96)5. 템플릿 문법(https://jimyu-s-record.tistory.com/97)6. Event Listeners (v-on) (https://jimyu-s-record.tistory.com/98)7. Form Bindings (v-bi..

👀 Vue.js 톺아보기 시리즈 👀1. 컴포넌트 등록하기(https://jimyu-s-record.tistory.com/93)2. 선언적 렌더링, reactive(), ref()(https://jimyu-s-record.tistory.com/94?category=1260912)3. Proxy 객체(https://jimyu-s-record.tistory.com/95)4. 속성 바인딩(v-bind)(https://jimyu-s-record.tistory.com/96)5. 템플릿 문법(https://jimyu-s-record.tistory.com/97)6. Event Listeners (v-on) (https://jimyu-s-record.tistory.com/98)7. Form Bindings (v-bi..

번들링WebPack, Vite웹팩은 초기 로딩 시간이 좀 필요한 단점이 있음히든파일?=> 리눅스/맥에서는 .~~로 쓰면 파일이 안 보이는 히든파일임프로젝트 골격App.vue → 엔트리 포인트, 컴포넌트package.json ⇒. “type: module” ⇒ esmodule쓰겠다vite.config.js '@': fileURLToPath(new URL('./src', import.meta.url)) => at 의미jsconfig.json"paths": { "@/*": ["./src/*"] }package-lock.json디렉토리 아니고 그냥 파일이 파일이 package.json에 의존하고 있음App.vuescript setupimport 할 때는 파스칼 케이스만 가능사용자 정의파스칼, 케밥 케이스 모두 ..

HTML 스타일 적용 방법태그 직접 기술 ⇒ 인라인 스타일스타일 태그 ()디폴트 값 정의 (xxx.css )DOM 처리에서는 스타일 코드를 el.style.속성명 ~~~ 이런 식으로 변환Vue.js에서 HTML 스타일 적용 방법v-bind:style스타일 변경되는 경우데이터 속성에 JS 객체로 작성도 쓰긴 함(스타일이 딱히 바뀌지 않는다면)@이벤트.stop ⇒ stopPropagation@이벤트.prevent ⇒ preventEvent방법 1코드가 상대적으로 길어짐스타일 많아지면 관리에 유리(중략) data() { return { // 초기 스타일 style1: { backgroundColor: 'aqua', ..

이벤트인라인 이벤트 처리v-on 디렉티브v-on:[이벤트 이름]="표현식"@[이벤트 이름]="표현식"(이 이벤트가 발생했을 때 ~해라 라는 의미)이벤트 객체가 필요한 경우예시 ) @click="test($event)”여기서의 test 함수는 methods에 정의이벤트 핸들러 메서드인라인 이벤트 핸들러에서의 this도 vue 인스턴스 의미이벤트 객체preventDefault() : 기본 이벤트 자동 실행 금지stopPropagation() : 이벤트 전파 중단기본 이벤트@이벤트.preventevent.preventDefault() 호출 효과자주 쓰는 예시 : (e) ⇒ e.target.value 대신 currenet.target.value 해도 됨!이벤트 전파버블링 전파 차단할 때 가장 많이 쓰는 .sto..

Vue 인스턴스Vue.createApp()으로 만든 객체전체 컴포넌트 트리는 애플리케이션 인스턴스 마운트 할 때 렌더링data 옵션컴포넌트가 관리 추적 해야 할 데이터 등록할 때 사용리턴 객체가 Proxy로 래핑됨반드시 객체 리턴하는 함수로 정의(Vue3부터)계산된 속성속성 이름은 함수명HTML 템플릿 출력용 속성data: function{}이 같은 레벨에 computed 옵션에 함수 객체 등록아래에서 this.num의 this는 해당 컴포넌트의 인스턴스가 된다.this.num은 프록시 객체업데이트는 함수 내에 있는 프록시 객체에 의존하고 있는 데이터에 변화가 생기면 다시 계산된다.data() { return { num: 0, }; co..