희락코딩

costom event 문법 리엑트에선 자식컴포넌트가 부모 컴포넌트에 영향을 주기 위해 상태끌어 올리기를 하여 약간 복잡하게 느껴집니다. 하지만 뷰는 커스텀 이벤트를 활용해서 엄청 간단하게 데이터를 변경 할 수 있습니다. 1. 자식은 $emit(작명,전달할데이터) 위와같이 자식 컴포넌트에서 부모에게 자료를 전달할 수 있습니다. $emit은 뷰가 제공하는 특별한 함수인데 부모컴포넌트에게 부탁하는 함수라고 생각하면 좋습니다. 전문용어로 커스텀 이벤트 전송이라고 합니다. 간단한 예시는 아래와 같습니다. {{data.title}} 2. 부모는 @작명="데이터변경코드" 위와 같이 하면 아까 1번에서 자식이 요청한 $emit을 전달받아 원하는 데이터를 변경 할 수 있도록 도와 줍니다. 커스텀 이벤트로 부모에게 자료..

컴포넌트 만들기 뷰에서 컴포넌트 만드는 방법은 엄청 간단합니다. 간단한 규칙만 알면 쉽게 만들수 있습니다. 1. 컴포넌트 뷰파일 만들기 우선 파일을 하나 만들고 < 엔터를 클릭하면 뷰 파일 형식이 자동으로 나옵니다. // 컴포넌트 파일 축약할 html 2. import하고 등록하고 사용하기 우선 전에 만들었던 컴포넌트 파일을 import하고 스크립트에서 컴포넌트 파일을 등록한다음 사용하면 됩니다. // 3. 사용하기 // 1. import import 작명 from &#39;컴포넌트 만든 경로&#39; export default { name: &#39;App&#39;, data(){ }, }, //2. 컴포넌트 등록하기 components: { 작명 : 작명, } }

컴포넌트 만들기 뷰에서 컴포넌트 만드는 방법은 엄청 간단합니다. 간단한 규칙만 알면 쉽게 만들수 있습니다. 1. 컴포넌트 뷰파일 만들기 우선 파일을 하나 만들고 < 엔터를 클릭하면 뷰 파일 형식이 자동으로 나옵니다. // 컴포넌트 파일 축약할 html 2. import하고 등록하고 사용하기 우선 전에 만들었던 컴포넌트 파일을 import하고 스크립트에서 컴포넌트 파일을 등록한다음 사용하면 됩니다. // 3. 사용하기 // 1. import import 작명 from &#39;컴포넌트 만든 경로&#39; export default { name: &#39;App&#39;, data(){ }, }, //2. 컴포넌트 등록하기 components: { 작명 : 작명, } }

export default / import 문법 어떤 데이터 자료를 다른 js파일에서 사용하고 싶은 경우 export와 import 문법을 사용합니다. 예를 들어 data.js에 있는 변수를 app.vue에서 쓰고 싶을 경우 아래와 같습니다. // data.js const teemo = [&#39;버섯&#39;,&#39;화살촉&#39;] export default teemoDate // App.vue import 작명 from &#39;./data.js파일경로&#39; 만약 export 할게 많으면 구조분해 할당을 사용해서 받아올수 있습니다. // data.js const teemo = [&#39;버섯&#39;,&#39;화살촉&#39;] const joycoding = [&#39;지옥&#39;,&#39;..

vue v-if를 활용한 모달창 우선 뷰에서 모달창을 만드는 기본적인 스텝이 있다. 첫번째는 현재 HTML UI의 상태를 데이터로 저장합니다.(지금 보이는지 안보이는지) 그다음 그 상태에 따라 HTML UI를 보여줄지 말지를 Vue 문법으로 작성하면 된다. 1. 현 모달창의 상태를 데이터로 저장한다. data(){ return { isModal : false, } }, 2. 데이터 상태에 따라 UI를 보여줄지 말지 뷰 문법으로 작성. 상세페이지임 상세페이지 내용임 닫기 html태그 안에서 v-if="조건식" 을 사용 하면 됩니다. /* 모달 css */ body { margin : 0 } div { box-sizing: border-box; } .black-bg { width: 100%; height: ..

vue 이벤트 헨들러 자바스크립트에서는 어떤 이벤트 헨들러 함수를 쓸때 식으로 자바스크립트를 넣습니다. 하지만 뷰에서는 @click="" 이걸 넣으면 됩니다. //...생략 {{products[i]}} {{ price[i] }} 만원 좋아요! 좋아여 :{{like[i]}} //...생략 // 데이터 보관함 data(){ return { like : [0,0,0], products : [&#39;강아지&#39;,&#39;고양이&#39;,&#39;악어&#39;], price :[&#39;50&#39;,&#39;40&#39;,&#39;70&#39;] } }, @click 말고도 @mouseover, @input 등 다양한 이벤트 함수들이 존재합니다. 함수를 만들어서 사용 가능 뷰에서는 함수를 만들어서 데이터 ..

v-for HTML 반복문1 vue는 반복문이 엄청 간단하고 편리하게 사용 할 수있습니다. 기본적인 문법은 아래와 같습니다. 아무거나 첫번째는 원하는 태그에 v-for="작명 in 반복횟수" 를 적습니다. 그리고 제일 중요한 :key 속성은 반복문을 돌릴 때 꼭 필요합니다. 반복한 요소들을 각각 구분짓기 위한 속성이기 때문입니다. 안적으면 에러가 생깁니다. v-for HTML 반복문2 반복문을 사용할 때 array, object데이터를 집어 넣을수도 있습니다. //...생략 data(){ return { menu : [&#39;hello&#39;,&#39;joycoding&#39;,&#39;teemo&#39;] } } 예를 들어 위와 같이 데이터에 메뉴 객체가 있다고 가정했을 때 아래와 같이 반복을 표현..

vue의 데이터 바인딩 문법 뷰는 데이터 보관이 용의하고 보관한 데이터를 {{데이터}} 문법으로 감싸서 넣으면 끝이다. 아래는 뷰의 기본적인 틀입니다. template에서는 HTML코드들을 작성하면 되고 자바스크립트는 script 스타일은 style에서 코드를 작성하면 됩니다. 중요 포인트 데이터 보관함은 아래와 같고 object 형식으로 저장하면 된다. 즉 스크립트 태그 안에 data(){return{}} 이걸 열고 데이터를 오브잭트 형식으로 저장하면 됩니다. 이것이 뷰의 데이터 보관함, 변수보관함이 됩니다. 아래 예를 들어 데이터 보관함에 price 정보를 넣었다고 가정하고 {{price}}를 활용해서 html 데이터 바인딩이 가능하다. {{ price }} 만원 export default { nam..