标签：el 26 Vue console log data 调用 2022.10
内容概要
- 1.表单控制
- 2.购物车案例
- 3.v-model进阶
- 4.vue生命周期
1 表单控制
# input：checkbox（单选，多选），radio（单选）
<!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>
2 购物车案例
# python中只有基于迭代的循环，没有基于索引的循环
# js，java，go中有基于迭代和索引的两种
# 补充：js中for 循环
1 for(i=0;i<checkGroup.length;i++) # 基于索引的循环
2 for (i in checkGroup) # 基于迭代的循环
3 for (i of checkGroup) # es6中 循环
4 数组内置方法.forEach()
5 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)
// })
3 v-model进阶（了解）
lazy：等待input框的数据绑定时区焦点之后再变化
number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留
trim：去除首位的空格
<!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>
new Vue({
el: '#app',
data: {
name1: '',
name2: '',
name3: '',
},
})
</script>
</html>
4 vue生命周期
# var vm=new Vue实例()
-1 实例创建，数据放到实例中
-2 挂在模板：el---》div
-3 改页面，改变量，都会相互影响 update
-4 销毁实例
# 4个过程，对应八个函数，依次执行（到某个过程就会执行某个函数）
beforeCreate 创建Vue实例之前调用，data，el都没有
created 创建Vue实例成功后调用（可以在此处发送异步请求后端数据），data有了，el没有的
beforeMount 渲染DOM之前调用 ，data有了，el没有
mounted 渲染DOM之后调用
beforeUpdate 重新渲染之前调用（数据更新等操作时，控制DOM重新渲染）
updated 重新渲染完成之后调用
beforeDestroy 销毁之前调用
destroyed 销毁之后调用
# 5 钩子函数（hook） AOP的体现：面向切面编程--》装饰器实现aop
# 6 vm实例：看不到它销毁 组件vc
# 7 组件：组件化开发
# 8 学习生命周期重点掌握的
-1 组件向后端发送请求，获取数据，应该放在 created 写，此时data已经有数据了
-2 destroyed做一些资源清理性的工作
# 9 小案例：组件创建，开启定时器，不停的打印hello，在destroyed中对定时器进行销毁
-补充：js 定时任务和延时任务
# 延时任务
setTimeout(()=>{
console.log('3s后执行我')
},3000)
#定时任务
setInterval(()=>{
console.log('hello')
},3000)
#10 什么场景下用定时任务？
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>
标签：el,
26,
Vue,
console,
log,
data,
调用,
2022.10
From： https://www.cnblogs.com/55wym/p/16830274.html