[Hoon] Vuejs 강의 - codesandbox 로 Vue SFC 환경 맛보기

codesandbox 로 Vue SFC 환경 맛보기

https://codesandbox.io

CodeSandbox: Online IDE for Rapid Web Development

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

• main.js

  render - https://kr.vuejs.org/v2/guide/render-function.html

// 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에서는 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/3fXOzon

인프런 인강 선착순 30% 마지막 할인 쿠폰 - Vue.js 핵심 강의!

bit.ly/2TtRHis

[Vue.js 입문] 초보 실전 웹앱 개발 - 1부 : vue 개념 ~ 핵심 - 인프런