Vue.jsの基本

2019/01/05

Vue.jsの基本形について書き留めておきます。

[ad#top-1]

完成形

こちらが完成形です。「change」ボタンを押すと「Hello World !」という文字が「Hello Vue.js !」に変わるようになります。

ソースコード

ソースコードは以下のとおりです。

<!DOCTYPE html>
<html lang="jp">
<head>
  <title>Vue Test #1</title>
</head>
<body>
<h1>Vue Test #1</h1>
<div id="app">
  Hello {{ message }} !
  <button @click="update">change</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      message: 'World'
    },
    methods: {
      update() {
        this.message = 'Vue.js'
      }
    }
 })
</script>
</body>
</html>

[ad#ad-1]

- Vue.js