본문 바로가기

vuejs강의3

[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.