python flask jinja2使用Vue,并解决jinja2和vue冲突

本文主要是介绍python flask jinja2使用Vue,并解决jinja2和vue冲突，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

http://www.axios-js.com/zh-cn/docs/
axios官网

方法1

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue"></script><script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script></head>
<body><div id="app"><select ><option v-for="item in selects" :value="item">[[item]]</option></select><h2>{{item}}</h2><div v-for="udata in userData">[[ udata.name ]]</div></div><script>const vue = new Vue({el:"#app",delimiters: ["[[", "]]"],data:{selects:['enu','cha'],userData:[]},created: function() {var self = thisaxios.get('/api/tasks').then(function (response) {self.userData = (response.data);}).catch(function (error) {console.log(error);});// $.getJSON('/api/tasks', function(data) {//     console.log(data);//     self.userData = data;//     console.log(self.userData);// })}})</script>
</body></html>

WanmaitFlask这种方式是直接disable掉jinjia2的

from flask import Flask
from flask import render_template
from flask import jsonifyclass WanmaitFlask(Flask):jinja_options = Flask.jinja_options.copy()jinja_options.update(dict(variable_start_string='%%',# Default is '{{', I'm changing this because Vue.js uses '{{' / '}}'variable_end_string='%%',))
app=WanmaitFlask(__name__)@app.route("/test")
def test():return render_template("test.html",item=[123,345])@app.route("/api/tasks")
def tasks():lists=[{"name":"123"},{"name":"123"},{"name":"123"},{"name":"123"}]return jsonify(lists)if __name__ == '__main__':app.run("0.0.0.0",8888,debug=True)

https://www.jb51.net/zt/jquerydown.htm
这是js 路径

方法2 更改vue的数据绑定方式

from flask import Flask
from flask import render_template
from flask import jsonify# class WanmaitFlask(Flask):
#     jinja_options = Flask.jinja_options.copy()
#     jinja_options.update(dict(variable_start_string='%%',
#                               # Default is '{{', I'm changing this because Vue.js uses '{{' / '}}'
#                               variable_end_string='%%',))
app=Flask(__name__)@app.route("/test")
def test():return render_template("test.html",item=[123,345])@app.route("/api/tasks")
def tasks():lists=[{"name":"123"},{"name":"123"},{"name":"123"},{"name":"123"}]return jsonify(lists)if __name__ == '__main__':app.run("0.0.0.0",8888,debug=True)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue"></script><script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script></head>
<body><div id="app"><select ><option v-for="item in selects" :value="item">[[item]]</option></select><h2>{{item}}</h2><div v-for="udata in userData">[[ udata.name ]]</div></div><script>const vue = new Vue({el:"#app",delimiters: ["[[", "]]"],data:{selects:['enu','cha'],userData:[]},created: function() {var self = thisaxios.get('/api/tasks').then(function (response) {self.userData = (response.data);}).catch(function (error) {console.log(error);});// $.getJSON('/api/tasks', function(data) {//     console.log(data);//     self.userData = data;//     console.log(self.userData);// })}})</script>
</body></html>