본문 바로가기

Knowledge Wiki

 (169)
Vue.js custom event 1. 부모의 데이터를 수정하려면 custom event를 써야됨 $emit() 등 2. 자식에서 $emit()을 쓰면 부모에게 메시지를 보낼 수 있다. 부모는 @ 기호로 받아서 처리하면 된다. Close 3. 자식이 부모에게 $emit()을 보낼 때 데이터도 함께 보낼 수 있다. 부모는 $event로 받아서 처리하면 된다. Close
Vue.js props 1. 데이터는 보통 App.vue 등 한 곳에서 관리하고 나머지는 가져다 씀. 2. props 사용법 1) 데이터 보내기 2) 등록 export default { Name: 'Modal', props: { onerooms: Array, // 틀려도 에러는 안뜨지만 디버깅용으로 타입 써주면 좋음 }, } 3) 사용 {{ onerooms[0].title }} 3. props로 사용할 변수들은 런타임 중 변경되면 안된다. 그래서 변하지 않는 애들만 props로 사용 가능 4. props 보낼 때 직접 자료형도 입력 가능하다.
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="자바스크립트 구문" //

티스토리툴바