クイックスタート

Vuejsは、JavaScriptのフレームワークを主にユーザーインターフェイスと単一のページアプリケーションを作成するために使用されます.
それはあなたのHTMLコードにロジックを追加することができますし、簡単にHTMLコンテンツをJavaScriptデータをリンクすることができます.
このチュートリアルでは、クールなWebアプリケーションの構築を開始するために主な機能を参照してください.
あなたが初めてVueを発見しているならば、私はあなたが本稿で示される例を試してみるのを奨励します.学ぶ唯一の方法は自分で練習することです!

プロジェクトを設定する
プロジェクトにVueを含めるには、ドキュメントの先頭部分に次のスクリプトタグを追加します.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

次に、div のapp 本体セクションでは、Webアプリケーション全体が含まれます.

<div id="app"></div>

それから、あなたのJavaScriptコードがあるもう一つのスクリプトタグを加えてください.私たちはapp Vueを設定する変数.

<script>
const app = new Vue({
  el: '#app', // refers to container div
  data: {
    message: 'Hello World!' // just some example data
  }
})
</script>

Vueで使用する任意のデータをする必要がありますdata オブジェクトmessage 価値の特性'Hello Vue!' .
そして、それはセットアップVueにそれです!Vueの主要な特徴を見てみましょう.Vueが指定された要素でのみ使用できることを忘れないでくださいdiv とapp ID.

HTMLに変数を含む
次のコードスニペットは、message 変数div . 値が変わるならば、HTMLは自動的に更新されます.

<h1>{{ message }}</h1>

更新するmessage 変数を参照する必要がありますapp.message , それが財産であるのでapp オブジェクト.

HTMLの条件
特定の条件が満たされた場合、HTMLをレンダリングするには、v-if ディレクティブ.

data: {
  displayMessage: false
}

<h1 v-if="displayMessage">This message will only be shown if displayMessage is true!</h1>

HTMLのループ
あなたがAを持っていると言いましょうfruitNames 配列のようになります.

data: {
  fruitNames: ["Apple", "Pear", "Banana"]
}

VUEを使って簡単に配列のHTMLリストを作成できます.

<ul>
  <li v-for="fruit in fruitNames">{{ fruit }}</li>
</ul>

次のHTMLリストを出力します

アップル

梨

バナナ

そして、配列が修正されるならば、HTMLリストはそれに応じて更新されます.
ループのvueのインデックスにアクセスするには、次のようにします.

<ul>
  <li v-for="(fruit, index) in fruitNames">{{ index }}: {{ fruit }}</li>
</ul>

上のコードがこのリストを出力します.

0 :アップル

1章PEAR

2:バナナ

さらに、次のように数の範囲でループできます.

<ul>
  <li v-for="i in 5">{{ index }}</li>
</ul>

この例はこのリストを生成します.

1

2

3

4

5

HTML属性のバインド
HTML要素内のテキストをJavaScript変数にバインドできるように、HTML要素の属性をバインドして変数を使用できます.
以下に例を示します.あなたが持っていると言いましょう<input> チャットアプリケーションの場合は、そのプレースホルダの属性を受信者の名前にバインドします.以下はVueを使って行う方法です.

data: {
  recipient: "John"
}

<input v-bind:placeholder="'Send a message to' + recipient">

If recipient 変更、入力のプレースホルダーが更新されます!
最良の部分はどんなHTML属性でもこれを行うことができるということですtitle or class .
なぜならv-bind が最も使われているVueディレクティブの一つです.: . つまり、:placeholder の代わりにv-bind:placeholder 上の例では.

例外v-on縛る"on" HTML属性onclick or onchange , あなたは、使用しないでくださいv-bind 代わりにv-on ディレクティブ

<button v-for="i in 10" v-on:click="doSomeStuff(i)">{{i}}</button>

この例では、10個のボタンを作成しますdoSomeStuff を返します.
再び.v-on は非常によく使われるディレクティブです.@click と同じですv-on:click .

結合
Webページをプログラミングするとき、JavaScript変数を使ってHTML入力の値をバインドしたいということがよくわかります.Vueは、超簡単に、とv-model ディレクティブ.次のように使用します.

data {
  name: 'John'
}

<input v-model="name">
<p>{{name}}</p>

この例は、name デフォルトの値'John' , そして、入力が変わるときはいつでも、自動的にその資産を変えるHTML入力をつくってください.

結論
それはHTMLに様々なロジック要素を提供するように、私たちが見たように、Vueは本当にHTMLのDOMをJavaScriptと接続することになるとゲームチェンジャーです.vueを用いた場合,条件付きレンダリングや状態管理などの問題は容易に解決できる.