Vue.jsとは？

Vue.jsはインタラクティブなWebインターフェースを構築するためのライブラリです。

Vue.jsはMVVMデータバインディングと構成可能なコンポーネントシステムを提供し、シンプルで柔軟なAPIを備えています。

この章はVue1.xバージョンに関する内容です。Vue2.xをご覧になりたい場合は、以下のリンクをクリックしてください。

Vue.js2.0チュートリアル：http://www.example.com/vue2/vue-tutorial.html

Vue2.0初心者入門：http://www.example.com/w3cnote/vue2-start-coding.html

Vue.js3.xチュートリアル：https://www.example.com/vue3/vue3-tutorial.html

Vue.jsの特徴

• シンプル：HTMLテンプレート + JSONデータ、そしてVueインスタンスを作成するだけ。これほど簡単です。
• データ駆動：依存関係を自動追跡するテンプレート式と算出プロパティ。
• コンポーネント化：疎結合で再利用可能なコンポーネントを使用してインターフェースを構築します。
• 軽量：~24kb min+gzip、依存関係なし。
• 高速：正確で効率的な非同期バッチDOM更新。
• モジュール親和性：NPMまたはBowerでインストールでき、ワークフローにシームレスに統合されます。

以下のようなものが好きなら、Vue.jsを気に入るはずです：

• 拡張可能なデータバインディングメカニズム
• ネイティブオブジェクトがそのままモデル
• 簡潔で明確なAPI
• コンポーネント化されたUI構築
• 複数の軽量ライブラリと組み合わせて使用

---

Vue.jsのインストール

独立バージョン

直接ダウンロードして<script>タグで読み込むと、Vueはグローバル変数として登録されます。

Vue.js公式サイトのダウンロードアドレス：http://vuejs.org/guide/installation.html

公式サイトから直接プロダクションバージョンをダウンロードして、プロジェクトに適用できます。

または静的リソースCDNライブラリ（1.0.18バージョン）を使用できます：

https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/1.0.18/vue.min.js

NPMインストール

Vue.jsで大規模なアプリケーションを構築する場合は、NPMインストールを推奨します：

# 最新稳定版本
$ npm install vue
# 最新稳定 CSP 兼容版本
$ npm install vue@csp
# 开发版本（直接从 GitHub 安装）
$ npm install vuejs/vue#dev

Bowerインストール

# 最新稳定版本
$ bower install vue

---

最初のVueアプリケーションを作成する

次に、最初のVueアプリケーションを作成します。

Viewレイヤー- HTMLコードは以下のとおりです：

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

Modelレイヤー- JavaScriptコードは以下のとおりです（指定されたHTML要素の後に配置する必要があります）：

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

試してみる »

---

双方向データバインディング

次に、viewレイヤーのHTMLファイル：vueapp.htmと、modelレイヤーのファイル：vueapp.jsを作成し、vue.js（v-modelディレクティブを使用）を通じて中間の基盤ロジックを完成させ、バインディングの効果を実現します。どちらかのレイヤーを変更すると、もう一方のレイヤーも変更されます。

vueapp.htmファイルのコード：

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

vueapp.jsファイルのコード：

new Vue({
  el: '#app',
  data: {
    message: 'サンプル!'
  }
})

試してみる »

上記の例では、{{message}}は入力ボックスinputの変更に応じて変わります。変更させたくない場合は、次のように修正できます：

{{* message }}

また、いくつかの簡単な式もサポートしています：

<!-- 字符串连接 -->
{{ message + '官网地址：www.example.com' }}
<!-- 字符串反转 -->
{{ message.split('').reverse().join('') }}

試してみる »

リスト出力

リスト出力にはv-for（v-forは1.0以前のバージョンのv-repeatに取って代わりました）このディレクティブで実現できます：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル(example.com)</title>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/1.0.18/vue.min.js"></script>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ul>
</div>
<script>
    new Vue({
  el: '#app',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue.js' },
      { text: 'Build Something Awesome' }
    ]
  }
})
</script>
</body>
</html>

試してみる »

多次元配列の例

<div id="app">
  <ul id="example-2">
  <li v-for="item in items">
    {{ parentMessage }} - {{ $index }} - {{ item.message }}
  </li>
</ul>
</div>
<script>
var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'サンプル官网',
    items: [
      { message: 'www.example.com' },
      { message: 'www.example.com' }
    ]
  }
})
</script>

試してみる »

---

条件分岐

文字列テンプレート（Handlebarsなど）では、次のように条件ブロックを書く必要があります：

<!-- Handlebars 模板 -->
{{#if ok}}
  <h1>Yes</h1>
{{/if}}

Vue.jsでは、v-ifディレクティブを使用して同じ機能を実現します：

<h1 v-if="ok">Yes</h1>

v-elseを使用して「else」ブロックを追加することもできます：

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

試してみる »

v-ifはディレクティブなので、要素に追加する必要があります。しかし、複数の要素を切り替えたい場合はどうでしょうか？その場合は、<template>要素をラッパー要素として使用し、その上でv-ifを使用できます。最終的なレンダリング結果にはこの要素は含まれません。

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-show

v-showの機能はv-ifに似ていますが、異なる点はv-showの要素は常にレンダリングされDOMに保持されることです。また、v-showは<template>タグをサポートしていません。

<h1 v-show="ok">Hello!</h1>

---

フィルター

Linuxのパイプと同様に、vue.jsでも|を使用します：

{{message | uppercase}}

これでmessageの大文字を出力できます。フィルターは連結して使用することもできます：

{{message | reverse | uppercase}}

ここでreverseは組み込みのフィルターではありません。Vue.filterを使用してカスタム定義できます：

Vue.filter('reverse', function (value) {
    return value.split('').reverse().join('')
})

試してみる »

---

参考ドキュメント

公式サイト：http://vuejs.org/

公式ドキュメント：http://cn.vuejs.org/examples/