VUE研究ノート（1）

宣言型のレンダリング。

言うことですVueの、データおよびDOMバインディングにより、JSコードデータは、あなたは、JS内のデータを変更、DOMが変更されます。

let app = new Vue({
  el: '#app',
  data: {
    message: 'Hello world!',
  }
})

上記の例では、データメッセージのステートメントは、あなたがHTMLページに、この変数の値を使用することができます。この変数を変更するには、あなたのJSコードたら、HTML DOMに結合対応も変更しました。

我々はいくつかの結合の形を見てみましょう。

• Bindingプロパティ値

  <div v-bind:title="message"></div>
  

• 結合条件

  <div v-if="isvisible">ABC</div>
  

• ループバインド配列

  <li v-for="todo in todos">
    {{ todo.text }}
  </li>
  

• イベントハンドラをバインド

  <button v-on:click="reverseMessage">反转</button>
  

• Vモデルの双方向バインディング式

  <input v-model="message">
  

これは、ユーザーの利益は、メッセージの値が変更された入力値バインディング入力ボックスです。