概要
flaskで簡単なアプリを作る際にフロントをvueとvuetifyで描きたい。
webpackを使うほどでもなかったのでcdnを使った時のメモ
問題
jinja2とvueのデリミタが一緒なのでどちらかを変更する必要がある
{{ message }} <=これ
今回はvue側を変える
ちなみにflaskのデリミタを変える方法もあるらしい
参考： FlaskとVue.jsを組み合わせて使う
cssを読み込む
<head lang="ja">
<!-- vuetify-material-design-icon -->
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">
<!-- vuetify -->
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
</head>
jsを読み込む
<body>
<div id="hoge">
(( message ))
</div>
<!-- vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<!-- vuetify -->
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
</body>
vueインスタンス作成
デフォルトのデリミタ {{ }} を (( ))に変える
var hoge = new Vue({
el: '#hoge',
delimiters: ["((","))"]
data: {
message: 'hoge'
}
)}