【Django】Vue.jsを触ってみる

初期値から1秒ごとに1ずつ増えていくアプリです。初期値はviewsから引っ張ってくることとします。

ソースコード

scriptはvue.jsのチュートリアルを参考にしています。

test.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@next"></script>
    <script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.0/dist/js.cookie.min.js"></script>
</head>
<body>
  <h1>This is test page</h1>
  <p>{{test_text}}</p>
  <br>
  <div id="counter">
    Counter: [[ counter ]]
  </div>
  <script>
    const Counter = {
  data() {
    return {
      counter: {{ counter_init }}  # ここ
    }
  },
  mounted() {
    setInterval(() => {
      this.counter++
    }, 1000)
  },
  delimiters: ['[[', ']]']
}
Vue.createApp(
  Counter
).mount('#counter')
</script>

</body>
</html>

views.py

from django.views.generic import TemplateView
from django.shortcuts import render


class Test(TemplateView):
    template_name = 'test.html'

    def test(self):
        context = {
            'test_text': "This is Django test text!",
            'counter_init': 100
        }

        return render(self, 'test.html', context)