经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
Vue前后端交互、生命周期、组件化开发
来源:cnblogs  作者:阿丽米热  时间:2023/2/20 15:19:21  对本文有异议

Vue前后端交互、生命周期、组件化开发

一、Vue用axios与后端交互

? 如果用jQuery与后端交互的话,我们用Ajax发请求,那么用Vue做前端,需要做前后端分离,与后端做交互。这个时候Vue也提供了独立的方法叫Axios,其实Ajax也是没问题的但是同时使用两个框架写前端项目,有点大材小用了,或者而且也会影响项目执行效率。因此咱的Vue也提供了单独的交互的Axios。Axios 是一个基于 promise 的 HTTP 库,还是基于XMLHttpRequest封装的那么接下来我们就用axios的方式实现前后端交互。那么我们通过展示新上市电影的例子来诠释前后端交互吧

  1. '''后端代码'''
  2. # 1.导入模块
  3. from django.urls import path, include
  4. from app01 import views
  5. from rest_framework.routers import SimpleRouter
  6. # 2.实例化对象
  7. router = SimpleRouter()
  8. # 3.注册路由
  9. router.register('film', views.FilmList, 'film')
  10. # 4.最后一步添加到这里,拼路由
  11. urlpatterns = [
  12. path('api/v1/', include(router.urls)), # http://127.0.0.1:8000/api/v1/film/film
  13. ]
  14. from rest_framework.viewsets import ViewSet
  15. from rest_framework.decorators import action
  16. import json
  17. from rest_framework.response import Response
  18. class FilmList(ViewSet):
  19. @action(methods=['GET', ], detail=False)
  20. def film(self, request):
  21. with open(r'film.json', 'r', encoding='utf-8') as f:
  22. res = json.load(f)
  23. return Response(headers={'Access-Control-Allow-Origin':'*'}, data=res)
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="js/vue.js"></script>
  7. <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.2/axios.min.js"></script>
  8. </head>
  9. <body>
  10. <div id="app">
  11. <h1>Hot films list</h1>
  12. <ul>
  13. <li v-for="item in dataList">
  14. <h2>Film Name:{{item.name}}</h2>
  15. <h3>Director:{{item.director}}</h3>
  16. <h3>Category:{{item.category}}</h3>
  17. <p>Desc:{{item.synopsis}}</p>
  18. <img :src="item.poster" alt="" height="300px" width="200px">
  19. </li>
  20. <button @click="handleClick">Wanna see then press here</button>
  21. </ul>
  22. </div>
  23. </body>
  24. <script>
  25. let vm = new Vue({
  26. el: '#app',
  27. data: {
  28. dataList: []
  29. },
  30. methods: {
  31. handleClick() {
  32. axios.get('http://127.0.0.1:8000/api/v1/film/film/').then(res => {
  33. this.dataList = res.data.data.films
  34. })
  35. }
  36. },
  37. mounted() {
  38. axios.get('http://127.0.0.1:8000/api/v1/film/film/').then(res => {
  39. console.log(res)
  40. this.dataList = res.data.data.films
  41. })
  42. }
  43. })
  44. </script>
  45. </html>

二、Vue的生命周期

? Vue其实有它的生命周期的,从vue实例创建开始,到实例被销毁,总共会经历8个生命周期钩子[只要写了就会执行]钩子函数【反序列化验证】扩展以下知识面吧,顺便get以下两个专业学名 面向切面编程(AOP)、面向对象编程(OOP)、那么咱咱说的8个生命周期具体指什么呢》咱一起来列一下!

序号 英文称呼 个人理解 何时调用
1 beforeCreate 创建之前 创建Vue实例之前调用
2 created 创建实例 创建Vue实例成功后调用
3 beforeMount 安装之前 渲染DOM之前调用
4 mounted 安装实例 渲染DOM之后调用
5 beforeUpdate 更新之前 重新渲染之前调用
6 updated 更新实例 重新渲染完成之后调用
7 beforeDestroy 销毁之前 销毁之前调用
8 destroyed 销毁实例 销毁之后调用

image

三、组件化开发

? 在基础部分我们用spa的形式学习了Vue,但是实际上当前普遍使用组件化开发。那么接下来,咱的研究主题是大名鼎鼎的组件化开发;嘿嘿嘿准备好了吗?!那为何组件化开发呢?原因也很简单类似于咱的Python里面的装饰器、类、函数一样写好以后可以重复使用,减小代码量。提高开发效率,毕竟编程开发本身就是被那些智商超高的聪明懒人发明的嘛,他们会想方设法的少写代码而多干活哈哈哈,讲到这里我很荣幸也能接触编程领域,每天都很充实,不断进步,不断提高,简直是我梦寐以求的人生!话说回来,组件分为两种,一是全局组件、二是局部组件。下面详细介绍如何使用如何定义组件。
定义组件的方法
image
组件就是:扩展 HTML 元素,封装可重用的代码,目的是复用
例如:有一个轮播图,可以在很多页面中使用,一个轮播有js,css,html
组件把js,css,html放到一起,有逻辑,有样式,有html
image

image

  1. <script>
  2. // 全局组件-----》在任意组件中都可以使用
  3. // 跟之前学的没有区别
  4. Vue.component('child', {
  5. template: `
  6. <div>
  7. <button>Back</button>
  8. <span style="font-size: 40px">Home Page--{{ name }}</span>
  9. <button @click="handleFor"> Forward</button>
  10. <lqz1></lqz1>
  11. </div>`,// 里面写html内容,必须包在一个标签中
  12. data() { // data必须是方法 因为这个组件是可以多次使用,返回对象
  13. return {
  14. name: '阿丽米热',
  15. t: null
  16. }
  17. },
  18. methods: {
  19. handleFor() {
  20. this.name = 'mire'
  21. }
  22. },
  23. components: {
  24. 'mire1': {
  25. template: `
  26. <div>
  27. <h1>Local component---{{ age }}</h1>
  28. </div>`,
  29. data() {
  30. return {
  31. age: 19
  32. }
  33. }
  34. },
  35. }
  36. })
  37. Vue.component('child3', {
  38. template: `
  39. <div>
  40. <button>back</button>
  41. </div>`,
  42. })
  43. let foo={
  44. template: `
  45. <div>
  46. <h1>Local component---{{ age }}</h1>
  47. </div>`,
  48. data() {
  49. return {
  50. age: 19
  51. }
  52. }
  53. }
  54. var vm = new Vue({
  55. el: '.app',
  56. data: {
  57. show: false
  58. },
  59. methods: {
  60. handleShow() {
  61. this.show = !this.show
  62. }
  63. },
  64. components: {
  65. foo
  66. }
  67. })
  68. </script>

原文链接:https://www.cnblogs.com/almira998/p/17135631.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号