Vue.jsをはじめてみます③

Vue.jsをはじめて勉強中です。

前回はVueが定義されるところを理解しました。

今回はサンプルコードと説明をもとにまた進めていきます。

購入した書籍はこちら。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id="app">

<p>{{message}}</p>

</div>

<script>

  new Vue({

    el: '#app',

    data: {

        message: 'こんにちは！'

    }

  })

</script>

Vueを定義する際にオプションが指定できて、上のコードだとel/dataがオプション指定されています。

elプロパティは、DOM要素のオブジェクトかCSSセレクタの文字列が使える

#app の要素をマウントしてその要素と子要素を置き換える

DOM要素のオブジェクトの場合はこんな感じで確認できました。

el: document.getElementById('app')

マウントはメソッドによるマウントもできる

new Vue({...}).$mount('cssセレクタ/DOM要素オブジェクト')

インスタンス生成後の任意のタイミングでマウント実行できる

dataプロパティはUIの状態になりリアクティブシステムにのります。

例えば同じコードでjsfiddle.netで、jsfiddle.netのconsoleから

vm.message='hello!'

と入力して実行すると画面はhello!に変わります。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id="app">

<p>{{message}}</p>

</div>

<script>

  var vm = new Vue({

    el: '#app',

    data: {

    message: 'こんにちは！'

    }

  })

</script>

本日はここまでにしておきます。