본문 바로가기

vue.js 인강13

[Hoon] Vuejs 강의 - Vue Router 시작하기 Vue Router 기본 https://router.vuejs.org/kr/ Vue 라우터는 Vue.js의 공식 라우터입니다. Vue.js를 사용한 싱글 페이지 앱을 쉽게 만들 수 있도록 Vue.js의 코어와 긴밀히 통합되어 있습니다. 동적 라우트 매칭 중첩된 라우트 프로그래밍 방식 네비게이션 이름을 가지는 라우트 이름을 가지는 뷰 리다이렉트와 별칭 라우트 컴포넌트에 속성 전달 HTML5 히스토리 모드 또는 해시 모드(IE9에서 자동으로 폴백) 사용자 정의 가능한 스크롤 동작 등을 포함합니다. 위 기능에 대해서는 2부에서 자세히 다루도록 하겠습니다. 지금은 Vue Router 에 대해 기본적인 이해에 집중하겠습니다. Vue Router 설치 https://router.vuejs.org/kr/install.. 2020. 5. 22.
[Hoon] Vuejs 강의 - Simple To Do App 개발하기 Simple To Do App 개발하기 https://codesandbox.io/s/o29j95wx9 index.html index.js App.vue variables.scss SCSS는 SASS(https://ko.wikipedia.org/wiki/Sass_(스타일시트_언어)) 세번째 버전에서 추가되엇습니다. SASS의 모든 기능을 지원하면서 CSS 구문과 완전히 호환되도록 만들어졌습니다. scss를 공통적으로 활용하고자 할때 이런식으로 import 하여 진행할 수 있음 TodoList.vue TodoListItem.vue BaseInputText.vue 컴포넌트에서 v-model 위 문장은 아래와 같습니다. 컴포넌트에서는 v-model 을 쓸 수 없고 v-bind:value 와 v-on 을 이용해서.. 2020. 5. 19.
커피한잔(5000원) 으로 배우는 Vue.js 개념 핵심 강의! - 인프런 인강 55% 할인 쿠폰 커피한잔(5000 원) 으로 배우는 Vue.js 개념 핵심 강의! 모바일 환경에서도 강의를 수강할 수 있도록 강의가 많이 개선되었습니다. 인프런 인터넷 강의 선착순 100명 55% 할인쿠폰! [Vue.js] javascript Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법 쿠폰번호 : 836-87e90db343bc 사용법 : 결제시 쿠폰코드 등록을 통해 적용 기한 : 2020년 7월 31일 까지 제한 : 선착순 100명 사용처 : 인프런 인터넷 강의 => bit.ly/2TtRHis [Vue.js] Javascript Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법 - 인프런 이 강의를 수강하시면 Vue.js 와 관련된 기본적인 개념부터 Real 웹앱 개발을 해 볼 수 있습니다. 이.. 2020. 5. 14.
[Hoon] Vuejs 강의 - codesandbox 로 Vue SFC 환경 맛보기 codesandbox 로 Vue SFC 환경 맛보기 https://codesandbox.io CodeSandbox: Online IDE for Rapid Web Development CodeSandbox is an online code editor and prototyping tool that makes creating and sharing web apps faster codesandbox.io Create a Sandbox, it's free Vue main.js render - https://kr.vuejs.org/v2/guide/render-function.html // very short - es6 arrow function render: h => h (App) // short render: fu.. 2020. 5. 13.
[Hoon] Vuejs 강의 - Component Basic Component Basic https://kr.vuejs.org/v2/guide/components.html 컴포넌트는 무엇인가요? 컴포넌트는 Vue의 가장 강력한 기능 중 하나입니다. 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는 데 도움이 됩니다. 상위 수준에서 컴포넌트는 Vue의 컴파일러에 의해 동작이 추가된 사용자 지정 엘리먼트입니다. 컴포넌트 사용하기 # 전역 등록 Vue.component('my-component', { // 옵션 template: '사용자 정의 컴포넌트 입니다!' }) // 루트 인스턴스 생성 new Vue({ el: '#app' }) # 지역 등록 컴포넌트를 components 인스턴스 옵션으로 등록함으로써 상위 템플릿에서만 사용할 수 있는 컴포넌트를 .. 2020. 5. 12.
[Hoon] Vuejs 강의 - 클래스와 스타일 바인딩 클래스와 스타일 바인딩 https://kr.vuejs.org/v2/guide/class-and-style.html Vue는 class와 style에 v-bind를 사용할 때 특별히 향상된 기능을 제공합니다. 표현식은 문자열 이외에 객체 또는 배열을 이용할 수 있습니다. HTML 클래스 바인딩하기 # 객체 구문 클래스를 동적으로 토글하기 위해 v-bind:class에 객체를 전달할 수 있습니다. 1 new Vue({ el:'#app', data: { isActive: true } }) 객체에 필드가 더 있으면 여러 클래스를 토글 할 수 있습니다. 또한v-bind:class 디렉티브는 일반 class 속성과 공존할 수 있습니다. 2 new Vue({ el:'#app', data: { isActive: tru.. 2020. 5. 7.
[Hoon] Vuejs 강의 - Vue 핵심 문법 실습 ( 공식 가이드 문서 오류 해결 ) 템플릿 문법 https://kr.vuejs.org/v2/guide/syntax.html 보간법(Interpolation) - 삽입법 #문자열 데이터 바인딩의 가장 기본 형태는 “Mustache” 구문(이중 중괄호)을 사용한 텍스트 보간입니다. 메시지: {{ msg }} new Vue({ el:'#app', data: { // 1. 선언적 렌더링 msg: 'Hello Vue!' } }) 다시는 변경하지 않습니다: {{ msg }} 메시지: {{ msg }} 다시는 변경하지 않습니다: {{ msg }} var vm = new Vue({ el:'#app', data: { // 1. 선언적 렌더링 msg: '안녕하세요 Vue!' } }) vm.msg = 'Hi Vue!' #원시 HTML Using mustach.. 2020. 5. 6.
인프런 인강 30% 할인 - [Vue.js] Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법 bit.ly/2TtRHis [Vue.js] Javascript Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법 - 인프런 이 강의를 수강하시면 Vue.js 와 관련된 기본적인 개념부터 Real 웹앱 개발을 해 볼 수 있습니다. 이 강의는 1부 기본기 이며, 2부와 3부를 통해서 실제 Real 웹앱을 구현해 보도록 하겠습니다. 초급 �� www.inflearn.com Vue.js] 쿠폰번호 : 665-3e83329ee049 사용법 : 결제할때 쿠폰코드 등록을 통해 적용 기한 : 2020년 5월 30일 까지 제한 : 선착순 100명 2020. 5. 6.
[Hoon] Vuejs 강의 - Javascript Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법 Javascript Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법 bit.ly/2TtRHis [Vue.js] Javascript Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법 - 인프런 이 강의를 수강하시면 Vue.js 와 관련된 기본적인 개념부터 Real 웹앱 개발을 해 볼 수 있습니다. 이 강의는 1부 기본기 이며, 2부와 3부를 통해서 실제 Real 웹앱을 구현해 보도록 하겠습니다. 초급 �� www.inflearn.com 이 강의는 이 강의를 수강하시면 Vue.js 와 관련된 기본적인 개념부터 Real 웹앱 개발을 해 볼 수 있습니다. 이 강의는 1부 기본기 이며, 2부와 3부를 통해서 실제 Real 웹앱을 구현해 보도록 하겠습니다. 이런 걸 배울 수 있어요 Vue, PW.. 2020. 4. 17.
[Hoon] Vuejs 강의 - 조건문과 반복문 조건문과 반복문 https://kr.vuejs.org/v2/guide/index.html#조건문과-반복문 엘리먼트가 표시되는지에 대한 여부를 제어 이제 나를 볼 수 있어요 new Vue({ el: '#app', data: { seen: true } }) {{ todo.text }} new Vue({ el: '#app', data: { todos: [ { text: 'JavaScript 배우기' }, { text: 'Vue 배우기' }, { text: '무언가 멋진 것을 만들기' } ] } }) 버튼을 하나 추가하고, Todo 를 추가하는 메소드를 만들어서 확인해 봅시다. { text: 'New item' }를 추가힙니다. Todo 목록에 새 항목이 동적으로 추가 된것을 볼 수 있습니다. {{ todo.t.. 2020. 4. 13.
[Hoon] Vuejs 강의 - Vue 시작하기(Getting Started) Vue 시작하기(Getting Started) https://kr.vuejs.org/v2/guide/index.html#시작하기 [ 설치 ] 또는: JSFiddle - https://jsfiddle.net/ 선언적 렌더링 https://kr.vuejs.org/v2/guide/index.html#선언적-렌더링 Vue.js의 핵심에는 간단한 템플릿 구문을 사용하여 DOM에서 데이터를 선언적으로 렌더링 할 수있는 시스템이 있습니다. 텍스트 보간(Interpolation) - 텍스트 삽입 {{ message }} new Vue({ el:'#app', data: { message: '안녕하세요 Vue!' } }) 이제 데이터와 DOM이 연결되었으며 반응형이 되었습니다. 엘리먼트 속성 바인딩 내 위에 잠시 마우스를.. 2020. 4. 13.
[Hoon] Vuejs 강의 - SPA (Single-Page Application)는 무엇인가? SPA (Single-Page Application)는 무엇인가? ●서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션을 말한다. 웹 애플리케이션 - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. 웹 애플리케이션(web application) 또는 웹 앱은 소프트웨어 공학적 관점에서 인터넷이나 인트라넷을 통해 웹 브라우저에서 이용할 수 있는 응용 소프트웨어를 말한다. 웹 애플리케이션은 클라이언트로서 웹 브라우저를 사용하는 사람이 많기 때문에 인기를 누리고 있다. 수천만 대의 PC에 굳이 소프트웨어를 배포해서 설치하지 않아도 웹 애플리케이션을 유지 관리할 수 있다는 점이 장점 중의 하나이다. 웹 애플리케이션은 웹 .. 2020. 2. 17.
[Hoon] Vuejs 강의 - Vue.js가 무엇인가? Vue.js 가 무엇인가? ● Vue는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크(Progressive Framework) → 일반적인 웹 페이지 뿐만 아니라 PWA(프로그레시브 웹앱) 개발에 용이하다 ● 점진적으로 채택할 수 있도록 설계됨 vue -> vue router -> vuex Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org Introduction | Vue Router Introduction VERSION NOTE For TypeScript users, vue-router@3.0+ requires vue@2.5+, and vice versa. Vue Router is the official router for Vue... 2020. 2. 17.