Vue--表单控制+js的for循环+Vue生命周期+后端交互+战略补充(js的定时任务，websocket协议)

10.26内容整理和概述

今日内容概要

内容目录

• 表单控制
• js的for循环
• Vue生命周期
• 后端交互
• 战略补充

表单控制

checkbox的数据双向绑定：		# 注意：数据绑定的都是标签的value值
	单选用法：
		1.绑定的变量需要是布尔类型
		例子：
			<p><input type="checkbox" v-model="isRemember"> 记住密码</p>
			isRemember: false	# vue配置
	多选用法：
		1.绑定的变量需要是数组类型
		例子：
			<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: []	# vue配置

radio的数据双向绑定：		# 注意：数据绑定的都是标签的value值
	用法：
		1.绑定的变量需要是字符串类型
		例子：
			<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>
			gender: ''	# vue配置

js的for循环

五种js的for循环：
	1.基于索引的循环：
		例子：for (var i = 0; i< goodList.length; i++) {循环体代码}
	2.基于迭代的循环：	
		例子：for (i in goodList){循环体代码}
		缺点：当前'i'不是列表对象，而是列表对象的索引值
	3.es6专属的迭代循环：	# 类似python的for循环
		例子：for (i of goodList){循环体代码}
	4.数组内置循环方法：
		例子： goodList.forEach(item => {循环体代码}
	5.jquery的for循环：
		例子：$.each(goodList, (i, v) => {循环体代码})

Vue生命周期

生命周期：
	1.创建实例，并数据放到实例中
	2.挂载模板
	3.vue全程监听，改动页面
	4.销毁实例

八大钩子函数：
	钩子函数(hook)：面向切面编程，AOP的体现
	功能：钩在Vue生命周期中，不同阶段实行不同的钩子函数
	函数：
		1.beforeCreate：创建Vue实例之前调用		# data,el属性都不存在
		2.created：创建Vue实例成功后调用		# 可以在此处发送异步请求后端数据，说明data属性已经存在，el属性不存在
		3.beforeMount：渲染DOM之前调用		# data属性存在，el属性不存在
		4.mounted：渲染DOM之后调用
		5.beforeUpdate：重新渲染之前调用
		6.updated：重新渲染完成之后调用
		7.beforeDestroy：销毁之前调用
		8.destroyed：销毁之后调用，用于清理资源的工作
	案例代码：
		 Vue.component('child', {
			template: `
				<div>
					<button>后退</button>
					{{ title }}
					<button @click="handleClick">前进</button>
				</div>`,
			data() {
				return {
					title: '好看的首页',
					t:''
				}
			},
			methods: {
				handleClick() {
					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
				}
			}
		})

后端交互

后端交互方式：
	1.js提供的原生XMLHTTPResquest	# 兼容性差
	2.js提供的原生fetch		# 官方主推，promise风格
	3.jQuery的ajax(就是对XMLHTTPResquest的封装)	# vue几乎不用
	4.Vue常用的axios(也是对XMLHTTPResquest的封装)	# promise风格

fetch案例：	# 后端传来数据类型是对象
	handleLoad() { 
		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
			})
	},

axios案例：
	handleLoad() { 		# 后端传来数据是被封装过的，后端真正的数据在res.data中
		axios.get('http://127.0.0.1:5000/').then(res => {
				console.log(res.data)  
				this.name = res.data.name
				this.age = res.data.age
		})
	},

战略补充(js的定时任务，websocket协议)

js的定时任务：
	1.延时任务：
		功能：函数体会在设定的延时时间之后再运行
		例子：
			setTimeout(()=>{
				console.log('3s后执行我')
			},3000)		# 3s后执行函数体代码
	2.定时任务：
		功能：任务一旦开始，循环在设定时间后运行函数体代码
		例子：
			setInterval(()=>{
				console.log('hello')
			},3000)		# 3s运行一次函数体代码，不停运行

websocket协议：
	功能：服务端主动推送消息，不需要客户端发送请求		# 实例：手机app的消息推送