본문 바로가기

vue.js강의12

[Hoon] Vuejs강의 - Vue.js 에서 컴포넌트 템플릿을 정의하는 방법들 I Vue.js 에서 컴포넌트 템플릿을 정의하는 방법들 Vue Router 기본편에서, Vue 는 angularjs처럼 templateUrl 을 template 부분에 활용할 수 없다고 하였는데요. 그럼, Vue 에서 컴포넌트 템플릿을 정의하는 방법들에는 어떤한 것들이 있는지 자세히 알아 보도록 하겠습니다. https://vuejs.org/2015/10/28/why-no-template-url/ Why Vue.js doesn't support templateURL — Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org Vue 의 저자 에반 유의 입장도 정리해 보았었는데요. 요약해 보면, 컴포넌트 입장에서 html 과 js 코딩이 분리 되지 않도록 .. 2020. 7. 21.
[Hoon] Vuejs 강의 - Vue.js Firebase + Validation 개발 Vue Example - Firebase + Validation 개발 vue.js Example 원본 -> https://github.com/vuejs/vue/tree/dev/examples/firebase [ 설치 ] 또는: JSFiddle - https://jsfiddle.net/ JSFiddle 에 바로 적용해 분석해 보기 [html] {{user.name}} - {{user.email}} X Name cannot be empty. Please provide a valid email address. [css] body { font-family: Helvetica, Arial, sans-serif; } ul { padding: 0; } .user { height: 30px; line-height: 3.. 2020. 6. 19.
[Hoon] Vuejs 강의 - Vue Modal Component 개발하기 Vue Modal Component 개발하기 - Hoon's vue.js Example 원본 -> https://github.com/vuejs/vue/tree/dev/examples/modal [ 설치 ] 또는: JSFiddle - https://jsfiddle.net/ JSFiddle 에 바로 적용해 분석해 보기 [html] Show Modal custom header [css] .modal-mask { position: fixed; z-index: 9998; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: table; transition: opacity 0.3s ease; } .modal.. 2020. 6. 2.
[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 Tree Example 개발하기 Vue Tree Example 개발하기 vue.js Example 원본 소스 -> https://github.com/vuejs/vue/tree/dev/examples/tree [ 설치 ] 또는: JSFiddle - https://jsfiddle.net/ JSFiddle 에 바로 적용해 분석해 보기 - [html] [css] body { font-family: Menlo, Consolas, monospace; color: #444; } .item { cursor: pointer; } .bold { font-weight: bold; } ul { padding-left: 1em; line-height: 1.5em; list-style-type: dot; } [javascript] var data = { nam.. 2020. 5. 28.
[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 강의 - 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.
인프런 인강 30%할인(7,700원) - Vue.js 핵심 강의! 강좌명 - [Vue.js 입문] Javascript Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 실습 30% 할인 (7,700원으로 수강) 강의 수강평도 부탁드립니다. bit.ly/2TtRHis [Vue.js입문~초급] Javascript 초보 Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 - 인프런 이 강의는 초보 Javascript 개발자가 직접 Real 웹앱을 개발할 수 있는 개발자가 되는 것에 초점을 맞추고 있습니다. 이 강의를 수강하시면 Vue.js 와 관련된 기본적인 개념부터 Real 웹앱 개발을 해 볼 www.inflearn.com 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 강의 - v-for 와 컴포넌트 v-for 와 컴포넌트 https://kr.vuejs.org/v2/guide/list.html#v-for-와-컴포넌트 v-for를 컴포넌트에 직접 사용할 수 있습니다. Vue.component('todo-item', { props: ['text', 'isComplete'], template: '{{ text }}, {{ isComplete }}' }) new Vue({ el: '#app', data: { todos: [ { id: 1, text: 'Learn Vue', isComplete: false }, { id: 2, text: 'Take out the trash', isComplete: false }, { id: 3, text: 'Mow the law', isComplete: false } ] } .. 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.