Vue.js 튜토리얼
Vue.js 시작하기
수색…
비고
Vue.js 는 Angular.js , Reactive.js 및 Rivets.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 템플릿
<div id="app">
{{ message }}
</div>
자바 스크립트
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
이 예제의 라이브 데모 를보십시오.
Vue.js에서 만든 "Hello World"예제 를 확인해 볼 수도 있습니다.
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 과 같이 추가하십시오.
{
"presets": ["es2015"],
"plugins": ["transform-vue-jsx"]
}
VUE JSX 샘플 코드 :
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
methods: {
handleClick () {
alert('Hello!')
}
},
render (h) {
return (
<div>
<h1 on-click={this.handleClick}>Hello from JSX</h1>
<p> Hello World </p>
</div>
)
}
})
JSX를 사용하면 JavaScript 코드를 작성하는 것과 동일한 파일에 간결한 HTML / XML 형 구조를 작성할 수 있습니다.
축하합니다, 완료되었습니다 :)
사용자 입력 처리
VueJS는 사용자 입력을 쉽게 처리 할 수 있으며 v-model을 사용하는 양방향 바인딩은 데이터를 쉽게 변경하기 쉽습니다.
HTML :
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
{{message}}
<input v-model="message">
</div>
JS :
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
v-model 지시문을 사용하여 VueJS에서 양방향 바인딩을 수행하는 것은 매우 쉽습니다.
실례를 여기서 확인하십시오.
