개발/Vue10 [Vue] [Vue3] 템플릿 문법 Vue는 HTML 기반 템플릿 문법을 사용합니다. 내부적으로 Vue는 템플릿을 고도의 최적화된 자바스크립트 코드로 컴파일 합니다. 텍스트 보간법 데이터 바인딩의 가장 기본적인 형태는 Mustache"(이중 중괄호) 문법 메세지: {{ msg }} HTML 출력 이중 중괄호는 데이터를 일반 텍스트로 해석하기 떄문에, 실제 HTML을 출력하려면 v-html 디렉티브를 사용해야 합니다. 디렉티브 Vue에서 제공하는 특수한 속성임을 나타내기 위해 접두사 -v를 사용 렌더링된 DOM에 특별한 반응적 동작을 적용 속성 바인딩 다음 예시에서 v-bind 디렉티브는 id 속성을 컴포넌트의 dynamicId 속성과 동기화된 상태로 유지하도록 Vue에 지시 합니다. v-bind는 다음과 같이 단축 문법을 활용 합니다. b.. 2022. 12. 28. [Vue] [Vue3] Vue 앱 만들기 앱 인스턴스 모든 Vue 앱은 createApp 함수를 사용하여 새로운 앱 인스턴스를 생성하는 것으로 시작합니다. 최상위 컴포넌트 싱글 파일 컴포넌트를 사용하는 경우 일반적으로 다른 파일에서 루트 컴포넌트를 가져옵니다. 앱 마운트 하기 앱 인스턴스는 .mount() 메서드가 호출될떄까지 아무 것도 렌더링하지 않습니다. 컨테이너가 될 실제 Dom 엘리먼트 또는 셀렉트 문자열을 인자로 필요합니다. .mount() 메서드는 반드시 앱의 환경설정 및 에셋이 모두 등록 완료된 후에 호출되어야 합니다. DOM 내부의 최상의 컴포넌트 템플릿 빌드 과정 없이 Vue를 사용할 때, 마운트 컨테이너 내부에 직접 최상위 컴포넌트의 템플릿을 작성할 수 있습니다. 앱 환경설정 앱 인스턴스는 몇 가지 앱 레벨의 옵션을 구성할 수.. 2022. 12. 28. [Vue] Vuex 활용해보기 03 - Mutations 출처 : https://joshua1988.github.io/web-development/vuejs/vuex-getters-mutations/ (1) Mutations 란? State 값을 변경하는 로직을 의미한다 -Getters 와의 차이점 인자를 받아 Vuex에 넘겨줄 수 있다. computed가 아닌 methods에 등록한다. -Actrions 와의 차이점 Mutations는 동기적 로직을 정의 Actions는 비동기적 로직을 정의 (Mutations의 성격 상 안에 정의한 로직들이 순차적으로 일어나야 각 컴포넌트의 반영 여부를 제대로 추적할 수 있기 때문) 이전까지의 진행 내용 중 맞지 않는 구현 방식 addCounter() { this.$store.state.counter++; }, subCou.. 2022. 12. 28. [Vue] Vuex 활용해보기 01 - Vue앱과 비교, Vuex의 state Vuex의 활용법에 대해 잘 정리해 놓으신 블로그가 있어 내용을 그대로 옮겨 오기 보다는 다시 한번 직접 내용을 작성해보고 실제로 프로젝트를 만들어 내가 진행해보면서 Vuex활용법을 익혀보고자 하였다. https://joshua1988.github.io/web-development/vuejs/vuex-start/#vuex-%ED%8A%9C%ED%86%A0%EB%A6%AC%EC%96%BC-5---state-%EB%93%B1%EB%A1%9D (Vue에 대해서도 잘 정리해 두셔서 추후에 스터디 진행 예정) 1) 간단한 Vue App 구성 Parent, Child 컴포넌트 제작 +버튼 누르면 카운터 넘버 올라가고 - 버튼 누르면 카운터 넘버 감소 컴포넌트 간 데이터 전달 시 props 속성 사용 따라서 상위 컴.. 2022. 12. 28. 이전 1 2 3 다음
