꾸준히 성장하는 개발자

v-once 데이터를 한 번만 랜더링 하고 데이터가 변경되더라도 화면을 갱신하지 않는다 v-html {{msg}} // hello! 출력 // hello! 출력 만약 데이터 자체가 태그를 포함하고 있는 상태에서 {{ }} 이렇게 출력을 하게 되면 그대로 문자열로 출력을 하기 때문에 태그까지 문자열로 출력이 되는데 이럴 때 사용하는 게 v-html이다 v-bind html 속성에 {{ }} 문법을 사용하여 값을 동적으로 바인딩 할때 필요한 방법 속성을 넣는 방법이라고 생각하면 편할듯 {{msg}} 위처럼 작성하면 class는 active로 바뀌고 style이 적용돼서 출력이 된다 v-bind 약어 - v-bind를 생략해줄 수 있다 :class :href 이런 식으로 사용해주면 된다. v-on onclic..

이런 구조의 component에서 데이터를 전달할 때 아래는 App.vue에 있는 data를 Child.vue에서 출력해주기 위해 props로 전달해주는 과정이다 // App.vue props로 전달을 하게 되면 App.vue에서 Child.vue로 도달하기 위해서는 어쩔 수 없이 중간단계인 Parent.vue를 거쳐야 한다. Parent.vue에서는 msg라는 data가 필요하지도 않은데 props로 받고 있는 것 // Parent.vue // Child.vue {{ msg }} 이런 위의 불편한 부분을 provide, inject를 이용하여 개선하는 방법 // App.vue // props로 사용하던부분도 삭제해준다 // Parent.vue // :msg="msg" props로 전해주던 부분을 지워준..

v-if v-show 둘 다 조건에 따라 요소를 출력한다 // false 일 경우 출력이 되지 않음 if show 그런데 두개의 차이점은 false로 실제로 렌더링이 되었을때 v-if는 주석으로 출력이 되고 v-show는 스타일로 보이지 않게만 나타난다 show v-if 로 출력할 때 조건에 만족하지 못한 경우 요소는 DOM레벨에서도 제거 모든 상태가 초기화된다 v-show로 출력할 때 조건에 만족하지 못한 경우에는 보이지는 않더라도 내부적으로 데이터에 대한 감시가 일어나므로 주의가 필요하다. 아래처럼 v-else-if / v-else 와 함께 작성도 가능하다 aaaaa bbbb 모든조건이 만족하지 않은경우 a가 true이면 첫번째 요소가 출력되고 b가 true일 경우 두번째 요소가 출력 둘다 조건이 만..

// test.vue vue로 프로젝트를 하다보면 파일을 만들게 되면 위 구조로 만들고 시작을 하는데 그중 안에 들어가는 옵션들을 정리 해보자 라이프 사이클 훅 - data와 methods는 자유롭게 정의할 수 있지만 라이프 사이클 훅은 사용할수 있는 메서드가 정해져 있다. beforeCreate : 인스턴스가 생성되고, 리액티브 초기화가 일어나기전 create : 인스턴스가 생성되고, 리액티브 초기화가 일어난 후 beforeMount : 인스턴스가 마운트되기 전 mounted : 인스턴스가 마운트 된 후 beforeUpdate : 데이터가 변경되어 DOM에 적용되기 전 updated : 데이터가 변경되어 DOM에 적용된 후 beforeDestroy : Vue 인스턴스가 제거되기 전 destroyed :..

https://v3.ko.vuejs.org/ Vue.js v3.ko.vuejs.org Veu.js 버전3 사이트 vue.js 사용, 설치 방법 1. CDN 간단한 프로젝트를 하거나 할때는 CDN으로 사용하는것도 편리하게 사용할수 있다. 태그 안에 CDN을 추가해준다 2. npm 3. CLI 설치 https://cli.vuejs.org/guide/creating-a-project.html Creating a Project | Vue CLI Creating a Project vue create To create a new project, run: WARNING If you are on Windows using Git Bash with minTTY, the interactive prompts will not ..