零：与后端交互 - ajax

版本1 - 出现了跨域问题

前端：index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Vue与后端交互 - 出现了跨域问题</title>
  6.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  7.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
  8. </head>
  9. <body>
  10. <div id="box">
  11.     <button @click="handleClick">加载数据</button>
  12. </div>
  13. </body>
  14. <script>
  15.     let vm = new Vue({
  16.         el: '#box',
  17.         data: {},
  18.         methods: {
  19.             handleClick() {
  20.                 $.ajax({
  21.                     url: 'http://127.0.0.1:5000/',	// 发送请求的url，本地的5000端口，是flask的默认端口
  22.                     method: 'get',
  23.                     success: (data) => {
  24.                         console.log(data)
  25.                     }
  26.                 })
  27.             }
  28.         }
  29.     })
  30. </script>
  31. </html>

后端：main.py

  1. from flask import Flask	# 这里用轻量级的Flask框架来测试
  3. app = Flask(__name__)
  5. @app.route('/')
  6. def index():
  7.     print('请求来了')
  8.     return 'Hello World'
  10. if __name__ == '__main__':
  11.     app.run()

这里可以看出：前端向后端成功发送了请求，后端也成功响应了，但是前端却报错了

这是因为：跨域问题的存在，浏览器检测到前端和后端不是来自同一个域，所以认为这是不安全的，所以就拦截了该资源的传递

想要解决这个问题，就要实现：CORS，也就是 跨域资源共享

版本2 - 解决了跨域问题

前端：index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Vue与后端交互 - 解决了跨域问题</title>
  6.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  7.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
  8. </head>
  9. <body>
  10. <div id="box">
  11.     <button @click="handleClick">加载数据</button>
  12.     <p>加载的数据：{{myText}}</p>
  13. </div>
  14. </body>
  15. <script>
  16.     let vm = new Vue({
  17.         el: '#box',
  18.         data: {
  19.             myText: ''
  20.         },
  21.         methods: {
  22.             handleClick() {
  23.                 $.ajax({
  24.                     url: 'http://127.0.0.1:5000/',
  25.                     method: 'get',
  26.                     success: (data) => {
  27.                         console.log(data)
  28.                         this.myText = data
  29.                     }
  30.                 })
  31.             }
  32.         }
  33.     })
  34. </script>
  35. </html>

后端：main.py

  1. from flask import Flask, make_response
  3. app = Flask(__name__)
  5. @app.route('/')
  6. def index():
  7.     print('请求来了')
  8.     res = make_response('Hello World')
  9.     res.headers['Access-Control-Allow-Origin'] = '*'	# 访问控制允许的源 设置为全部
  10.     return res
  12. if __name__ == '__main__':
  13.     app.run()

版本3 - 后端读取json文件传到前端

json文件：file.json

  1. {
  2.   "name": "Darker",
  3.   "age": "18",
  4.   "gender": "male"
  5. }

前端：index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Vue与后端交互 - json</title>
  6.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  7.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
  8. </head>
  9. <body>
  10. <div id="box">
  11.     <button @click="handleClick">加载数据</button>
  12.     <p>加载的数据：{{myText}}</p>
  13. </div>
  14. </body>
  15. <script>
  16.     let vm = new Vue({
  17.         el: '#box',
  18.         data: {
  19.             myText: ''
  20.         },
  21.         methods: {
  22.             handleClick() {
  23.                 $.ajax({
  24.                     url: 'http://127.0.0.1:5000/',
  25.                     method: 'get',
  26.                     success: (data) => {
  27.                         console.log(data)
  28.                         this.myText = data
  29.                     }
  30.                 })
  31.             }
  32.         }
  33.     })
  34. </script>
  35. </html>

后端：main.py

  1. import json
  3. from flask import Flask, jsonify
  5. app = Flask(__name__)
  7. @app.route('/')
  8. def index():
  9.     print('请求来了')
  10.     with open('file.json', mode='rt', encoding='utf-8') as f:
  11.         dic = json.load(f)
  12.     res = jsonify(dic)
  13.     res.headers['Access-Control-Allow-Origin'] = '*'
  14.     return res
  16. if __name__ == '__main__':
  17.     app.run()

一：fetch

1.简介

① fetch介绍

提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应

它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源

② fetch基本格式

  1. fetch('http://example.com/movies.json')
  2.   .then(function(response) {
  3.     return response.json();
  4.   })
  5.   .then(function(myJson) {
  6.     console.log(myJson);
  7.   });

2.实例

json文件：file.json

  1. {
  2.   "name": "Darker",
  3.   "age": "18",
  4.   "gender": "male"
  5. }

后端：main.py

  1. import json
  3. from flask import Flask, jsonify
  5. app = Flask(__name__)
  7. @app.route('/')
  8. def index():
  9.     print('请求来了')
  10.     with open('file.json', mode='rt', encoding='utf-8') as f:
  11.         dic = json.load(f)
  12.     res = jsonify(dic)
  13.     res.headers['Access-Control-Allow-Origin'] = '*'
  14.     return res
  16. if __name__ == '__main__':
  17.     app.run()

前端：index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Vue与后端交互 - fetch</title>
  6.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  7.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
  8. </head>
  9. <body>
  10. <div id="box">
  11.     <button @click="handleClick">加载数据</button>
  12.     <p>加载的数据：</p>
  13.     <ul>
  14.         <li >姓名：{{name}}</li>
  15.         <li >年龄：{{age}}</li>
  16.         <li >性别：{{gender}}</li>
  17.     </ul>
  18. </div>
  19. </body>
  20. <script>
  21.     let vm = new Vue({
  22.         el: '#box',
  23.         data: {
  24.             name:'',
  25.             age: '',
  26.             gender: ''
  27.         },
  28.         methods: {
  29.             handleClick() {
  30.                 fetch('http://127.0.0.1:5000/').then(response => {
  31.                     return response.json()
  32.                 }).then(json => {
  33.                     console.log('从后端获取的json数据', json)   // success 获取的数据
  34.                     this.name = json.name
  35.                     this.age = json.age
  36.                     this.gender = json.gender
  37.                 }).catch(ex => {
  38.                     console.log('出现了异常', ex)    // 抛出异常
  39.                 })
  40.             }
  41.         }
  42.     })
  43. </script>
  44. </html>

二：Axios

1.简介

① Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

② axios官网：http://www.axios-js.com/

2.实例

json文件：film.json（这里只是一部分，原代码太多了...）

  1. {
  2.     "data":{
  3.         "films":[
  4.             {
  5.                 "actors":[
  6.                     {
  7.                         "avatarAddress":"https://pic.maizuo.com/usr/movie/45deca0f886633f1a8902f7eece4248a.jpg",
  8.                         "name":"林超贤",
  9.                         "role":"导演"
  10.                     },
  11.                     {
  12.                         "avatarAddress":"https://pic.maizuo.com/usr/movie/ff8f5bfd455e660298452c0546bb23d5.jpg",
  13.                         "name":"辛芷蕾",
  14.                         "role":"方宇凌"
  15.                     },
  16.                     {
  17.                         "avatarAddress":"https://pic.maizuo.com/usr/movie/f27b94579d10d3131b476ec6c63a2722.jpg",
  18.                         "name":"蓝盈莹",
  19.                         "role":"演员"
  20.                     },
  21.                     {
  22.                         "avatarAddress":"https://pic.maizuo.com/usr/movie/0a30de65731f3ddc5ce5d5915c8d9d49.jpg",
  23.                         "name":"彭于晏",
  24.                         "role":"高谦"
  25.                     },
  26.                     {
  27.                         "avatarAddress":"https://pic.maizuo.com/usr/movie/728944e292dc6e8161acd7d5344d361c.jpg",
  28.                         "name":"王彦霖",
  29.                         "role":"赵呈"
  30.                     }
  31.                 ],
  32.                 "category":"剧情|灾难",
  33.                 "director":"林超贤",
  34.                 "filmId":4836,
  35.                 "filmType":{
  36.                     "name":"2D",
  37.                     "value":1
  38.                 },
  39.                 "grade":"7.8",
  40.                 "isPresale":true,
  41.                 "isSale":false,
  42.                 "item":{
  43.                     "name":"2D",
  44.                     "type":1
  45.                 },
  46.                 "language":"汉语普通话",
  47.                 "name":"紧急救援",
  48.                 "nation":"中国大陆",
  49.                 "poster":"https://pic.maizuo.com/usr/movie/c14a70858e2bda9c2bc8eaa7bfa0e2aa.jpg",
  50.                 "premiereAt":1579910400,
  51.                 "runtime":100,
  52.                 "synopsis":"《紧急救援》是由林超贤导演，彭于晏、王彦霖、辛芷蕾、蓝盈莹出演的中国首部海上救援打捞题材的作品。筹备过程中，导演林超贤带领团队实地勘察选址，力求打造更劲爆，更震撼的场景设置，本次与奥斯卡最佳摄影鲍德熹，《泰坦尼克号》美术指导Martin Laing等国际顶级制作团队的强强联合，预示着电影将成为首部打开国际市场的华语救援题材作品，也势必会成为又一部华语电影的标杆之作。",
  53.                 "timeType":3,
  54.                 "videoId":"XNDIyODM2NjE4OA=="
  55.             },
  56.             {
  57.                 "actors":[
  58.                     {
  59.                         "avatarAddress":"https://pic.maizuo.com/usr/movie/c8722df42d08942db01c2a262f576950.jpg",
  60.                         "name":"易小星",
  61.                         "role":"导演"
  62.                     },
  63.                     {
  64.                         "avatarAddress":"https://pic.maizuo.com/usr/movie/9627d1ebac2b4b12a06fd1623a62af99.jpg",
  65.                         "name":"彭昱畅",
  66.                         "role":"肖翔"
  67.                     },
  68.                     {
  69.                         "avatarAddress":"https://pic.maizuo.com/usr/movie/4b6da2deabe5dc7883321bb17372c25b.jpg",
  70.                         "name":"乔杉",
  71.                         "role":"周东海"
  72.                     },
  73.                     {
  74.                         "avatarAddress":"https://pic.maizuo.com/usr/movie/7efe813dd79280f236b8d1286cdc313c.jpg",
  75.                         "name":"卜冠今",
  76.                         "role":"周希希"
  77.                     },
  78.                     {
  79.                         "avatarAddress":"https://pic.maizuo.com/usr/movie/f244a95cdcd64625a50069bd64db49c2.jpg",
  80.                         "name":"苇青",
  81.                         "role":"王素芬"
  82.                     }
  83.                 ],
  84.                 "category":"喜剧|动作",
  85.                 "director":"易小星",
  86.                 "filmId":5266,
  87.                 "filmType":{
  88.                     "name":"2D",
  89.                     "value":1
  90.                 },
  91.                 "grade":"7.2",
  92.                 "isPresale":true,
  93.                 "isSale":false,
  94.                 "item":{
  95.                     "name":"2D",
  96.                     "type":1
  97.                 },
  98.                 "language":"",
  99.                 "name":"沐浴之王",
  100.                 "nation":"中国大陆",
  101.                 "poster":"https://pic.maizuo.com/usr/movie/e6aabffd040bda24f483bcc95ed79e62.jpg",
  102.                 "premiereAt":1607644800,
  103.                 "runtime":102,
  104.                 "synopsis":"在一次搓澡服务中，富二代肖翔（彭昱畅 饰）和搓澡工周东海（乔杉 饰）发生矛盾，让周东海面临生活困境。肖翔因跳伞事故被送到医院记忆全失，周东海恰巧撞见，心生一计，骗肖翔是自己的弟弟并骗回周家澡堂当搓澡工，于是一个富二代开始了一段终身难忘的搓澡生涯……",
  105.                 "timeType":3,
  106.                 "videoId":""
  107.             },
  108.             {
  109.                 "actors":[
  110.                     {
  111.                         "avatarAddress":"https://pic.maizuo.com/usr/movie/168e82b3c4ec676ca577cb99e5a9ee06.jpg",
  112.                         "name":"派蒂·杰金斯",
  113.                         "role":"导演"
  114.                     },
  115.                     {
  116.                         "avatarAddress":"https://pic.maizuo.com/usr/movie/c4cfadaaab8f81ebaf3bdc7aa30fac49.jpg",
  117.                         "name":"盖尔·加朵",
  118.                         "role":"戴安娜·普林斯 / 神奇女侠 Diana Prince / Wonder Woman"
  119.                     },
  120.                     {
  121.                         "avatarAddress":"https://pic.maizuo.com/usr/movie/6e0a82c6efac00bfb6b7c1b4bb46eaa9.jpg",
  122.                         "name":"克里斯·派恩",
  123.                         "role":"史蒂夫·特雷弗 Steve Trevor"
  124.                     },
  125.                     {
  126.                         "avatarAddress":"https://pic.maizuo.com/usr/movie/79a97235ee2f33741b63eafc2f34658e.jpg",
  127.                         "name":"克里斯汀·韦格",
  128.                         "role":"芭芭拉·密涅瓦 Cheetah"
  129.                     },
  130.                     {
  131.                         "avatarAddress":"https://pic.maizuo.com/usr/movie/13c53574fc0c4b13b99e966af5af7e9d.jpg",
  132.                         "name":"佩德罗·帕斯卡",
  133.                         "role":"马克斯维尔·劳德 Max Lord"
  134.                     }
  135.                 ],
  136.                 "category":"动作|奇幻|冒险",
  137.                 "director":"派蒂·杰金斯",
  138.                 "filmId":5287,
  139.                 "filmType":{
  140.                     "name":"3D",
  141.                     "value":2
  142.                 },
  143.                 "isPresale":true,
  144.                 "isSale":false,
  145.                 "item":{
  146.                     "name":"3D",
  147.                     "type":2
  148.                 },
  149.                 "language":"",
  150.                 "name":"神奇女侠1984",
  151.                 "nation":"美国",
  152.                 "poster":"https://pic.maizuo.com/usr/movie/4f84f5a48560f5b14b0fac7768da4e05.jpg",
  153.                 "premiereAt":1608249600,
  154.                 "runtime":151,
  155.                 "synopsis":"神奇女侠的全新大银幕冒险来到了1980年代。神奇女侠戴安娜在华盛顿的自然历史博物馆过着与普通人无异的生活，然而在阻止了一场看似平常的劫案后，身边的一切都发生了变化。在强大的神力诱惑下，两位全新劲敌悄然出现——与神奇女侠“相爱相杀”的顶级掠食者豹女，以及掌控着能改变世界力量的麦克斯·洛德，一场惊天大战在所难免。另外一边，旧爱史蒂夫突然“死而复生”，与戴安娜再续前缘，然而浪漫感动之余，史蒂夫的回归也疑窦丛生。",
  156.                 "timeType":3,
  157.                 "videoId":""
  158.             },
  159.             {
  160.                 "actors":[
  161.                     {
  162.                         "avatarAddress":"https://pic.maizuo.com/usr/movie/6735332cb677645542c2f136eb37e561.jpg",
  163.                         "name":"邱礼涛",
  164.                         "role":"导演"
  165.                     },
  166.                     {
  167.                         "avatarAddress":"https://pic.maizuo.com/usr/movie/ca47cd961fe0be0c91149f6bcca2f13d.jpg",
  168.                         "name":"刘德华",
  169.                         "role":"潘乘风"
  170.                     },
  171.                     {
  172.                         "avatarAddress":"https://pic.maizuo.com/usr/movie/82a5d97e318c447133cd6c8262cee846.jpg",
  173.                         "name":"刘青云",
  174.                         "role":"董卓文"
  175.                     },
  176.                     {
  177.                         "avatarAddress":"https://pic.maizuo.com/usr/movie/e776871fe75f0367aa60957457a6f96c.jpg",
  178.                         "name":"倪妮",
  179.                         "role":"庞玲"
  180.                     },
  181.                     {
  182.                         "avatarAddress":"https://pic.maizuo.com/usr/movie/dd120eb1f6bda9f3b9c9e4c49785d0ce.jpg",
  183.                         "name":"谢君豪",
  184.                         "role":"演员"
  185.                     }
  186.                 ],
  187.                 "category":"动作|犯罪",
  188.                 "director":"邱礼涛",
  189.                 "filmId":5257,
  190.                 "filmType":{
  191.                     "name":"2D",
  192.                     "value":1
  193.                 },
  194.                 "isPresale":true,
  195.                 "isSale":false,
  196.                 "item":{
  197.                     "name":"2D",
  198.                     "type":1
  199.                 },
  200.                 "language":"",
  201.                 "name":"拆弹专家2",
  202.                 "nation":"中国大陆,中国香港",
  203.                 "poster":"https://pic.maizuo.com/usr/movie/4a2bec5290b94f7eb597913727b21df6.jpg",
  204.                 "premiereAt":1608768000,
  205.                 "runtime":0,
  206.                 "synopsis":"香港某处发生爆炸案，前拆弹专家潘乘风（刘德华 饰）因昏迷于现场，被警方怀疑牵涉其中。苏醒后的潘乘风只能一边逃亡一边查明真相，然而，他的好友董卓文（刘青云 饰）和他的前女友庞玲（倪妮 饰）却给他讲述了两段截然不同的经历。有计划的爆炸案接二连三发生，真相却越来越扑朔迷离……",
  207.                 "timeType":3,
  208.                 "videoId":""
  209.             }
  210.         ],
  211.         "total":47
  212.     },
  213.     "msg":"ok",
  214.     "status":0
  215. }

后端：main.py

  1. import json
  3. from flask import Flask, jsonify
  5. app = Flask(__name__)
  7. @app.route('/film')
  8. def index():
  9.     print('请求来了')
  10.     with open('film.json', mode='rt', encoding='utf-8') as f:
  11.         dic = json.load(f)
  12.     res = jsonify(dic)
  13.     res.headers['Access-Control-Allow-Origin'] = '*'
  14.     return res
  16. if __name__ == '__main__':
  17.     app.run()

前端：index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Vue与后端交互</title>
  6.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
  7.     <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
  8. </head>
  9. <body>
  11. <div id="box">
  12.     <button @click="handleClick">加载电影数据</button>
  13.     <p>加载的数据：</p>
  14.     <ul>
  15.         <li v-for="item in dataList">
  16.             <p>电影：{{item.name}}</p>
  17.             <p>导演：{{item.director}}</p>
  18.             <img :src="item.poster" alt="">
  19.         </li>
  21.     </ul>
  22. </div>
  24. </body>
  25. <script>
  26.     let vm = new Vue({
  27.         el: '#box',
  28.         data: {
  29.             dataList: []
  30.         },
  31.         methods: {
  32.             handleClick() {
  33.                 axios.get("http://127.0.0.1:5000/film/").then(res => {
  34.                     console.log(res.data.data.films) // axios 自动包装data属性 res.data
  35.                     this.dataList = res.data.data.films
  36.                 }).catch(err => {
  37.                     console.log(err);
  38.                 })
  39.             }
  40.         }
  41.     })
  42. </script>
  43. </html>

三：计算属性

计算属性是基于它们的依赖进行缓存的

计算属性只有在它的相关依赖发生改变时才会重新求值

计算属性就像Python中的property，可以把方法/函数伪装成属性

1.通过计算属性实现名字首字母大写

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>首字母大写</title>
  6.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
  7. </head>
  8. <body>
  9. <div id="box">
  10.     <!--大段的代码写在这里不好，使用计算属性-->
  11.     模板插值：
  12.     {{myText.substring(0,1).toUpperCase()+myText.substring(1)}}
  13.     <p>普通方法：{{getNameMethod()}}</p>
  14.     <!--区别是在同一个页面中使用多次计算属性，不会多次执行-->
  15.     <p>计算属性：{{getName}}</p>
  16.     <!--普通方法要加括号-->
  18. </div>
  19. </body>
  20. <script>
  21.     var vm = new Vue({
  22.         el: '#box',
  23.         data: {
  24.             myText: 'darker',
  25.         },
  26.         computed: {
  27.             getName() { // 依赖的状态改变了，会重新计算
  28.                 return this.myText.substring(0, 1).toUpperCase() + this.myText.substring(1)
  29.             }
  30.         },
  31.         methods: {
  32.             getNameMethod() {
  33.                 return this.myText.substring(0, 1).toUpperCase() + this.myText.substring(1)
  34.             }
  35.         }
  36.     })
  37. </script>
  38. </html>

2.通过计算属性重写过滤案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>通过计算属性重写过滤案例</title>
  6.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
  7. </head>
  8. <body>
  9. <div id="box">
  10.     <p><input type="text" v-model="myText" placeholder="请输入要筛选的内容："></p>
  11.     <ul>
  12.         <li v-for="data in newList">{{data}}</li>
  13.     </ul>
  14. </div>
  15. </body>
  16. <script>
  17.     var vm = new Vue({
  18.         el: '#box',
  19.         data: {
  20.             myText: '',
  21.             dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
  22.         },
  23.         computed: {
  24.             newList() {
  25.                 return this.dataList.filter(item => {
  26.                     return item.indexOf(this.myText) > -1   // 返回索引大于1的元素：>-1 就表示包含在其中
  27.                 })
  28.             }
  29.         }
  30.     })
  31. </script>
  32. </html>

四：虚拟DOM 与diff算法 key的作用

1.Vue2.0 v-for 中 :key 有什么用呢？

其实呢不只是vue，react中在执行列表渲染时也会要求给每个组件添加key这个属性

key简单点来说就是唯一标识，就像ID一样唯一性

要知道，vue和react都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面

而隐藏在背后的原理便是其高效的Diff算法

  • 分层级比较：只做同层级的对比
  • 通过key值比较：出现新的key就插入同组（循环中，尽量加key，让key值唯一）
  • 通过组件/标签进行比较：然后进行替换

2.虚拟DOM的diff算法

虚拟DOM数据渲染图示

3.具体实现

① 把树按照层级分解

② 按照key值比较

③ 通过组件进行比较

  1. <div id="box">
  2.     <div v-if="isShow">111</div>
  3.     <p v-else>222</p>
  4.     <!--
  5.     {tag:div,value:111}
  6.     {tag:p,value:222}
  7.     直接不比较，直接删除div，新增p
  8.     -->
  10.     <div v-if="isShow">111</div>
  11.     <div v-else>222</div>
  12.     <!--
  13.     {tag:div,value:111}
  14.     {tag:div,value:222}
  15.     比较都是div，只替换文本内容
  16.     -->
  17. </div>

思考：什么是跨域问题？如何解决？

Vue - 与后端交互的更多相关文章

  1. Vue之前后端交互

    Vue之前后端交互 一.前后端交互模式 接口调用方式 原生ajax 基于jQuery的ajax fetch axios 异步 JavaScript的执行环境是「单线程」 所谓单线程,是指JS引擎中负责 ...

  2. 三、vue前后端交互（轻松入门vue）

    轻松入门vue系列 Vue前后端交互 六.Vue前后端交互 1. 前后端交互模式 2. Promise的相关概念和用法 Promise基本用法 then参数中的函数返回值 基于Promise处理多个A ...

  3. Flask + vue 前后端分离的 二手书App

    一个Flask + vue 前后端分离的 二手书App 效果展示: https://blog.csdn.net/qq_42239520/article/details/88534955 所用技术清单 ...

  4. Vue-CLI项目-axios模块前后端交互(类似ajax提交)

    08.31自我总结 Vue-CLI项目-axios前后端交互 一.模块的安装 npm install axios --save #--save可以不用写 二.配置main.js import axio ...

  5. vue前后端分离

    axios前后端交互 安装 一定要安装到`项目目录下 cnpm install axios 配置 在main.js中配置 //配置axios import axios from 'axios' Vue ...

  6. 谷粒商城为什么要选择后天管理用vue前后端分离，而商城页面选择Thymeleaf类？

    1.最初使用jsp开发web项目 还记得刚学习Java的时候,自己开发一个web项目,那时候前后端分离还不流行,为了在页面中显示动态数据,最终的形式也就是以动态网页响应用户,Java一种技术jsp,J ...

  7. 窗口 - dialog - 与后端交互

    与后端交互,一般需要提交表单数据,所以,这次渲染得dialog其实是一个<form> <form id="loginForm"> <table ali ...

  8. Node之简单的前后端交互

    node是前端必学的一门技能,我们都知道node是用的js做后端,在学习node之前我们有必要明白node是如何实现前后端交互的. 这里写了一个简单的通过原生ajax与node实现的一个交互,刚刚学n ...

  9. Django之META与前后端交互

    Django之META与前后端交互 1 提交表单之GET 前端提交数据与发送 1)提交表单数据 2)提交JSON数据 后端的数据接收与响应 1)接收GET请求数据 2)接收POST请求数据 3)响应请 ...

随机推荐

  1. 常见web漏洞修复方法

    方法如下: 漏洞修复.(输入过滤,输出转义) 1.在连接数据库时,在接收参数后进行转义,$id = mysql_real_escape_string($id); 2.在网页源码中在接收参数后可用htm ...

  2. 使用CleanMyMac快速管理应用程序 优化Mac

    CleanMyMac作为一款专业的苹果电脑清理软件,它不仅仅能单纯的卸载不用.少用的应用,同时还支持:1.清理应用程序的数据文件,将应用重置回初始状态,减少空间占用:2.自动检查应用更新,保持应用的最 ...

  3. 鸿蒙OS的系统调用是如何实现的？ | 解读鸿蒙源码

    本文将首先带您回顾"系统调用"的概念以及它的作用,然后从经典的Hello World开始,逐行代码层层分析--鸿蒙OS的系统调用是如何实现的. 写在前面 9月10号 华为开发者大会 ...

  4. Java8常用的内置函数式接口（一）Predicate、Consumer、Supplier、Function

    Java8常用的内置函数式接口(一) 简介 JDK 1.8 API中包含了很多内置的函数式接口.有些是在以前版本的Java中大家耳熟能详的,例如Comparator接口,或者Runnable接口.对这 ...

  5. linux命令模式配置安装mysql

    系统环境: centos 7.1 使用模式:命令模式 使用工具:xshell5 . xftp5 安装mysql前必须删除干净旧的安装包和残留文件,否则安装会失败 查看旧的安装包 rpm -qa | g ...

  6. 牛客练习赛67 D牛妹爱数列 题解(dp)

    题目链接 题目大意 给你一个长为n的01串,要你进行最少的操作使得这01串变成全为0,求最少操作次数 有两种不同类型的操作 1:翻转一个前缀 2:单调翻转一个元素 题目思路 居然是一个dp,标程讲的很 ...

  7. 【mq读书笔记】顺序消息

    注意异常情况导致整个消费无限重试 阻塞消费 mq支持局部消息顺序消费,可以确保同一个消息消费队列中的消息被顺序消费.看下针对顺序消息在整个消费过程中做的调整: 队列负载: DefaultMQPushC ...

  8. 经典算法—BF算法（字符串匹配）

    前言 字符串的匹配算法也是很经典的一个算法,在面试的时候常常会遇到,而BF算法是字符串模式匹配中的一个简单的算法 1,什么是BF算法 BF算法,即暴力(Brute Force)算法,是普通的模式匹配算 ...

  9. SQL，T-SQL简介

    SQL:  结构化查询语言(Structured Query Language), 简称SQL,是一种特殊目的的编程语言,是一种数据库查询和程序设计语言,用于存取数据以及查询.更新和管理关系型数据库系 ...

  10. 010 editor的使用

    原文链接:http://www.cnblogs.com/vendanner/p/4939444.html 注意事项:之前一直在虚拟机winxp中添加template一直失败,原因可能是因为虚拟机的版本 ...