Vue.js

Vue.js(이하 뷰 또는 Vue)는 사용자 인터페이스를 구축하기 위한 자바스크립트 프레임워크입니다. Vue는 컴포넌트라는 단위를 기반으로 인터페이스 프로그래밍을 하도록 설계되어 있습니다.Vue는 Angular의 양방향 바인딩과 React.js의 Virtual DOM을

Vue.js 포스트 시리즈는 공식 문서를 따라가면서 작성되었습니다.Vue.js 3.X 버전을 사용합니다.npm을 이용해서 Vue를 설치해보도록 하겠습니다. 시작하기전에 Node.js가 설치되어있지 않다면 Node.js 홈페이지에서 먼저 Node.js를 설치해주세요.No

본격적으로 Vue에 들어가기 전에 뷰 프로젝트를 더 쉽고 간편하게 생성할 수 있는 패키지인 Vue cli를 소개해드리려고 합니다.CLI, 명령줄 인터페이스 Command Line Interface터미널을 이용해서 사용자와 컴퓨터가 상호작용하는 인터페이스. 사용자가 키보

Vue.js로 앱을 제작하기 위해서는 인스턴스를 가장 먼저 생성해주어야합니다.Vue cli(https://velog.io/@bami/Vue.js-Vue-cli앱 인스턴스는 다음과 같이 생성합니다.createApp({ //최상위 컴포넌트 옵션});생성한 앱 인

지난 포스트에서 Vue CLI를 사용해서 프로젝트를 생성했었습니다. 이 프로젝트를 기반으로 Vue.js의 첫 컴포넌트를 작성해보겠습니다.Vue CLI를 이용해서 프로젝트를 생성했다면 src 아래의 파일들이 다음과 같이 구성되어있을 것 입니다.여기서 asserts, He

Vue.js에서 주석(comment)를 사용하는 방법에 대해서 짧막하게 소개하겠습니다.각 태그마다 사용할 수 있는 형태가 다릅니다. 조금 당황스러울수도 있지만? 각 태그에서 사용하는 언어를 생각해보면 어떤 곳에 어떤 주석을 넣을지 이해할 수 있습니다..vue: <

Vue는 컴포넌트 인스턴스 데이터들을 DOM에서 바인딩 할 수 있는 HTML 기반의 템플릿 문법을 사용하고 있습니다. 여기서 템플릿은 뷰 컴포넌트를 정의하면서 작성한 HTML, CSS, 로직을 브라우저에서 볼 수 있는 HTML의 형태로 변환하는 것을 의미합니다.다시말해

지난 포스트에서 템플릿 문법(https://velog.io/@bami/Vue.js-%ED%85%9C%ED%94%8C%EB%A6%BF-%EB%AC%B8%EB%B2%95-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EB%B0%94%EC%9D%B8%EB%94

Vue.js에서 props는 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 속성을 의미합니다. props의 사용 이유는 기본적으로 뷰 컴포넌트가 각자 스코프를 가지기 때문에 다른 컴포넌트의 값을 바로 접근할 수 없기 때문입니다.Vue 컴포넌트는 명시적인 props의 선언