Vue生命周期与后端交互实现流程详解

2024-10-01 16:41:36

表单控制

1.input：checkbox（单选，多选），radio（单选）

2.代码展示

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
   <h1>表单控制</h1>
   <p>用户名：<input type="text" v-model="name"></p>
   <p>密码：<input type="text" v-model="password"></p>
   <p><input type="checkbox" v-model="isRemember">记住密码</p>
   <p>
       <input type="radio" v-model="gender" value="1">男
       <input type="radio" v-model="gender" value="2">女
       <input type="radio" v-model="gender" value="0">未知
   </p>
   <p>
       爱好：
       <input type="checkbox" value="篮球" v-model="hobby">篮球
       <input type="checkbox" value="足球" v-model="hobby">足球
       <input type="checkbox" value="乒乓球" v-model="hobby">乒乓球
       <input type="checkbox" value="排球" v-model="hobby">排球
   </p>
   {{hobby}}
</div>
</body>
<script>
   new Vue({
       el:'#app',
       data:{
           name:'',
           password:'',
           isRemember:false,   //checkbox单选，使用布尔类型
           gender:'',    //radio单选，使用字符串
           hobby:[]      //checkbox多选使用数组
       }
   })
</script>
</html>

购物车案例

1.python中只有基于迭代的循环可没有基于索引的循环

2.js，java，go基于迭代和索引的两种

3.js中for循环

for(i=0;i<checkGroup.length;i++) # 基于索引的循环
for(i in checkGroup) # 基于迭代的循环
for(i of checkGroup) # es6中的循环
数组内置方法.forEach()
jquery $.each循环

代码展示：

   1 方式一：js的基于索引的循环
   for (var i = 0; i< goodList.length; i++) {
       console.log(goodList[i])
   }
   2 方式二：基于迭代的循环
   for (i in goodList){
       console.log(goodList[i])
   }
   3 方式三：of 循环，基于迭代的
     for (i of goodList){
       console.log(i)
   }
   4 方式四：数组的循环方法
   goodList.forEach(item => {
       console.log('---', item)
   })
   5 jquery:引入
   $.each(goodList, (i, v) => {
       console.log(v)
   })

4.基本购物车代码展示

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="./js/vue.js"></script>
   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
   <link rel="stylesheet" >href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="external nofollow"  rel="external nofollow" >
</head>
<body>
<div id="app">
   <div class="container-fluid">
       <h1 class="text-center">购物车</h1>
       <div class="row">
           <div class="col-md-6 col-md-offset-3">
               <table class="table table-bordered">
                   <thead>
                   <tr>
                       <th>商品id</th>
                       <th>商品名字</th>
                       <th>商品价格</th>
                       <th>商品数量</th>
                   </tr>
                   </thead>
                   <tbody>
                   <tr v-for="good in goodList">
                       <th>{{good.id}}</th>
                       <td>{{good.name}}</td>
                       <td>{{good.price}}</td>
                       <td>{{good.count}}</td>
                       <td><input type="checkbox" v-model="checkGroup" :value="good"></td>
                   </tr>
                   </tbody>
               </table>
               <hr>
               选中的商品是：{{checkGroup}}
               <br>
               总价格是：{{getPrice()}}
           </div>
       </div>
   </div>
</div>
</body>
<script>
   new Vue({
       el: '#app',
       data: {
           goodList: [
               {id: 1, name: '小汽车', price: 1200000, count: 1},
               {id: 2, name: '钢笔', price: 12, count: 34},
               {id: 3, name: '鸡蛋', price: 2, count: 4},
               {id: 4, name: '面包', price: 9, count: 10},
           ],
           checkGroup: []
       },
       methods: {
           getPrice() {
               // 取出checkGroup中得商品数量和商品价格相乘 做累加
               // js 中 for 循环
               var total = 0
               for (item of this.checkGroup) {
                   total += item.price * item.count
               }
               return total
           }
       }
   })
   var goodList = [
       {id: 1, name: '小汽车', price: 1200000, count: 1},
       {id: 2, name: '钢笔', price: 12, count: 34},
       {id: 3, name: '鸡蛋', price: 2, count: 4},
       {id: 4, name: '面包', price: 9, count: 10},
   ]
</script>
</html>

5.带加减的购物车代码展示

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="./js/vue.js"></script>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="external nofollow"  rel="external nofollow" >
</head>
<body>
<div id="app">
   <div class="container-fluid">
       <h1 class="text-center">购物车</h1>
       <div class="row">
           <div class="col-md-6 col-md-offset-3">
               <table class="table table-bordered">
                   <thead>
                   <tr>
                       <th>商品id</th>
                       <th>商品名字</th>
                       <th>商品价格</th>
                       <th>商品数量</th>
                       <th><input type="checkbox" v-model="checkAll" @change="handleChange">全选/全不选</th>
                   </tr>
                   </thead>
                   <tbody>
                   <tr v-for="good in goodList">
                       <th>{{good.id}}</th>
                       <td>{{good.name}}</td>
                       <td>{{good.price}}</td>
                       <td><span class="btn link btn-sm" @click="handleDown(good)">-</span>{{good.count}}<span
                               class="btn link btn-sm" @click="good.count++">+</span>
                       </td>
                       <td><input type="checkbox" v-model="checkGroup" :value="good" @change="handleCheckOne"></td>
                   </tr>
                   </tbody>
               </table>
               <hr>
               选中的商品是：{{checkGroup}}
               <br>
               总价格是：{{getPrice()}}

           </div>
       </div>
   </div>
</div>
</body>
<script>
   new Vue({
       el: '#app',
       data: {
           goodList: [
               {id: 1, name: '小汽车', price: 1200000, count: 1},
               {id: 2, name: '钢笔', price: 12, count: 34},
               {id: 3, name: '鸡蛋', price: 2, count: 4},
               {id: 4, name: '面包', price: 9, count: 10},
           ],
           checkGroup: [],
           checkAll: false,
       },
       methods: {
           getPrice() {
               var total = 0
               for (item of this.checkGroup) {
                   total += item.price * item.count
               }
               return total
           },
           handleChange() {
               if (this.checkAll) {
                   this.checkGroup = this.goodList
               } else {
                   this.checkGroup = []
               }
           },
           handleCheckOne() {
               // 如果checkGroup的长度等于goodList的长度，说明全选了，checkAll就应该变为true，否则就是false
               // if (this.checkGroup.length == this.goodList.length) {
               //     this.checkAll = true
               // } else {
               //     this.checkAll = false
               // }
               // 变短
               this.checkAll = this.checkGroup.length == this.goodList.length
           },
           handleDown(good) {
               if (good.count > 1) {
                   good.count--
               } else {
                   alert('不能再少了，受不了了')
               }
           }
       }
   })
</script>
</html>

v-model进阶（了解）

1.v-model 之 lazy、number、trim

lazy：等待input框的数据绑定时区焦点之后在变化；
number：数字开头，只保留数字，后面的字母不保留；字母开头都保留。
trim：取出首位的空格。

2.代码展示

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
   <h1>v-model进阶</h1>
   <input type="text" v-model.lazy ="name1">----->{{name1}}
   <br>
   <input type="text" v-model.number ="name2">----->{{name2}}
   <br>
  <input type="text" v-model.trim ="name3">----->{{name3}}
</div>
</body>
<script>
   var vm = new Vue({
       el: '#app',
       data: {
           name1: '',
           name2:'',
           name3:'',
       },
   })
</script>
</html>

vue生命周期

1.var vm=new Vue实例（）

四个过程：

实例创建，数据放到实例中；
挂在模板：el====》div；
改页面，改变量，都会相互影响，update；
销毁实例

2.八个钩子函数

4个过程对应八个函数，依次执行（到某个过程就会执行某个函数）

beforeCreate   创建Vue实例之前调用，data，el都没有
created   创建Vue实例成功后调用（可以在此处发送异步请求后端数据），data有了，el没有的
beforeMount   渲染DOM之前调用，data有了，el没有
mounted   渲染DOM之后调用
beforeUpdate   重新渲染之前调用（数据更新等操作时，控制DOM重新渲染）
updated   重新渲染完成之后调用
beforeDestroy   销毁之前调用
destroyed   销毁之后调用

钩子函数（hook），AOP的体现：面向切面编程----》装饰器实现aop；

3.学习生命周期需要掌握

组件想后端发送请求，获取数据，应该放在created写，此时data已经有数据；
destroyed做一些资源请理性的工作。

4.小案例：

组件创建，开启定时器，不停的打印hello，在destroyed中对定时器进行销毁。补充之js定时任务和延时任务：延时任务：

setTimeout(()=>{
	console.log('3s后执行我')
},3000)

定时任务：

setInterval(()=>{
		console.log('hello')
},3000)

什么场景下要用定时任务？

(1)实时跟后端交互，基于http+定时任务（websocket协议：服务端主动推送消息，手机app的消息推送）

(2)秒杀场景，先提交秒杀请求，每隔3s，查询是否秒到；

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
   <h1>vue声明周期</h1>
   <button @click="handleShow">点我组件显示和消失</button>
   <hr>
   <child v-if="show"></child>
   <hr>
</div>
</body>
<script>
   // 定义一个全局组件
   Vue.component('child', {
       template: `
         <div>
         <button>后退</button>
         {{ title }}
         <button @click="handleClick">前进</button>
         </div>`,
       data() {
           return {
               title: '好看的首页',
               t:''
           }
       },
       methods: {
           handleClick() {
               // alert('前进')
               this.title = 'lqz'
           }
       },
       beforeCreate() {
           console.log('beforeCreate')
           console.log(this.$data)
           console.log(this.$el)
       },
       created() {
           console.log('created')
           console.log(this.$data)
           console.log(this.$el)
           // 开启定时器，每隔3s，打印hello
           this.t=setInterval(()=>{
               console.log('hello')
           },3000)
       },
       beforeMount() {
           console.log('beforeMount')
           console.log(this.$data)
           console.log(this.$el)
       },
       mounted() {
           console.log('mounted')
           console.log(this.$data)
           console.log(this.$el)
       },
       beforeUpdate() {
           console.log('beforeUpdate')
       },
       updated() {
           console.log('updated')
       },
       beforeDestroy() {
           console.log('当前状态：beforeDestroy')
       },
       destroyed() {
           console.log('当前状态：destroyed')
           // 销毁定时器
           clearInterval(this.t)
           this.t=null
       },
   })
   var vm = new Vue({
       el: '#app',
       data: {
           show: true
       },
       methods: {
           handleShow() {
               this.show = !this.show
           }
       }
   })
</script>
</html>

与后端交互

1.发展过程

js原生发送ajax请求：new XMLHttpRequest()，浏览器兼容性不好，于是jquery基于它做了封装出了jquery的ajax方法，XMLHttpRequest中存在很多bug；
jquery的ajax，vue中用的很少；
js原生提供的fetch，现在官方主推这个，缺点是不执行ie浏览器；
axios：vue中常用的，它是封装了XMLHttpRequest

2.代码展示

前端页面：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="./js/vue.js"></script>
   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div id="app">
   <h1>jquery的ajax与后端交互</h1>
   <!--    <button @click="handleLoad1">点击加载数据</button>-->
   <!--    <br>-->
   <!--    <p>名字是：{{name}}</p>-->
   <!--    <p>年龄是：{{age}}</p>-->
   <!--    <hr>-->
   <h1>js原生的fetch与后端交互</h1>
   <!--    <button @click="handleLoad2">点击加载数据</button>-->
   <!--    <br>-->
   <!--    <p>名字是：{{name}}</p>-->
   <!--    <p>年龄是：{{age}}</p>-->
   <!--    <hr>-->
   <h1>axios与后端交互</h1>
   <button @click="handleLoad3">点击加载数据</button>
   <br>
   <p>名字是：{{name}}</p>
   <p>年龄是：{{age}}</p>
   <hr>
</div>
</body>
<script>
   var vm = new Vue({
       el: '#app',
       data: {
           name: '',
           age: 0
       },
       methods: {
           handleLoad1() {
               $.ajax({
                   url: "http://127.0.0.1:5000/",
                   type: 'get',
                   success: data => {
                       console.log(typeof data)
                       data = JSON.parse(data) // data 是字符串类型，需要转成对象类型
                      console.log(typeof data)
                       this.name = data.name
                       this.age = data.age
                   }
               })
           },
           handleLoad2() { // 用的很少
               fetch('http://127.0.0.1:5000/').then(res => res.json()).then(res => {
                   console.log(res)
                   console.log(typeof res)
                   this.name = res.name
                   this.age = res.age
               })
           },
           handleLoad3() { // 用的很少
               axios.get('http://127.0.0.1:5000/').then(res => {
                   console.log(res.data)  // 后端真正的数据在res.data中
                   this.name = res.data.name
                   this.age = res.data.age
               })
           },
       }
   })
</script>
</html>

后端Flask框架：

from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/')
def index():
   res = jsonify({'name': 'lqz', 'age': 19})
   # 处理了跨域（）  在响应头中加入 django写后端 {'Access-Control-Allow-Origin': '*'}
   res.headers = {'Access-Control-Allow-Origin': '*'}
   return res
if __name__ == '__main__':
   app.run()

电影案例

前端页面展示：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="./js/vue.js"></script>
   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
   <h1>电影小案例</h1>
   <ul>
       <li v-for="film in filmList">
           <h2>电影名：{{film.name}}</h2>
           <img :src="film.poster" alt="" height="400px" width="300px">
       </li>
   </ul>
</div>
</body>
<script>
   var vm = new Vue({
       el: '#app',
       data: {
           filmList: []
       },
       created() {
           axios.get('http://127.0.0.1:5000/films').then(res => {
               this.filmList = res.data.data.films
           })
       }
   })
</script>
</html>

后盾Flask框架：

from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/films')
def films():
   with open('./film.json', 'r', encoding='utf-8') as f:
       data = json.load(f)
   res = jsonify(data)
   res.headers = {'Access-Control-Allow-Origin': '*'}
   return res
if __name__ == '__main__':
   app.run()

到此这篇关于Vue生命周期与后端交互实现流程详解的文章就介绍到这了,更多相关Vue生命周期与后端交互内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Vue生命周期实例分析总结

目录 1. 概述 2. 页面钩子函数 3. 生命周期函数 1. 概述每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如需要设置数据监听.编译模板.挂载实例到 DOM.在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数,给予用户机会在一些特定的场景下添加他们自己的代码. 简单来说,生命周期钩子函数就是一堆回调函数,在我们创建实例时,这些回调函数按顺序执行. 2. 页面钩子函数名称作用 beforeCreate 在实例初始化之后,数据观测和事件配置之前
Vue生命周期深入分析总结

目录一.生命周期图二.生命周期三个组成部分第一节-初始化 beforeCreate created beforeMount mounted 第二节-更新状态 beforeUpdate updated 第三节-销毁实例 beforeDestroy destroyed 简单的对生命周期总结常用的生命周期钩子关于销毁Vue实例三.代码测试生命周期四.再探究总结一.生命周期图官网图片,先了解一下流程二.生命周期三个组成部分第一节-初始化 beforeCreate 初始化之后,数据
Vue生命周期函数调用详解

目录生命周期 Vue.mixin 生命周期选项合并调用生命周期函数结语生命周期 Vue为用户提供了许多生命周期钩子函数,可以让用户在组件运行的不同阶段书写自己的逻辑. 那么Vue内部到底是如何处理生命周期函数的呢?Vue的生命周期究竟是在代码运行的哪个阶段执行呢?本文将实现Vue生命周期相关代码的核心逻辑,从源码层面来理解生命周期. Vue.mixin 在介绍生命周期之前,我们先来看下Vue.mixin. Vue.mixin是Vue的全局混合器,它影响Vue创建的每一个实例,会将mixi
Vue生命周期与后端交互实现流程详解

目录表单控制购物车案例 v-model进阶(了解) vue生命周期与后端交互电影案例表单控制 1.input:checkbox(单选,多选),radio(单选) 2.代码展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="j
Vue实例中生命周期created和mounted的区别详解

前言本文主要跟大家介绍了关于Vue实例中生命周期created和mounted区别的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 生命周期先上图什么是生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期. 在Vue的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册js方法,可以让我们用自己注
Maven生命周期和及插件原理用法详解

maven周期 maven的生命周期不止package,compile,clean.其实这是主要部分. 以下截图其实展示的是maven的所有周期. maven的生命周期,主要分为3套(其实每个生命周期下面都分为一些阶段,如上截图所示): 1.clean周期:负责清理项目(清理上一次编译的文件). 2.default周期: 主体周期,负责完成项目构建主体过程. 3.site周期:建立站点(生成站点文档,发送站点到服务器). 周期之间是独立的,周期内部的各个阶段是相互依赖的. 例如我执行instal
SSM框架前后端信息交互实现流程详解

一.从前端向后端传送数据常见的3种方式 1.form表单的action:此方法可以提交form表单内的输入数据,也可同时提交某些隐藏但设置有默认值的<input>,如修改问题时,我们除了提交问题的相关信息,还需要将用户的编号提交给后端,此时就可以设置一个默认值为用户编号的<input>,并将其隐藏 2.<a>标签的href属性:此方法一般用来提交一些较少的数据,比如对象编号 1 <a href="<%=path%>/Question/Dis
Spring Bean生命周期之BeanDefinition的合并过程详解

目录前言 BeanDefinition的合并源码分析总结写在前面注:本文章使用的 SpringBoot 版本为 2.2.4.RELEASE,其 Spring 版本为 5.2.3.RELEASE 前言书接上文,BeanDefinition注册到IoC容器后,紧接着就是要使用Bean了,要使用必须先要获取Bean,这里我们就以DefaultListableBeanFactory#getBean方法来引出本次讨论的内容:BeanDefinition的合并通过前面的章节我们了解到了BeanD
详解Vue生命周期和MVVM框架

目录生命周期与动态组件有关的两个特殊的钩子: 与组件异常捕获有关的一个钩子: 生命周期有哪些生命周期组件从开始到结束的全过程创建阶段:beforeCreate.created挂载阶段:beforeMount.mounted 更新阶段:beforeUpdate.updated 组件从开始到结束的全过程创建阶段:beforeCreate.created 挂载阶段:beforeMount.mounted 更新阶段:beforeUpdate.updated 销毁阶段:beforeDestro
Vue生命周期介绍和钩子函数详解

目录 Vue生命周期介绍和钩子函数 VUE生命周期钩子 Vue生命周期简介 create 和 mounted 相关 update 相关 destroy 相关总结 Vue生命周期介绍和钩子函数组件每个阶段它的内部构造是不一样的,所以一般特定的钩子做特定的事,比如Ajax获取数据就可以在mounted阶段.从Vue实例被创建开始到该实例最终被销毁的整个过程叫做VUE的生命周期,在这个生命周期内发生了下面的事情:从vue实例被创建开始,首先vue实例被创建,之后开始数据的初始化,编译模板,挂载do
带你一文了解Vue生命周期钩子

目录前言生命周期钩子选项式API(Options API) 生命周期流程图运行生命周期挂钩 beforeCreate() created() beforeMount() mounted() beforeUpdate() updated() beforeUnmount() unmount() 组合式API(Composition API)中的生命周期钩子 setup() 替换 created() 和 beforeCreated() 钩子可以与 setup() 一起使用总结前言和其他框
详解Vue生命周期的示例

一 vue的生命周期如下图所示(很清晰) 二 vue生命周期的栗子注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue生命周期</title> <script src="../js/vue.js"></script> &

Vue生命周期与后端交互实现流程详解

目录

表单控制

购物车案例

v-model进阶（了解）

vue生命周期

与后端交互

电影案例

相关推荐

随机推荐