본문 바로가기
Frontend/Vue

Vue.js 강의 - codesandbox 로 Vue SFC 환경 맛보기

by 훈즈 플로거 2020. 5. 13.

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

  1. Create a Sandbox, it's free
  2. Vue

// very short - es6 arrow function render: h => h (App) // short render: function(h) { return h(App); } // Real render: function (createElement) { return createElement(App); }

$mount - https://kr.vuejs.org/v2/api/index.html?#vm-mount

// 생성하고 #app에 마운트 합니다. new Vue().$mount('#app'); // 위와 같습니다. new Vue({ el: '#app' });

  • index.html
  • App.vue

    export Default - 단일 object 를 전달합니다.

  • HelloWorld.vue

    style scoped - scss(scoped css) css 의 충돌을 해결하고 각각의 컴포넌트 내에 독립적으로 적용

  • package.json - 먼저 node.js 에 대해서 먼저 알아보겠습니다. https://ko.wikipedia.org/wiki/Node.js
 

Node.js - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. Node.js는 확장성 있는 네트워크 애플리케이션(특히 서버 사이드) 개발에 사용되는 소프트웨어 플랫폼이다. 작성 언어로 자바스크립트를 활용하며 Non-blocking I/O��

ko.wikipedia.org

node.js에서는 Node Package Manager를 NPM 이라고 합니다. NPM 은 이 package.json 이라는 파일로 패키지 관리를 합니다. package.json은 project의 정보와 의존성을 관리할 수 있습니다.

name, version, scripts(serve, build, lint), dependencies(production), devDependencies(dev, non production)

new Vue vs export Default

vue instance 는 parent 에 적용하는 것으로 component 로 다른 component 나 다른 화면에서 import 되는 것은 불가능합니다.

export 는 Object 를 전달할때 사용하는 전달 함 수 인데, 다중 object 전달이 가능합니다. 이때, export Default 는 단일 object 를 전달 할 때 사용합니다.

컴포넌트를 하나의 단일 object 로 전달함으로써 전달 받은 곳에서도 그것을 쉽게 컨트롤하고 활용할 수 있게 됩니다.

bit.ly/2LMzjNC

 

[인프런 인강] 선착순 100명 50% 할인쿠폰! - [Vue.js] Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법

인프런 인터넷 강의 선착순 100명 50% 할인쿠폰! [Vue.js] javascript Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법 쿠폰번호 : 678-ee6aa5185caa 사용법 : 결제시 쿠폰코드 등록을 통해 적용 기한 : 2020년 6월..

plogger.tistory.com

bit.ly/2TtRHis

 

[Vue.js] Javascript Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법 - 인프런

이 강의를 수강하시면 Vue.js 와 관련된 기본적인 개념부터 Real 웹앱 개발을 해 볼 수 있습니다. 이 강의는 1부 기본기 이며, 2부와 3부를 통해서 실제 Real 웹앱을 구현해 보도록 하겠습니다. 초급 ��

www.inflearn.com

 

댓글0