본문 바로가기

vue 인터넷 강의9

[Hoon] Vuejs 강의 - Markdown Editor 개발 Vue Example - Markdown Editor 개발 vue.js Example 원본 -> https://github.com/vuejs/vue/tree/dev/examples/markdown [ 설치 ] 또는: JSFiddle - https://jsfiddle.net/ JSFiddle 에 바로 적용해 분석해 보기 [html] [css] html, body, #editor { margin: 0; height: 100%; font-family: 'Helvetica Neue', Arial, sans-serif; color: #333; } textarea, #editor div { display: inline-block; width: 49%; height: 100%; vertical-align: top; .. 2020. 5. 29.
[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 강의 - 초보 실전 웹앱 개발 - 1부 : vue 개념 ~ 핵심 실습 bit.ly/3fXOzon 인프런 인강 선착순 30%(7,700원) 마지막 할인 쿠폰 - Vue.js 핵심 강의! 강좌명 - [Vue.js 입문] Javascript Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 실습 인프런 인터넷 강의 선착순 100명 30% 할인쿠폰! (7,700원으로 수강) 강의 수강평도 부탁드립니다. bit.ly/2TtRHis [Vue.js 입문.. plogger.tistory.com bit.ly/2TtRHis [Vue.js입문~초급] Javascript 초보 Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 - 인프런 이 강의는 초보 Javascript 개발자가 직접 Real 웹앱을 개발할 수 있는 개발자가 되는 것에 초점을 맞추고 있습니다. 이 강의를 수강하시면 Vu.. 2020. 5. 20.
[Hoon] Vuejs 강의 - 조건부 렌더링 조건부 렌더링 https://kr.vuejs.org/v2/guide/conditional.html v-if Vue에서는 v-if 디렉티브를 사용 Yes new Vue({ el:'#app', data: { ok: true } }) v-else Yes No #template 에 v-if을 갖는 조건부 그룹 만들기 v-if는 디렉티브기 때문에 하나의 엘리먼트에 추가해야합니다 Title Paragraph 1 Paragraph 2 #v-else v-else 디렉티브를 사용하여 v-if에 “else 블록” 이제 나를 볼 수 있어요 이제는 안보입니다 v-else 엘리먼트는 v-if 엘리먼트 또는 v-else-if 엘리먼트 바로 뒤에 있어야 합니다. 그렇지 않으면 인식할 수 없습니다. #v-else-if v-else-.. 2020. 5. 8.
[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.
[Hoon] Vuejs 강의 - Vue Lifecycle Hooks Vue Lifecycle Hooks https://kr.vuejs.org/v2/guide/instance.html#인스턴스-라이프사이클-훅 https://vuejs.org/images/lifecycle.png 각 Vue 인스턴스는 생성될 때 일련의 초기화 단계를 거칩니다. 데이터 관찰 설정이 필요한 경우 템플릿을 컴파일하는 경우 인스턴스 DOM 에 마운트 하는 경우 데이터가 변경되어 DOM 을 업데이트하는 경우 그 과정에서 사용자 정의 로직을 실행할 수있는 라이프사이클 훅 도 호출 https://kr.vuejs.org/v2/guide/instance.html#라이프사이클-다이어그램 beforeCreate created {{ a }} new Vue({ el: '#app', data: { a: 1 }, be.. 2020. 5. 6.
[Hoon] Vuejs 강의 - SFC (Single File Components) 는 무엇인가? SFC (Single File Components) 는 무엇인가? Single File Components , SFC - .vue 확장자를 가진 싱글 파일 컴포넌트 싱글 파일 컴포넌트 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 페이지내 Vue 선언 방식의 disadvantages(약점) ● Global definitions - 모든 컴포넌트에 대한 고유한 이름 필요 ● String templates - 구문 강조가 약함, 여러 줄로 된 HTML에 보기 안좋은 슬래시 ● No CSS support - CSS is conspicuously left out CSS 를 지원하지 않는 것이 아니라 CSS 가 눈에 띄게 모듈화 되지 않음 ● No build step .. 2020. 4. 13.
[Hoon] Vuejs 강의 - PWA (Progressive Web Application) 는 무엇인가? PWA (Progressive Web Application) 는 무엇인가? ● 웹 소프트웨어의 일종으로, HTML, CSS, 자바스크립트를 포함한 웹 기술들을 사용하여 만듦. HTML - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. HTML은 하이퍼텍스트 마크업 언어(HyperText Markup Language, 문화어: 초본문표식달기언어, 하이퍼본문표식달기언어)라는 의미의 웹 페이지를 위한 지배적인 마크업 언어다. HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다. 그리고 이미지와 객체를 내장하고 대화형 양식을 생성하는 데 사용될 ko.wikipedia.org 종.. 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.

티스토리툴바