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

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

반응형

0. 들어가기

-. Vue.js 사용법 익히기

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

1. 설치 및 테스트

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

CDN: 파일 업로드:

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

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

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

---- {{ message }} © Copyright 2021 by DongtanDobby. var app = new Vue({ el: '#app', data: { message: '안녕하세요 Vue!' } })

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

반응형

from http://givemethesocks.tistory.com/58 by ccl(A) rewrite - 2021-03-23 00:00:23