728x90

Vue 4

Template Data Binding & Event

뷰 템플릿 HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼수있는 형태의 HTML로 변환해 주는 속성 템플릿 속성을 사용하는 방법 ES5에서 뷰인스턴스의 template 속성 사용 ``` ``` !Tip render() 사용자가 볼수 없지만 라이브러리 내부적으로 template 속성에서 정의한 마크업 + 뷰 데이터를 가상 돔 기반의 render() 함수로 변환합니다. 변환된 render() 함수는 최종적으로 사용잦가 볼 수 있는 화면을 그리는 역할을 합니다. 그리고 변환 과정에서 뷰의 반응성이 화면에 더해집니다. 싱글 파일 컴포넌트 체계의 코드를 활용하는 방법 템플릿에서 사용하는 뷰의 속성과 문법 데이터 바인딩 HTML 화면 요소를 뷰 인스..

FrontEnd/Vue 2023.04.16

Vue.js Module

상시 업데이트 예정 기능 axios 비동기 통신 (Jquery의 'Ajax'와 같은 동작) Axios Document core-js JavaScript용 모듈식 표준 라이브러리. 2021년까지 ECMAScript용 폴리필 포함: promises, symbols, collections, iterators, typed arrays, many other features, ECMAScript 제안, 일부 교차 플랫폼 WHATWG/W3C 기능 및 URL과 같은 제안. 필요한 기능만 로드하거나 전역 네임스페이스 오염 없이 사용할 수 있습니다. Core-js Document lodash Array, Object, Json 등 다양한 함수 제공 Lodash Document vue-daum-postcode..

FrontEnd/Vue 2023.04.15

[Vue.js] Router 기초

뷰 라우터 ; 선행 개념 라우팅 웹 페이지 간의 이동 방법을 뜻한다. 라우팅은 현대 웹 앱 형태중 하나인 "싱글 페이지 애플리케이션" 에서 주로 사용한다. 장점 화면간의 전환이 매끄럽다. 애플리케이션의 사용자 경험을 향상 시킬수 있다. 화면 깜박거림이 없다 "싱글 페이지 애플리케이션" : 페이지를 이동할 떄마다 서버에 웹페이지를 요청하여 새로 갱신 하는것이 아니라 미리 해당 페이지들을 받아 놓고 페이지 이동시에 클라이언트의 라우팅을 이용하여 화면을 갱산하는 패턴을 적용한 애플리케이션 뷰 라우터 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리 뷰 특수 태그와 기능 태그 설명 페이지 이동태그. 화면에서는 로 표시 되며 클릭하면 to에 이정한 URL로 이동합니다. 페이지 표시 태그. 변경되는 ..

FrontEnd/Vue 2023.04.15

Vue.js + spring 프로젝트 생성

Spring Boot & Vue.js 연동 Spring Boot & Vue.js 기본 연동 프로젝트 (springvue > images : HELP.md 에 필요한 이미지) 구조 Front : Vue.js Backend : Spring Boot 기본 설치 목록 Vue.js Vue-CLI Node.js 프로젝트 생성순서 Spring Boot 프로젝트 생성 Vue.js 프로젝트 추가(현재는 vue2 설치) vue create 'project name' springvue > vue-frontend > vue.config.js 파일 추가 module.exports = { // npm run build시 파일 생성위치 outputDir: "../src/main/resources/static", //..

FrontEnd/Vue 2023.04.15
728x90