目录
- 一、js的几种循环方式
- 二、key值的解释
- 三、数组，对象的检测与更新
- 四、input事件
- 五、v-model双向数据绑定
- 六、过滤案例
- 七、事件修饰符（了解）
- 八、按键修饰符
- 九、表单控制
- 十、python的海象运算符（了解）
一、js的几种循环方式
1.1 v-for可以循环的变量
v-for 可以循环数组，数字，字符串，对象
v-for="key in obj"
-如果是数组：key就是数组的一个个元素
-如果是数字：key就是从1开始的一个个数字
-如果是字符串：key就是一个个字符
-如果是对象：key就是一个个value的值
v-for="(key,value) in obj"
-如果是数组：key就是数组的一个个元素,value就是索引
-如果是数字：key就是从1开始的一个个数字,value就是索引
-如果是字符串：key就是一个个字符,value就是索引
-如果是对象：key就是一个个value的值，value就是一个个key
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div>
<div class="app">
<h1>v-for可以循环什么？</h1>
<h2>循环数组</h2>
<span v-for="item in l">{{item}}</span>
<h2>循环数组带索引</h2>
<div v-for="(item,index) in l">第 {{index + 1}}个，值是：{{item}}</div>
<h2>循环对象,默认是value</h2>
<div v-for="item in info">{{item}}</div>
<h2>循环对象,带key和value</h2>
<div v-for="(item,key) in info">key值是：{{key}}-----{{item}}</div>
<h2>循环字符串</h2>
<div v-for="item in s">
<p v-if="item!=' '">{{item}}</p>
<br v-else>
</div>
<h2>循环字符串-带索引</h2>
<div v-for="(item,index) in s">
<p v-if="item!=' '">{{item}}---->索引是：{{index}}</p>
<br v-else>
</div>
<h2>循环数字</h2>
<div v-for="item in 8">{{item}}</div>
<h2>循环数字-带索引</h2>
<div v-for="(item,index) in 8">{{item}}----索引是：{{index}}</div>
</div>
</div>
</body>
<script>
var l1 = [4, 5, 6,]
new Vue({
el: '.app',
data: {
l: [1, 2, 3],
info: {name: 'lqz', age: 19, l1},
s: 'hello world'
},
methods: {},
})
</script>
</html>
1.2 js的循环方式
<script>
//1 js 的循环 基于索引的循环 python 没有基于索引的循环，python都是基于迭代的循环
var a = [4, 5, 6, 7]
for(i=0;i<10;i++){
for (i = 0; i < a.length; i++) {
// console.log(i)
console.log(a[i])
}}
// 2 js 的in 循环 拿到的是索引 跟vue的v-for区分
var a = [4, 5, 6, 7]
for (i in a) {
// console.log(i)
console.log(a[i])
}
// 3 es 6语法 of 循环
var a = [4, 5, 6, 7]
for (item of a) {
console.log(item)
}
// 4 数组的方法，forEach可以循环
var a = [4, 5, 6, 7]
a.forEach(function (item) {
console.log('----',item)
})
// 5 jq 的循环 循环数组，对象
var a = [4, 5, 6, 7]
$.each(a, function (index, item) {
console.log(index)
console.log(item)
// index表示索引，item表示数组中的值
})
</script>
二、key值的解释
vue的v-for写在标签上，在标签上加一个key，用属性指令绑定一个变量，key的值每次都不一样，这样可以加速虚拟dom的替换，从而提高循环效率，key值必须唯一
<div v-for="item in 8" :key="item">{{item}}</div>
每次循环的标签上，一般都会带一个属性：
:key='值必须唯一'
这个属性的值之所以是唯一的，是为了加速虚拟dom的替换
我们可以这样理解，如果在v-for的标签上添加一个key属性，并且他是在循环过程之中每次去得值都是唯一的，那么在vue中，当我们添加新的数据产生dom添加进去的时候会在vm层产生一个虚拟dom，跟当前的网页进行对比，然后把没有的部分写入网页，不需要调整的部分就不动他了
比如用一个列表产生一个表格，我们在列表中间插入数据的时候，如果使用了:key属性，并且值唯一，他会在原来的基础上进行增加和修改，如果没有:key属性就是这部分的整块网页代码重写。
如果:key这个属性的值不是唯一的，就会报错
三、数组，对象的检测与更新
当我们在对象中新增一个key-value，发现页面没有变化
举例：
当我们在js代码或是浏览器的控制台中，对某个对象添加一对原本没有的键值对，我们会发现这个新增的内容并没有被渲染到网页上
this.info['name'] = '彭于晏'
这里我们可以在对象中设置name键值对，然后修改，去网页看是否变化
然后不要定义hobby键值对，然后后手添加，我们会发现网页没有变化但是数据添加进去了
this.info['hobby'] = '篮球'
以后我们想添加数据并且能被vue自动识别添加到网页上需要用下方的方式添加数据
Vue.set(this.info, 'hobby', '篮球') 设置一下即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div>
<div class="app">
<h1>循环对象</h1>
<div v-for="(value,key) in info">
<h3>key值是：{{key}}</h3>
<h2>value是：{{value}}</h2>
<hr>
</div>
<button @click="handleAdd">点我，加数据</button>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
info: {name: 'lqz', age: 19},
},
methods: {
handleAdd() {
// 页面会变化
// this.info['name'] = '彭于晏'
// 页面不会变，单是值有了
// this.info['hobby'] = '篮球'
// 遇到数据变了，页面没变的情况，都是用
Vue.set(this.info, 'hobby', '篮球')
}
},
})
</script>
</html>
四、input事件
# input 的事件：
click
input 当输入框进行输入的时候 触发的事件
change 当元素的值发生改变时 触发的事件
blur 当输入框失去焦点的时候 触发的事件
focus 当获得焦点，触发事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div>
<div class="app">
<h1>点击事件click</h1>
<input type="text" @click="handleClick">
<h1>失去焦点</h1>
<input type="text" @blur="handleBlur">
<h1>input事件，只要输入，就会触发</h1>
<input type="text" @input="handleInput">
<h1>change事件</h1>
<input type="text" @change="handleChange">
<h1>focus事件</h1>
<input type="text" @focus="handleFocus">
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {},
methods: {
handleClick() {
alert('点了')
},
handleBlur() {
console.log('失去了')
},
handleInput() {
console.log('输入了东西')
},
handleChange() {
console.log('我变了')
},
handleFocus() {
console.log('我获得了')
}
}
})
</script>
</html>
点击事件
失去焦点
input事件
change事件（输入后需要点击输入框外或是点击回车才算输入结束）
聚焦事件
五、v-model双向数据绑定
# input 可以输入值，输入后，就被js变量拿到，如果使用 :value='变量' 这种形式，页面中输入框变化，变量的值不会变，需要使用v-model做双向数据绑定，这样变量的值才能被修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div>
<div class="app">
<h1>单向数据绑定</h1>
<input type="text" :value="name">---->{{name}}--->单向数据绑定
<h1>双向数据绑定</h1>
<input type="text" v-model="age">---->{{age}}--->双向数据绑定
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
name: 'lqz',
age:10
},
})
</script>
</html>
六、过滤案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div>
<div class="app">
<h1>过滤案例</h1>
<p>请输入要搜索的内容：<input type="text" v-model="myText" @input="handleInput"></p>
<ul>
<li v-for="item in newDataList">{{item}}</li>
</ul>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
myText: '',
dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
newDataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
},
methods: {
handleInput() {
// // 简化版本一
// var _this = this
// this.newDataList = this.dataList.filter(item => {
// // 判断item在不在myText中
//
// // this 指向问题
// // if (_this.myText.indexOf(item) >= 0) { // 判断输入的值myText是否在item中
// if (item.indexOf(_this.myText) >= 0) {
// return true
// } else {
// return false
// }
// // 简化版本二
// this.newDataList = this.dataList.filter(item => {
// // 判断item在不在myText中
//
// // this 指向问题
// // if (_this.myText.indexOf(item) >= 0) { // 判断输入的值myText是否在item中
// // if (item.indexOf(_this.myText) >= 0) {
// // return true
// // } else {
// // return false
// // }
//
// //上面5行，简写成
// return item.indexOf(this.myText) >= 0
//
//
// })
// 简化版本三
this.newDataList = this.dataList.filter(
item => item.indexOf(this.myText) >= 0
)
},
}
})
// 补充1 ：数组的过滤方法
// var dataList = ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
// var newDataList = dataList.filter(function (item) {
// return false // return true表示这个值保留,false 表示这个值不要
// })
// console.log(newDataList)
'过滤的工作流程就是获取数组中的值进行判断，返回true就保留这个值，返回false就不要这个值'
// 补充2 ：字符串的indexOf方法，判断子字符串是否在当前字符串中,如果在返回的是索引，如果不在返回-1
// var s = 'lqz is handsome'
// var s1 = 'qqq'
// var i = s.indexOf(s1)
// console.log(i)
// 补充3 ：es6 的箭头函数写法---》函数中套函数，this指向有问题，有了箭头函数，箭头函数没有自己的this，用的都是上一级的this
// 1 无参数，无返回值箭头函数
// var f = () => {
// console.log('函数')
// }
// 2 有一个参数，没有返回值的箭头函数 括号可以去掉,可以加
// var f = item => {
// console.log(item)
// }
// 3 有多个参数，没有返回值的箭头函数 括号不能去掉
// var f = (item, key) => {
// console.log(item)
// }
// 4 有一个参数，一个返回值
// var f = (item)=> {
// return item + 'lqz'
// }
// var f = item => {
// return item + 'lqz'
// }
var f = item => item + 'lqz'
var res = f('lqz')
console.log(res)
</script>
</html>
ps：在编写这个实时过滤功能的时候，关键问题就是用于展示的数组，在使用filter过滤的时候内容会被替换，因此我们需要用一个新的数组来接受过滤出来的内容
七、事件修饰符（了解）
| 事件修饰符 | 释义 |
|---|---|
| .stop | 只处理自己的事件，子控件冒泡的事件不处理（阻止事件冒泡） |
| .self | 只处理自己的事件，子控件冒泡的事件不处理 |
| .prevent | 阻止a链接的跳转 |
| .once | 事件只会触发一次（适用于抽奖页面） |
学过事件：click，change，input。。。
我们学习这些修饰符主要是修饰click事件
这里的stop等于是子控件不影响父控件，self等于是父控件让自己不受子控件的影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div>
<div class="app">
<h1>事件修饰符stop，子控件不再冒泡给父控件</h1>
<ul @click='handleUl'>
<li @click.stop="handleLi">第一</li>
<li>第二</li>
</ul>
<h1>事件修饰符self:只处理自己的事件，子控件的冒泡，不处理</h1>
<ul @click.self='handleUl'>
<li @click="handleLi">第一</li>
<li>第二</li>
</ul>
<h1>prevent阻止a的跳转</h1>
<a href="http://www.baidu.com" @click.prevent="handleA">点我看美女</a>
<h1>once 只响应一次</h1>
<button @click.once="handleClick">点我抽奖</button>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {},
methods: {
handleLi() {
console.log('li被点击了')
},
handleUl() {
console.log('ul被点击了')
},
handleA() {
console.log('a标签被点了')
// 阻止a的跳转，自己决定要不要跳
// 手动指定跳
location.href = 'http://www.cnblogs.com'
},
handleClick() {
console.log('我被点了')
}
}
})
</script>
</html>
八、按键修饰符
按键事件
按键事件：按了键盘某个键，就会触发函数的执行
@keyup
'按键按下去之后，在松开的时候会触发'
@keypress
'按键按下去再松开触发（完成一次按压）'
@keydown
'按键按下去的时候触发'
@keyup="handleKeyUp"
按键修饰符
按键修饰符：只有某个按键被按下才触发
@keyup.enter
@keyup.13
<div class="app">
<input type="text" v-model="text" @keyup.enter="handleKeyUp($event)">--->{{text}}
</div>
<script>
var vm = new Vue({
el: '.app',
data: {
text: ''
},
methods: {
handleKeyUp(event) {
// console.log('按键被按下了')
// keyCode 对照表https://blog.csdn.net/zqian1994/article/details/109486445
// console.log('按钮被按下了：', event.key, event.keyCode)
if (event.keyCode == 13) {
console.log('开始跟后端交换搜索了')
}
},
}
})
通过浏览器的控制台我们可以点开查看他内部的键值对，key这个键对应的是我们输入的a，因此我们可以通过key来获取键盘输入的字符同时我们也会看到一个键值对叫keyCode，他返回的是一些数字，我们也可以通过keyCode的值来判断某个按键是否被点击了
补充知识
keyCode对照表对应着键盘上的所有按键，我们可以去百度搜出来看看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div>
<div class="app">
<!-- <input type="text" v-model="text" @keyup="handleKeyUp">-–>{{text}}-->
<!-- <input type="text" v-model="text" @keyup.13="handleKeyUp2">-–>{{text}}-->
<input type="text" v-model="text" @keyup.enter="handleKeyUp2(1,$event)">--->{{text}}
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
text: ''
},
methods: {
handleKeyUp(event) {
// console.log('按键被按下了')
// keyCode 对照表https://blog.csdn.net/zqian1994/article/details/109486445
// console.log('按钮被按下了：', event.key, event.keyCode)
if (event.keyCode == 13) {
console.log('开始跟后端交换搜索了')
}
},
handleKeyUp2(a, event) {
console.log(event)
console.log('enter被按了')
}
}
})
</script>
</html>
ps
我们在定义按键事件对应的方法时，可以给他定义两个形参，第一个形参是索引，第二个才是上文提到的键盘输入的对象
九、表单控制
# input标签中可以通过type属性控制变量类型 ----》变量类型是什么？
type属性
text 类型
radio：单选
checkbox：单选和多选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div>
<div class="app">
<p>用户名：<input type="text" v-model="username"></p>
<p>密码：<input type="password" v-model="password"></p>
<p>性别：
男：<input type="radio" v-model="gender" value="1">
女：<input type="radio" v-model="gender" value="2">
</p>
<p>记住密码：<input type="checkbox" v-model="remember"></p>
<p>爱好：
篮球：<input type="checkbox" v-model="hobby" value="篮球">
足球：<input type="checkbox" v-model="hobby" value="足球">
排球：<input type="checkbox" v-model="hobby" value="排球">
</p>
<button @click="handleClick">登录</button>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
username: '',
password: '',
gender: '', // radio单选，多个radio绑定同一个变量，选中某个，就对应value值
remember: false, // checkbox 单选是true或false
hobby: [] // checkbox 多选是数组类型，必须一开始定义就是数组，多个checkbox绑定一个变量
},
methods: {
handleClick() {
console.log(this.username, this.password, this.gender, this.remember, this.hobby)
}
}
})
</script>
</html>
ps：上方的记住密码和爱好，他的值可以用别的数据值代替（比如给他们分配成数字）
十、python的海象运算符（了解）
Python 海象运算符是在 PEP 572 中提出，并在 Python3.8 版本并入和发布。
海象运算符的英文原名叫 Assignment Expresions ，即 赋值表达式。海象表达式由一个 : 和 一个 = 组成，即 := 。我们一般称作 walrus operator（海象运算符），因为它看起来就是一个海象旋转 90° 而成。
语法
海象运算符的语法格式是：
(variable_name := expression)
这是一个新的赋值运算符，跟我们常见的 = 类似，一个变量名后面跟一个表达式。
用法
用于 if-else 条件表达式
常规写法：
a = 5
if a > 1:
print('do sth!')
升级写法
if a := 5 > 1:
print('do sth!')
用于 while 循环
常规写法：
n = 3
while n:
print('do sth!')
n -= 1
升级写法：
n = 3
while (n := n - 1) + 1:
print('do sth!')
这里加1是因为执行输出前n就减1了。
读取文件
常规写法：
fp = open("test.txt", "r")
while True:
line = fp.readline()
if not line:
break
print(line.strip())
fp.close()
升级写法：
fp = open("test.txt", "r")
while line := fp.readline():
print(line.strip())
在合适的场景中使用海象运算符可以降低程序复杂性，简化代码，甚至可以提高程序的性能。
不适用场景
虽然海象运算符好用，但也不是所有场景都能用，还是有它的局限性的。
变量赋值
我们不能将 = 运算符与 := 运算符一起使用，海象运算符只能是表达式的一部分：
a = 5 # Valid
a := 5 # InValid
empty_list = [] # Valid
empty_list := [] # InValid
如果你这样写，编辑器会直接提示错误。
加减法
a += 5 # Valid
a :+=5 # Invalid
Lambda函数中的赋值表达式
(lambda: a:= 5) # Invalid
lambda: (a := 5) # Valid, but not useful
(var := lambda: 5) # Valid