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年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"の例もチェックしてみてください。
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で双方向バインディングを行うのは非常に簡単です。
実際の例をここで確認してください。