Vue.jsをさわってみる

Vue.jsを使いたければ、cdnからインポートできる。

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

上の一行を追加するだけだ。

<html>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<h1>Vue.js</h1>
<div id="app">
  Hello {{ message }} !
  <button @click="update">change</button>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'World'
  },
  methods: {
    update() {
      this.message = 'Vue.js'
    }
  }
})
</script>
</body>
</html>

記述の形は、JQueryAjaxの書き方に少し似た形をしている。
最初、Hello {{ message }} !の {{ message }}にはWorldが渡っているが、
ボタンをクリックするとmethodsのupdate()が処理されて{{ message }}にVue.jsという文字が渡る。
結果、最初はHello World !と表示されていたがボタンをクリックするとHello Vue.js !に表示が変わる。