flask和vue的冲突问题
生活随笔
收集整理的這篇文章主要介紹了
flask和vue的冲突问题
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
###################################################################
下面提供兩種index.html（都是完整的）
都位于
templates下面。
###################################################################
index.html方法一:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 測試實例 - 菜鳥教程(runoob.com)</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script> </head> <body>{% raw %} <div id="app">{{info}} </div>{% endraw %} <script type = "text/javascript">new Vue({el: '#app',data: {info: null},// delimiters:['[[', ']]'],mounted () //這個其實是一個鉤子函數{// axios// .post('https://www.runoob.com/try/ajax/demo_axios_post.php')// .then(response => (this.info = response))// .catch(function (error) { // 請求失敗處理// console.log(error);});let param = new URLSearchParams()//這個用法來自:// https://www.cnblogs.com/yiyi17/p/9409249.htmlparam.append('url', 'www.baidu.com')param.append('name', '菜鳥教程')axios({method: 'post',url: 'http://127.0.0.1:10072/post_method',data: param}).then(response => {console.log("---------------------下面打印response---------------------");console.log(response);console.log("---------------------下面打印this---------------------");console.log(this);console.log("----------------------下面打印this.info--------------------");(this.info = (response.data))console.log(this.info);}).catch(function (error) {console.log(error);});// 請求失敗處理}})//vue </script> </body> </html> </html>index.html方法二:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 測試實例 - 菜鳥教程(runoob.com)</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script> </head> <body><div id="app">[[info]] </div><script type = "text/javascript">new Vue({el: '#app',data: {info: null},delimiters:['[[', ']]'],mounted () //這個其實是一個鉤子函數{// axios// .post('https://www.runoob.com/try/ajax/demo_axios_post.php')// .then(response => (this.info = response))// .catch(function (error) { // 請求失敗處理// console.log(error);});let param = new URLSearchParams()//這個用法來自:// https://www.cnblogs.com/yiyi17/p/9409249.htmlparam.append('url', 'www.baidu.com')param.append('name', '菜鳥教程')axios({method: 'post',url: 'http://127.0.0.1:10072/post_method',data: param}).then(response => {console.log("---------------------下面打印response---------------------");console.log(response);console.log("---------------------下面打印this---------------------");console.log(this);console.log("----------------------下面打印this.info--------------------");(this.info = (response.data))console.log(this.info);}).catch(function (error) {console.log(error);});// 請求失敗處理}})//vue </script> </body> </html> </html>?
總結
以上是生活随笔為你收集整理的flask和vue的冲突问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： TypeError: the JSON
- 下一篇： vue-cli的初步使用