IT기록 isaac

[Vue.js | Vue 3] Vue.js CDN으로 시작하기 이전 글 2022.05.25 - [JS & Framework/vue.js] - [Vue.js | Vue 3] Vue.js 시작하기 (설치, 환경설정, CLI, CDN) Vue.js를 CDN으로 시작할 수 있습니다. Vue.js 라이브러리 링크를 걸어서 개발하는 것이죠. 다음은 Vue.js를 CDN으로 처음 시작할 수 있는 가장 간단한 코드입니다. {{ message }} 위 코드 샘플은 모든 API가 전역 Vue 변수 아래에 노출되는 Vue의 전역 빌드를 사용합니다. ref API 사용하려고 한다면 다음과 같이 사용할 수 있습니다. const { createApp, ref } = Vue 그리고 위 코드를 실행하면 화면에 'hello Vue!'..

[Vue.js] Vue 3 기초 문법 데이터 바인딩 (Data Binding) Vue에서 데이터 바인딩 하는 방법에 대해서 알아보겠습니다. 아래는 xxx.vue 라는 파일에서 데이터 바인딩을 하는 코드를 나타냅니다. // App.vue {{text}} data() { return { name : value } } 로 표현을 해도 되고 data : () => ( { name : value } ) 로 표현해도 됩니다. name에 세팅한 value값을 html 코드상에서 사용하려고 하는 위치에 {{ }} 콧수염 괄호에 세팅한 data의 name 값을 넣어주면, name에 세팅된 value가 출력됩니다. Vue 데이터 바인딩은 style에도 적용할 수 있습니다. 태그의 속성으로 사용될 때에는 콜론(:)속성명을 ..

[vs code] Vue 3 개발에 도움이 될 만한 확장 모듈 설치하기 vs code 에디터에서 Vue 3 개발에 도움이 될 만한 확장 모듈을 설치합니다. 확장 모듈 Vetur HTML CSS Support Vue 3 Snippets 확장 모듈 설치화면은 왼쪽 메뉴에서 확장 탭을 선택합니다. 확장(Extentions) 단축키 : Ctrl + Shift + X

[Vue.js] Vue CLI 프로젝트 : 형제 컴포넌트로 데이터 전달하기 mitt 라이브러리 설치 (Vue 3.x) 이전 글 2022.02.14 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트 : props, $emit 부모-자식 컴포넌트 간 Object 전달 2022.02.13 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트 : Props 데이터 수정하여 부모 컴포넌트에도 알리기 $emit() 2022.02.13 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트 : props의 활용 이번 글에서는 이벤트 버스를 통해 형제 컴포넌트로 데이터를 전달하는 방법에 대해 알아보겠습니다. 이..

[Vue.js] Vue CLI 프로젝트, vuetify 설치하기 2022.02.11 - [JS & Framework/vue.js] - [Vue.js] Vue CLI로 시작하기 Vue CLI 프로젝트 시작에 이어서 bootstrap과 같은 vue용 Component 라이브러리인 vuetify를 설치합니다. # vuetify 설치하기 $ vue add vuetify 선택 옵션이 나오는데 저는 Vuetify 3 Preview (Vuetify 3) 을 선택해봤습니다. 성공적으로 설치가 된 것 같습니다. 이제 소스를 보면 많은 변화들이 생겨 있는 것을 확인할 수 있습니다. vue project를 실행해보겠습니다. # Vue 프로젝트 실행 명령어 $ npm run server http://localhost:8080..

[Vue.js | Vue 2] Vue.js 시작하기 (입문) Vue.js에 대해서 공부를 하기 시작하면서 공부한 내용을 공유하고자 글을 작성합니다. 틀린 부분이 있다면 지적해주시고 고쳐갈 수 있도록 댓글 남겨주시면 감사하겠습니다. Vue.js는 프론트엔드 프레임워크로 현재 가장 인기 있는 프론트 엔드 기술 중 하나입니다. react.js, vue.js, angular.js 등이 있는데요. 저는 그 중 Vue.js가 가벼우며 접근하기가 비교적 쉽다(?)는 얘기를 듣고 Vue.js를 먼저 공부하게 되었습니다. Vue.js의 시작은 매우 간단합니다. vue.js 파일을 html의 프로덕션 환경인 경우 아래 CDN으로 사용합니다. 위 vue.js 파일 혹은 cdn 으로 링크를 걸었다면, 이제 vue.js를 사용..

[Vue.js] Vue Object - Vue 객체 Vue 개발은 Vue 객체를 생성하는 것으로 시작됩니다. Vue development starts with creating a Vue object. Vue 앱은 Vue 함수에서 Vue 인스턴스를 생성하는 것으로 시작합니다. A Vue app starts by creating a Vue instance from a Vue function. Vue object를 생성합니다. Create a Vue object. var vm = new Vue({ // options }); Vue 인스턴스를 생성할 때 주로 사용되는 옵션으로 el, data, methods 가 있습니다. The most commonly used options when creating a Vue..

[Vue.js | Vue 2] Getting started with vue.js vue.js 시작하기 Getting started with vue.js vue.js는 대화형 웹 인터페이스, JS 프레임워크입니다. vue.js is an interactive web interface and JS framework. vue.js는 MVVM의 디자인 패턴을 사용합니다. vue.js uses the design pattern of MVVM. View - View Model - Model vue.js를 개발하는 방법은 여러 가지가 있지만 우리는 CDN 방식을 사용합니다. There are many ways to develop vue.js, but we use the CDN method. CDN : Content ..