본문 바로가기

분류 전체보기

 (596)
Vue.js 컴포넌트 1. HTML 길어지면 컴포넌트화해서 사용하면 좋음 2. 컴포넌트 가져다 쓰는 3 Step 1) import import Discount from './components/Discount.vue'; 2) 등록 export default { name: "App", data() { return { }; }, components: { Discount, // Discount : Discount 로 해도 됨 }, }; 3) 사용 태그 안에서 사용 3. 컴포넌트 쓰는 이유 1) 가독성이 좋음 2) 재사용이 쉬움 4. 컴포넌트는 자주 반복되는 애들만 만들자 컴포넌트를 너무 많이 쓰면 데이터 넣을 때 좀 힘듦.. 5. 컴포넌트 사용시 데이터를 넘겨줘야하는 부분은 데이터를 props로 전달해주자 props는 부모가 가진..
Vue.js if문 1. Vue에도 당연히 if가 있다. ex) 2. v-if, v-else-if, v-else Hello World 1 Hello World 2 Hello World 3
Vue.js import, export 1. 상품 데이터 등이 너무 큰 경우, 따로 파일로 관리할 수 있다. 그리고 이 파일을 import 하면 됨 2. import 방법은 2가지 있음 1) 데이터 파일에서 변수 하나 선언하고 export // 데이터 파일 쪽(data.js) var apple = 10; export default apple // 사용하는 쪽(App.vue) import apple from './assets/data.js' 아래처럼 변수명이 달라져도 됨 import importedApple from './assets/data.js' 2) 데이터 파일에서 변수가 여러개일 경우 export // 데이터 파일 쪽(data.js) var apple1 = 10; var apple2 = 10; export { apple1, apple2 ..
Vue.js 모달창 1. 모달창은 미리 만들어두고 보여줬다 안보여줬다 하는거다. 모달창은 그냥 state 변수 하나 두고 if문으로 보여줬다 안보여줬다 하면 됨. state 변수 값 변경은 버튼의 click 등으로 구현하면 됨.
Vue.js 관례 1. 이미지 등은 관례적으로 assets 폴더에 넣어 둔다.
Vue.js 이벤트 핸들러 1. Vue에도 당연히 이벤트 핸들러가 있다. ex1) v-on:click="자바스크립트 구문" ex2) @click="자바스크립트 구문" //
Vue.js for문 1. Vue에도 당연히 for가 있다. n번 순회 ex) Home 리스트 순회 ex) {{ product }} 인덱스 포함 순회 ex) {{ product }}
Vue.js 데이터 바인딩 1. 데이터 바인딩 쉬움 데이터 담는 변수 만들고 {{ 데이터바인딩 객체 }} 이렇게 선언하면 끝남. 2. 데이터 바인딩 하는 이유 1) HTML에 하드코딩 해놓으면 나중에 변경 어려움 2) Vue의 실시간 자동 렌더링 쓰려면 필요 3. HTML 속성도 데이터 바인딩 가능... 이때는 속성 앞에 ':' 이거 붙여줘야 함. Vue 문법임. ex) 4. style 속성 데이터바인딩 5. 클래스명 데이터 바인딩 + 기존 클래스명 사용법 예시 filter는 데이터 바인딩 filter-item 은 기존 클래스명

티스토리툴바