전체 글361 [시작하기] 컴포넌트를 사용한 작성방법 컴포넌트를 사용한 작성방법 - Vue에서 컴포넌트는 미리 정의된 옵션을 가진 Vue 인스턴스임 - Vue에서 컴포넌트를 등록하는 방법을 아래의 예시를 들어 설명하겠음 1. todo-item 이름을 가진 컴포넌트 정의 // todo-item 이름을 가진 컴포넌트를 정의합니다 Vue.component('todo-item', { template: '할일 항목 하나입니다.' }) var app = new Vue(...) 2. todo-item 컴포넌트의 인스턴스 만들기 - 아래와 같은 모양으로 다른 컴포넌트의 템플릿에서 컴포넌트 인스턴스를 추가할 수 있음 3. todo-item 컴포넌트는 'prop'라고 하는 사용자 정의의 속성을 만들 수 있음 - 부모 영역의 데이터를 자식 컴포넌트에 전달 할 수 있어야 하므로.. 2023. 5. 25. [시작하기] 사용자 입력 핸들링 사용자 입력 핸들링 {{message}} 메세지 뒤집기 - 사용자가 앱과 상호작용할 수 있게 하기 위해 'v-on' 디렉티브를 사용하여 Vue 인스턴스에서 메소드를 호출하는 이벤트 리스너를 추가 할 수있음 - 이 방법은 직접적으로 DOM은 건드리지 않고 앱의 상태만을 업데이트함 - 모든 DOM 조작은 Vue에 의해 처리되며 작성한 코드는 기본 로직에만 초점을 맞춤 {{message}} - Vue는 또한 양식에 대한 입력과 앱 상태를 양방향으로 바인딩 하는 'v-model'.디렉티브를 제공함 2023. 5. 25. [시작하기] 조건문과 반복문 조건문 now you see me - 상기의 예제를 실행시키면 p 태그의 내용이 잘 출력되는 것이 확인 됨 - 이어서 콘솔에서 app3.seen 값을 false로 변경하면 p 태그 내용이 출력되지 않는 것을 볼 수 있음 - 즉슨, 텍스트와 속성뿐 아니라 DOM의 구조에서도 데이터를 바인딩 할 수 있음을 보여줌 반복문 {{todo.text}} - 몇 가지 디렉티브들이 있으며 각 디렉티브마다 고유한 기능이 있음 - 'v-for' 디렉티브는 배열의 데이터를 바인딩하여 아이템을 전시하는데 사용할 수 있음 - 콘솔창에서 'app4.todos.push({ text: 'New item' })을 입력하면 배열에 새 항목이 동적으로 추가되는 것을 확인 할 수 있음 2023. 5. 25. [시작하기] 선언적 렌더링 선언적 렌더링 {{ message }} - 문자열 템플릿을 렌더링하는 것과 유사하지만, Vue.js 내부에서는 더 많은 작업을 하고 있음 - 데이터와 DOM이 연결되었으며 모든 것이 반응형이 되었음 - 콘솔창을 열고 app.message를 다른 값으로 설정하면 업데이트 된 값에 따라 변경되는 것을 확인 할 수 있음 - 더 이상 HTML과 직접 상호작용할 필요 없이 Vue 앱은 단일 DOM 요소(예시의 경우 #app)에 연결되어 DOM 요소를 완전히 제어함 - HTML은 엔트리 포인트 일뿐 다른 모든 것은 새롭게 생성된 Vue 인스턴스 내에서 발생함 디렉티브(directives) // HTML 내 위에 잠시 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다! //JS var app2 = ne.. 2023. 5. 25. 프로젝트 생성하기 Default 옵션으로 프로젝트 설치하기 1. Vue 프로젝트 생성 - 명령어 'vue create 프로젝트명'을 실행함 vue create 프로젝트명 - Vue 프로젝트 설치 옵션이 나타남 - 사용할 버전을 선택하여 엔터를 입력하면 프로젝트명으로 폴더가 생성되고, 프로젝트 폴더 밑으로 개발에 필요한 기본 파일들이 자동 생성됨 2. Vue 프로젝트 실행 - 명령어 'npm run serve'를 입력하면 서버가 시작되며, 프로젝트는 기본포트인 8080으로 실행됨 - 기본 포트 외에 다른 포트를 사용하려면 'npm run serve-- --port 포트번호' 명령어로 직접 포트 번호를 지정할 수 있음 3. Vue 프로젝트 파일 구조 - node_modules : npm으로 설치된 패키지 파일들이 모여있는 디.. 2023. 5. 22. What is Vue.js? Vue.js - 사용자 인터페이스 개발을 위한 Progressive Framework - 여기서 프로그레시브라는 것은 웹과 네이티브 앱의 이점을 모두 수용하고 표준 패턴을 사용해 개발한 것을 뜻함 - 웹의 경우에는 별도의 설치없이 브라우저만 있으면 접속이 가능하기 때문에 접근성이 뛰어남 - 네이티브 앱의 경우 일반적으로 웹보다 빠르고 더 뛰어난 사용자 경험을 제공함 - Vue.js가 목표로 하는 것은 웹의 장범과 앱의 장점을 모두 수용할 수 있는 진화된 웹앱 애플리케이션을 만들 수 있는 프레임워크를 제공하는 데 있음 - Vue.js는 SPA 개발을 위한 프론트엔드 프레임 워크임 Vue.js의 장점 - 직관적이고 배우기 쉽다 - 재사용을 통한 애플리케이션 개발 단축 및 양질의 코드를 생산할 수 있다 - A.. 2023. 5. 22. 이전 1 2 3 4 ··· 61 다음
