Vue.js 시작하기

Download vue.js eBook

비고

Vue.jsAngular.js , Reactive.jsRivets.js 에서 영감을 얻은 JavaScript 용 프런트 엔드 프레임 워크로 급격히 성장하고 있습니다.이 프레임 워크는 단순한 사용자 인터페이스 디자인, 조작 및 심층 반응 기능을 제공합니다.

MVVM 패턴 화 된 프레임 워크 인 Model-View View-Model 은 구성 요소 및 뷰에 대한 양방향 바인딩 데이터의 개념을 기반으로합니다. 엄청나게 빠르며 다른 최상위 JS 프레임 워크의 속도를 능가하며 손쉬운 통합과 프로토 타이핑을 위해 매우 사용자 친화적입니다.

버전

번역 출시일
2.4.1 2017-07-13
2.3.4 2017-06-08
2.3.3 2017-05-09
2.2.6 2017-03-26
2.0.0 2016-10-02
1.0.26 2016-06-28
1.0.0 2015-10-26
0.12.0 2015-06-12
0.11.0 2014-11-06

"여보세요, 세상!" 프로그램

Vue.js를 사용하려면 HTML에 스크립트 파일이 포함되어 있는지 확인하십시오. 예를 들어, HTML에 다음을 추가하십시오.

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
 

간단한 예

HTML 템플릿

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
 

자바 스크립트

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
 

이 예제의 라이브 데모 를보십시오.


Vue.js에서 만든 "Hello World"예제 를 확인해 볼 수도 있습니다.

사용자 입력 처리

VueJS는 사용자 입력을 쉽게 처리 할 수 ​​있으며 v-model을 사용하는 양방향 바인딩은 데이터를 쉽게 변경하기 쉽습니다.

HTML :

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
    {{message}}
<input v-model="message"> 
</div>
 

JS :

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
    {{message}}
<input v-model="message"> 
</div>
 

v-model 지시문을 사용하여 VueJS에서 양방향 바인딩을 수행하는 것은 매우 쉽습니다.

실례를 여기서 확인하십시오.

Vue 2의 Hello World (JSX 방식)

JSX는 브라우저에 의해 해석되지 않습니다. 먼저 표준 Javascript로 이동해야합니다. JSX를 사용하려면 babel babel-plugin-transform-vue-JSX 용 플러그인을 설치해야합니다.

아래 명령을 실행하십시오.

npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props --save-dev
 

.babelrc 과 같이 추가하십시오.

npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props --save-dev
 

VUE JSX 샘플 코드 :

npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props --save-dev
 

JSX를 사용하면 JavaScript 코드를 작성하는 것과 동일한 파일에 간결한 HTML / XML 형 구조를 작성할 수 있습니다.

축하합니다, 완료되었습니다 :)

Stats

497 Contributors: 16
Wednesday, August 2, 2017
아래 라이선스: CC-BY-SA

와 제휴하지 않음 Stack Overflow
Rip Tutorial: info@zzzprojects.com

eBook 다운로드