djangoとvueのテンプレート

django

djangoのテンプレートエンジンとvue.jsのテンプレートの構文が似ているので、同時に使うのは厳しいと思っていた時期が僕にもありました。

いちいち、別の静的ファイルに書き出してscriptタグで指定は正直だるかった。

たまたま検索かけてみたら、vue.jsのdelimitersを指定するだけで、回避できるっぽい。

<html>
    <head>
       <meta charset="utf-8" />
       <title>Delimiters Sample</title>
       <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   </head>
    <body>
        <div id="app">
            <p>[[message]]</p>
            <ul>
                <li v-for="m in items" :key="m.id">
                    [[m.text]]
                </li>
            </ul>
        </div>
        <script>
           var app = new Vue({
               delimiters: ['[[', ']]'],
               el: '#app',
               data: {
                   message: 'Hello Vue',
                   items: [{id: 1, text:"sample1"},{id: 2, text: "sample2"}],
               },
           })
       </script>
    </body>
</html>

delimitersで色々変えられるみたいなので、いちいち外部にやったりしなくてもいい！！最高！！