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에서 양방향 바인딩을 수행하는 것은 매우 쉽습니다.

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

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow

Vue.js 튜토리얼
Vue.js 시작하기

수색…

비고

버전