Flask + Vue
文章來源：http://blog.csdn.net/kevin_qq/article/details/52871700#
Flask為輕量級Web后臺框架，Vue為輕量級網(wǎng)頁前臺框架，兩者配合，快速實(shí)現(xiàn)MVVM最合適不過了。
后臺--?Flask 處理M + C，實(shí)現(xiàn)數(shù)據(jù)Model化 + 路由、安全、邏輯控制。對用戶響應(yīng)，返回用Jinjia渲染的HTML模板頁面，同時ajax 把數(shù)據(jù)傳給 Vue
前臺-- Vue處理 VM (ViewModel) ，用戶瀏覽器接收到 HTML模板和數(shù)據(jù)后，JavaScript（Vue）處理數(shù)據(jù)，并按設(shè)計顯示
解決 Jinja2 {{ }}沖突
2016-10-30：
其實(shí)Vue內(nèi)部占位符{{ }}，都是轉(zhuǎn)換成v-text指令的！
所以，最清晰簡單的實(shí)施方法：Vue內(nèi)部全部用 v-text，而Jinja2還是用 {{ }} 占位符，兩不相干。
后臺 --?Flask用Jinjia渲染HTML頁面，并且把數(shù)據(jù)ajax傳給 Vue；
前臺 -- 用戶瀏覽器接收到 HTML，Javascript（Vue）處理數(shù)據(jù)，并按設(shè)計顯示
============================================
2016-10-20
Link。但還是會跟 Flask-Bootstrap的 {{ 沖突！
1
2app.jinja_env.variable_start_string='{{ '
app.jinja_env.variable_end_string=' }}'
最好的方案就是更改VUE的語法，在所有的項(xiàng)目中都是這樣定義的，寫在VUE代碼的前面即可，這樣代碼遷移也不會出問題
// ES6 模板字符串Vue.config.delimiters = ['${','}']// 修改文本插值的定界符。Vue.config.unsafeDelimiters = ['{!!','!!}']// 修改原生 HTML 插值的定界符。
Javascript 處理時間（類似 moment.js）
統(tǒng)一轉(zhuǎn)換成整形，Javascript是：1477888675755 -> 需要 /1000
1. 如果數(shù)據(jù)庫存儲的是UTC Datatime()類型，like "2016-10-31 04:35:44.244000", ? javascript:
2. 如果存儲是用的浮點(diǎn)數(shù)，Python: time.time() -> 1477885001.011
完整自定義過濾器如下：（直接在HTML里使用 filter就行）
Vue封裝 Bootstrap
https://yuche.github.io/vue-strap/
https://yuche.github.io/vue-strap/
Flask
https://pypi.Python.org/pypi/Flask-Vue
Vue.js 開發(fā)實(shí)踐：實(shí)現(xiàn)精巧的無限加載與分頁功能
Vue.js 實(shí)踐（2）：實(shí)現(xiàn)多條件篩選、搜索、排序及分頁的表格功能
Vue.js 實(shí)踐（3）：實(shí)現(xiàn)一個漂亮、靈活、可復(fù)用的提示組件
完美的圖標(biāo)字體?只為Bootstrap設(shè)計http://fontawesome.io/examples/
TIP:
如果是 spinner，在中間如果加字符（比如?）的話，旋轉(zhuǎn)起來會偏一邊！
