Vue.jsVue.jsの使い方


備考

Vue.jsは、 Angular.jsReactive.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年6月28日
1.0.0 2015-10-26
0.12.0 2015-06-12
0.11.0 2014年11月6日

"こんにちは世界!"プログラム

Vue.jsの使用を開始するには、HTMLにスクリプトファイルが含まれていることを確認してください。たとえば、HTMLに以下を追加します。

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

簡単な例

HTMLテンプレート

<div id="app">
  {{ message }}
</div>
 

JavaScript

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
 

この例のライブデモをご覧ください。


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:

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
 

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 ように追加してください:

{
  "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のような構造を書くことができます。

おめでとう、あなたは完了しました:)