vue

Vue.js > 컴포넌트(Component) 기반의 SPA(Single Page Application)를 구축할 수 있게 해주는 프레임워크 Component 웹을 구성하는 로고, 메뉴바, 버튼, 모달창 등 웹 페이지 내의 다양한 UI요소 재사용이 가능하도록 구조화 한

javascript new > "new 연산자를 사용해야만 함수 내부의 내용을 변수에 대입 할 수 있다." new 사용 new 사용 안하면 에러 Vue 문법 정리 message index.html index.js > v- 로 시작하는 태그는 뷰 태그이다.

form 내부에 위의 코드를 입력하여 새로 고침을 막고 submit으로 함수를 실행시킨다..prevent 사용 이유 : Form태그는 submit되면서 창을 새로 고치게 되므로 SPA의 특징인 비동기가 의미 없어진다..prevent로 새로고침을 막았으므로 post 요청

a 태그로 전환 되고, to="${path}" 로 main.js 에서 설정한 라우트 경로를 적어주면 됩니다.현재 url을 보고 path 매핑된 컴포넌트를 렌더링 합니다.위와 같이 라우터 경로로 :productNo 로 지정하면 URL이 /product/P0001, /pr

Props & Emit 부모 => 자식 전달 부모 요소 views/ProjectDetailView.vue 자식요소 components/NavBar_detail.vue 자식 => 부모 : emit 사용

props로 데이터를 부모요소에서 자식요소로 전달할 때 하나의 데이터가 아니라 여러 데이터가 담긴 객체이면 for를 통해 하나씩 보내줘야 한다.click 마우스를 클릭했을 때 실행함dblclick 마우스를 더블 클릭했을 때 실행함mouseover 마우스의 포인트가 요소

이게 전부이다...먼저 부모 요소에서 자식 요소 Element에 ref라는 주소 value를 선언해준다.그 후 this.$refs.자식요소ref명.자식요소method(); 형식으로 호출하면,자식요소의 method를 호출할 수 있다.컴포넌트는 네브바 처럼 완전 똑같은 기

v-for 는 템플릿에서 for 돌리므로 구조에 변화를 주어 새로 for를 돌려야 할 때는 리렌더링을 해주어야 한다.위의 예제처럼 v-for를 반응형 데이터(arr)를 지정하고, 배열 내부의 아이템을 제어(push, splice)하는 메소드를 사용하면 요소 변화가 생길

데이터 바인딩 vue 네이밍 규칙 (참고) > 원래 규칙이 없지만 vue3 부터는 컴포넌트의 vue파일과 구분하기 위해 views에 vue파일은 뒤에 View를 붙여준다. templa

서비스 주소: https://pjt.vercel.app/깃허브 프론트엔드: https://github.com/hvvany/pjt-frontend깃허브 백엔드 : https://github.com/kimdakyeom/PJT_backendPJT라