본문 바로가기
  • 일하면서 배운 내용 끄적이는 블로그

Vue10

Vue 프로젝트 동작 순서 1. package.json설정파일이다Spring의 pom.xml과 유사하다2. index.html기본적인 html파일App.vue가 들어갈 장소를 명시해놓는 뼈대보통 수정x  이부분이 App.vue가 들어가는 장소3. main.jsApp.vue의 템플릿 내의 을 마운트 한다.여기서 import한 파일들은 나머지 뷰에서 잘 동작한다.import Vue from 'vue'import App from '~/App'import router from '~/router';import axios from 'axios';import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm';import 'bootstrap/dist/css/bootstrap.css';i.. 2024. 5. 2.
Props vs EventBus vs Vuex PropsVue.js에서는 부모 - 자식 컴포넌트 사이에 단방향 바인딩을 생성한다.Vue는 컴포넌트로 화면을 구성하기 때문에 같은 웹페이지라도 데이터를 공유할수 없다 따라서 부모는 Props를 통해 자식에게 데이터를 전달하고, 자식은 events(emit)을 통해 부모에게 전달한다. 예제코드 부모  자식 {{ message }}  이런 방식으로 데이터를 전달하는것은 규모가 크고 복잡해질수록 컴포넌트 간 통신 및 데이터 전달이 힘들다 그래서 다음 방법이 EventBus와 Vuex이다.EventBusEventBus는 쉽게 말하면 비어있는 Vue 인스턴스 객체이다.import Vue from "vue";var EventBus = new Vue(); 이 인스턴스를 독립적인 각 컴포.. 2024. 5. 2.
Vue 객체의 속성 및 라이프사이클 정리 Vue 객체의 속성vue 객체의 속성으로는 el, data, template, props, methods, computed, watch 및 라이프사이클 훅들이 있다elVue가 실행되는 html DOM 요소를 지정함. CSS 선택자를 사용한다 (id면 #, class면 .)dataVue 인스턴스가 관리하는 데이터, Reactivity 반영(data를 변경하면 화면 자동 반영)template화면에 표시할 요소(html, css)props부모 컴포넌트의 데이터를 받을 수 있는 속성의 리스트([ ])methods화면의 동작 및 이벤트 로직을 제어하는 메소드computed데이터 표현을 더 직관적이고 간결하게 도와주는 속성으로, 종속 대상에 따라 캐싱, Validation처리, 간단한 연산등에 적합watchdata.. 2024. 5. 2.
<fragment> 태그 Vue.에서 태그는 부모 래퍼(wrapper)없이 여러 요소를 렌더링 하는데 사용된다. DOM에 추가적인 래퍼 요소를 도입하지 않고도 요소 목록을 렌더링 할수있다. 컴포넌트 내에서 요소 목록을 렌더링 해야하지만 CSS나 레이아웃에 영향을 주는 추가적인 래퍼 요소를 추가하고 싶지 않을때 사용한다. 항목 목록 {{ item }} 2024. 3. 29.

티스토리툴바