利用Bootstrap+Vue+Flask 制作一个todolist

快速完成一个包含前后端的todolist应用，利用Bootstrap+Vue+Flask是个不错的选择。

后台： Flask 负责路由、逻辑控制
前台： Vue 负责用户事件监听和响应 bootstrap完成界面美化
数据： Ajax 实现前后台数据传递

这几个框架单个的使用并不复杂，但当把它们放在一块时，框架间有效的结合是一个需要注意的问题。

Vue+Flask
当把Vue写成的todolist放入到flask下启动运行后，在输入框发现输入内容后，列表中并未显示，但是JS没有提示报错。可是在前台单独使用todolist,却没有问题。 这说明可能有两个原因 1 flask本身的问题 2 两者结合时出了问题。后来发现是因为Flask自带的jinjia模板渲染方式{{ }}与vue的渲染方式冲突，解决的方法很简单，改变其中一种渲染的格式即可。不过后来在网上找到了一种更简单的方式，把Vue中{{ }}渲染部分直接变成 v-text形式，避免Vue出现{{ }}格式， 对于todolist来说，这种方法足够了。

Vue+Bootstrap
Bootstrap包含UI渲染和JQ插件两大部分, 利用Vue v-bind:class 指令，Bootstrap的UI渲染功能可以很方便的完成界面美化工作。但是JQ插件与Vue之间的结合就不太好。
预想的todolist功能中，当用户在没有输入内容就点击提交时，会弹出一个提示框。在具体实现这个效果时，起初直接引入了 Bootstrap提供的JQ弹出框插件，直接点击这个弹出框就可以完成关闭事件，不需要Vue的介入。再次开启的过程，也同样是独立的代码完成的。也就是说，弹出框事件的开启和关闭的控制过程完全交给了JQ插件。Vue失去了控制权，这实际上不利于后期的管理和维护。所以，最后放弃使用JQ的弹出插件，而是选择了一个只有展示界面的选择框，通过显示和隐藏完成交互，与此同时，引入setTimeout(),让警告框自动关闭，提供良好的用户体验。

源码：https://github.com/guangruixiao/vue.js/tree/master/todolist