[Vue.js] Vue.js 사용하기 with jinja2, flask

0. 들어가기

-. Vue.js 사용법 익히기

-. 공식 document 따라서 시작함.

1. 설치 및 테스트

-. jquery 설치(?)와 동일하게, CDN 링크를 추가하거나, static 폴더에 vue js 추가를 할 수 있다.

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

파일 업로드: <script  src="{{ url_for('static', filename='vue.js') }}"></script>

-. 예제를 따라 하되, flask + jinja2 구조를 쓰는 내 서버 구조 상, html 파일 내에 아래와 같은 구조 ( {{'{{ variable }}'}}) 구조로 이중 괄호를 두 번 써줘야 한다. 이것 하나를 못해서 30분동안 끙끙거렸다.

<div id="app">
---- {{ '{{ message }}' }}
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: '안녕하세요 Vue!'
  }
})
</script>

-. 출력물의 HTML 소스는 아래와 같이, jinja2의 이중괄호 ({{ ~ }})가 빠진 상태로 보인다.

<div id="app">
---- {{ message }}
</div>

</div>
    <div id="footer">
        
        &copy; Copyright 2021 by <a href="https://givemethesocks.tistory.com/">DongtanDobby</a>.
        
    </div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: '안녕하세요 Vue!'
  }
})
</script>

-. 웹 뷰에서는 {{message}} 부분이 vue에서 설정한 출력결과로 대체됨.