우롱이 공책정리

상위에서 하위로는 데이터를 내려줌, 프롭스 속성 하위에서 상위로는 이벤트를 올려줌, 이벤트 발생 참고링크 joshua1988.github.io/vue-camp/vue/components-communication.html

화면의 영역을 영역별로 구분해서 코드로 관리하는 것이 컴포넌트라 보면 됌 영역별로 컴포넌트 코드로 관리하면 재사용성이 가능함! 영역을 구분했을 때 컴포넌트 간의 관계가 생긴다

생성자함수로 vue에서 api와 속성들을 정의해놓고 갖다 쓰거나 재사용을 할 수 있음 var vm = new Vue(); 하는 이유 참고링크 developer.mozilla.org/ko/docs/orphaned/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor

v-if는 조건이 만족하면 아래 엘리먼트를 렌더링 하겠다는 의미 {{ d.v }} {{ d.t }} v-show또한 false인 경우엔 안보여주고 true인 경우에는 보이는데 둘의 차이는 v-if는 조건이 만족하지않으면 아예 렌더링 자체를 하지않고 v-show는 true건 false건 렌더링을 한다. 화면엔 보이지않아 화면에서 뭔가 보여줬다 안보여줬다가 자주되면 v-show를쓰면 리소스를 덜 잡아먹는다. 특정조건에 이르렀을때만 보여주는게 좋은게 사용자가 그액션을 할지 안할지 모르는건 일단 v-if로 렌더링을 하지 않는게 좋다 그래서 이 용도에 맞게끔 사용을 해야함!

이런식으로 click, change이렇게 @로 이벤트를 걸 수 있다. 다중데이터는 v-for를 통해 핸들링을 할 수 있다 배열이라던지, 테이블이라던지 {{ d.t }} {{ d.v }} {{ d.t }} export default { data() { return { title: "개발자의 품격", title2: "Seoul", input1: "abcd", options: [ {v: "S", t: "Seoul"}, {v: "J", t: "Jeju"}, {v: "B", t: "Busan"} ], region: "B" // v-model을 통해 (셀렉트 콤보박스가 제일 먼저 부산이 나옴) }; }, watch: { // 변수명을 function형식으로 // 데이터가 변경이되면 바로 캐치해서 알 수 있음 /**..

배열을 통해 처리를 할게 있다면 v-for를 이용한다. {{ d.t }} export default { data() { return { title: "개발자의 품격", title2: "Seoul", input1: "abcd", options: [ {v: "S", t: "Seoul"}, {v: "J", t: "Jeju"}, {v: "B", t: "Busan"} ], region: "B" // v-model을 통해 (셀렉트 콤보박스가 제일 먼저 부산이 나옴) }; },

참고 링크 youtu.be/sqH0u8wN4Rs?t=2886

beforeCreate : 가장 먼저 실행되는 훅 created : 실제 뷰컴포넌트 내에서 다양한 메소드, 특정데이터를 감지한다거나 데이터라는 옵션을 통해 화면상에 렌더링 되는 바인딩해야되는 컨트롤해야되는 부분을 코드로 만들어서 사용하게되는데 이런 옵션에대한 설정들을 완료하는 시점 beforeMount : 컴포넌트 안에 실제 컴포넌트가 돔에 추가되기 직전에 실행되는 mounted : 컴포넌트가 돔에 추가된 후에 호출됌 beforeUpdate : 컴포넌트가 돔에 추가된 후에 재렌더링되기 직전에 이벤트 훅 updated : 재렌더링을 마치고나서 실행되는 이벤트 훅 beforeDestroy : 컴포넌트를 빠져나갈 때(다른 컴포넌트 이동할때) 컴포넌트가 제거되기 직전에 호출되는 훅 destroyed : 컴포넌트..

사이는 html 코드가 들어간다고 보면 된다. 디자인 부분을 담당하는 곳이라 보면 됌 는 그 디자인의 데이터 바인딩을 한다거나, 이벤트를 캐치한다거나 서버와 통신하기위한 자바스크립트코드가 들어간다 보면 됌 라우터를 이용해서 path가 바뀔때 마다 이 부분만 해당하는 컴포넌트를 불러와서 재로딩하려는 형식 기본형식 router 선언 src 아래에 router.js 파일 생성 이런식으로 router.js 에다가 적어줌

bootstrap-vue.org/docs BootstrapVue Quickly integrate Bootstrap v4 components with Vue.js bootstrap-vue.org 이렇게 명령어로 설치 해준 후 이 부분을 main.js에 추가해준다!