Vue.js

routes를 사용 할 때 첫번째 메뉴는 위처럼 작성한다. app.js로 들어오는 개념 그 다음 메뉴를 만들 때는

template안의 코드는 하나의 묶음으로 사용해야만 한다.

단방향 데이터 바인딩 js의 변수를 template에 넣고 싶을 때는 {{}}를 사용하면 된다. 이런 식으로 데이터를 자유자재로 왔다갔다 할 수 있어 document객체를 사용할 필요없이 간단하게 구성가능하다. html data를 가지고 오려면 v-html=""를

post를 올리는 컴포넌트에서 작성한 글을 app컴포넌트로 그 데이터를 가져오는 법@input="$emit('write', $event.target.value)": write라는 이름의 커스텀 이벤트이다, 또 그 결과를 event결과에 저장한다.app에서 가져오는 법

자식이 부모데이터를 사용할때 props로 전송하게 되는데이 대용으로 사용할 수 있는 간단한 문법위 html태그를 이용해 데이터가 필요한곳을 정해놓고부모는 <자식컴포넌트>데이터</자식컴포넌트>를 작성한다.부모가 가진 데이터가 자식의 slot자리에 사용되게 된다

어떤 컴포넌트에서 컴포넌트로 데이터를 전송할때 컴포넌트 사이의 거리가 길어져서 코드도 길어질 경우에 mitt라이브러리를 따로 설치해서 사용하면 편리하다.main.js파일을 아래처럼 수정데이터가 필요한 곳에서보통 수신하는 코드는 mounted()안에 적는다.js에서 이벤

props와 custom event로 데이터를 주고받는게 힘들 때Vuex를 설치시 js파일 하나에 모든 데이터를 다 저장하게 되는데,그러면 보든 컴포넌트들은 그 데이터를 직접꺼내서 수정이 가능하다.Vue파일과 데이터가 너무 많을 때Vuex라는 라이브러리를 '상태관리 라

state를 vue파일에서 사용할 때 $store.state.name의 방식으로 사용했는데 이게 길고 사용이 불편할 때 mapState함수를 사용하자함수를 만들 때 methods: {}안에 만들어 사용하지만 computed: {}안에도 만들 수 있다.똑같은 기능의 함수

chrome에 Vue.js devtools를 찾아 설치localhost:8080에서 사이트 미리보기 할 때 개발자도구에 뷰 메뉴가 보이는데이걸 누르면왼쪽은 무슨 컴포넌트 안에 무슨컴포넌트가 있는지DOM트리 처럼 구조화해 보여주며 오른쪽은 선택한 컴포넌트안에 data,

vue File 코드가 길어지면 데이터, 메서드, computed등 특정 데이터와 관련 기능을 사용할 때 여러곳을 이동하며 복잡해진다.Vue3부터 CompositionAPI를 제공하여 이를 사용하면 관련 기능을 한곳에서 사용할 수 있다.

UI애니메이션을 원할 때 css와 Vue제공 Transition를 활용할 수 있다.애니메이션 전 class디자인 -> 동작 이후 class디자인 -> 애니메이션 동작 후 class를 부착 -> 시작전 class명에 transition속성을 주면 부드럽게 에니메이션 ㅇㅇ

전달된 값을 가지게되고, 가리키는 단일속성 .value가 있는 변경가능한 ref객체를 반환ref객체는 반응형이며, .value속성에 새로운 값을 넣을 수 있다. 즉, .value에 대한 모든 읽기 작업이 추적되며, 쓰기 작업은 이벤트를 트리거한다.객체가 ref의 값 .

src안에 firebase/index.js를 만들고입력script setup에서위 코드를 셋업에 작성해서 실시간으로 가져올 수 있다.newtodoContent는 입력값에 v-model로 데이터바인딩참고