Vue.js のデータバインディング

※ これは 2019/12/20 時点の node.js v13.2.0 vue/cli v4.1.1 の情報です

最新版では動作が異なる可能性がありますのでご注意ください

前回 Vue.js のサンプルアプリを TypeScript に書き換えて実行できたので、このサンプルを触りつつ Vue.js のデータバインディングを試してみます

Vue.js + TypeScript + Electron

スポンサードリンク

データバインディングを試す前にサンプルのソースをごそっと削ってシンプルにしてみます

まずは App.vue

<template>
  <div id="app">
    <HelloWorld msg="Hello world"/>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';

@Component({
  components: {
    HelloWorld,
  },
})
export default class App extends Vue {}
</script>

<div id="app"> の内部の <img> を削除、<HellowWorld> コンポーネントの msg="Helloe world" に書き換えて、<style> 関連の装飾を削除しました

次に HellowWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
}
</script>

こっちも <div class="hello"> の内部を <h1>{{ msg }}</h1> だけにして <style> 関連の装飾を削除しました

さてこれでアプリ実行すると・・・

One-way データバインディング

ちゃんと {{ msg }} が Hello world に書き換わりました

これだけだとあまり面白くないので、さらに双方向データバインディングしてみたい

HellowWorld.vue を下記のように書き換えます

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <input v-model="msg"/>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
}
</script>

変えたところは <input v-model="msg"/> を追加しただけ！

もう一度実行！

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

双方向データバインディングができており、入力欄の文字列を変更すると msg の方も更新されました！