js的几种循环方式 key值的解释 数组及对象的检测与更新 input事件 v-model双向数据绑定 过滤案例 事件修饰符 按键修饰符 表单控制
目录
回顾
幸存者偏差 达克效应
1. m v vm演示
2. 插值语法 {{}}
三目运算符 ---> 条件?'':''
3.文本指令
v-xx vue的指令，放在标签属性里
v-text='变量'
v-html=
v-show style-display:none(隐藏) <p v-show="true"> 哈哈哈 </p>
v-if 标签整个删除个插入
4. 事件指令
v-on:事件名='函数' 简写 @事件=''
es6：对象定义的方式、模板字符串(反引号)。
5. 属性指令
v-bind：属性='变量' 简写 :属性='值'
6. v-if v-else-if v-else
7. v-for='item in 数组，对象，字符串，数字'
js的几种循环方式
v-for可以循环的变量：v-for写在标签上，能循环数组、对象、字符串、数字，
<!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>
总结：v-for循环默认是将值循环出来，字符串、数组、数字的循环索引是从0开始的，循环的第二个值是从0开始的索引值。而对象默认循环的是值，循环的第二个参数是键，注意与python中字典区分开
L不能放，它是对象里的一个值
div是不占空间的，带上空格
显示空格
js的循环方式
-
js 的循环
是基于索引的循环；python 没有基于索引的循环，python都是基于迭代的循环
var a = ['你', '我', '它','她']
for(i=0;i<a.length;i++){
// console.log(i) 结果：0 1 2 3
console.log(a[i])
}
-
js的in循环
拿到的是索引，是基于索引的循环，跟vue的v-for区分
var b = ['你', '我', '它','她']
for(i in b){
console.log(i) 结果是：0 1 2 3
}
-
es6的语法
---> of 循环 基于迭代的
var d = ['你', '我', '它','她']
for(i of d){
console.log(i) 结果是：你 我 它 她
}
-
数组的方法
forEach可以循环
var e = ['你', '我', '它','她']
e.forEach(function(item){
console.log(item) 结果：你 我 它 她
})
-
jQuery的循环
循环数组：第一个参数是索引值，第二个才是值。循环对象：第一个参数是键，第二个才是值
var f = ['你', '我', '它','她']
$.each(f, function (index，item){
console.log(index) 结果是：0 1 2 3
// console.log(item) 结果：你 我 它 她
})
var dic = {'name': 'jason', 'age':18, 'height': 180}
$.each(dic, function (index, item){
console.log(index) 结果：name age height
})
补充
Element
Vue Element也是一个框架，是基于Vue的框架。
Vue框架是对JS的封装，并没有封装进去CSS样式。Vue Element是基于Vue的框架，它封装了CSS样式，使用Vue需要样式的话就是用它。
官网(有很多可以利用的资源):https://element.eleme.cn/#/zh-CN
python的海象运算符
if
基础写法：
x = 3
if x < 10:
print('hello')
海象运算符：
if x:=3 < 5:
print('hello')
while
基础语法：
num = 3
while num:
print(num)
num -= 1
海象运算符写法：
num = 3
while (num:=num-1)+1:
print(num) # 2 1 0
用于推导式中：
海象：
key值的解释
vue的v-for写在标签上，在标签上加上一个key，用属性指令绑定一个变量，key的值每次都不一样，这样可以加速虚拟dom的替换,从而提高循环效率，key值必须唯一
<div v-for="item in 8" :key="item">{{item}}</div>
数组、对象的检测与更新
对象，新增一个key-value,发现页面没有变化。用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>
数据添加了，页面没有显示
对象，新增一个key:value，Vue.set(this.info,'weight',999)
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>
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 class="app">
<p>请输入: <input type="text" v-model="myText" @input="handleInput"></p>
<ul>
<li v-for="item in newDataList">{{item}}</li>
</ul>
</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(function(item){
// // if(item.indexOf(_this.myText) >= 0){
// // return true
// // }else{return false}
// return item.indexOf(_this.myText) >=0
// })
this.newDataList = this.dataList.filter(item => item.indexOf(this.myText) >= 0)
}
}
})
// 原型 var f = function(){ console.log('箭头函数')}
// 箭头函数：无参数 无返回值
// var f = () => {
// console.log('箭头函数')
// }
// f()
// 原型
var f = function(item){
console.log(item)
}
f('wyf')
// 箭头变形 有一个参数没有返回值
var g = key => {
console.log(key)
}
g('fhy')
var k = (item) => {
return item + 'wyf'
}
var res = k('wyf')
console.log(res)
var l = item => item+'wyf'
var kk = l('wyf')
console.log(kk)
</script>
</html>
补充1：数组的过滤方法
只有数组才有过滤filter
var li = ['sae', 'her', 'jason', 'tony', 'sei']
var newLi = li.filter(function (item){
// return false // 结果：[] false表示不要该值
return true // 结果:sae her jason ... true表示保留该值
})
console.log(newLi)
补充2：字符串的indexOf方法
判断子字符串是否在当前字符串中,如果在返回的是索引，如果不在返回-1
var a = 'my name is wyf'
var b = 'n'
var c = a.indexOf(b)
console.log(c) // 3 返回a字符串中对应的索引值，不存在返回-1
补充3：es6 的箭头函数写法
函数中套函数，this指向有问题，有了箭头函数，箭头函数没有自己的this，用的都是上一级的this
1.无参函数，无返回值箭头函数
// 原型 var f = function(){ console.log('箭头函数')}
// 箭头函数：无参数 无返回值
var f = () => {
console.log('箭头函数')
}
f()
2.有一个参数，没有返回值的箭头函数 括号可以去掉,可以加
// 原型
var f = function(item){
console.log(item)
}
f('wyf')
// 箭头变形 有一个参数没有返回值
var g = key => {
console.log(key)
}
g('fhy')
3.有多个参数，没有返回值的箭头函数 括号不能去掉
var f = (item, key) => {
console.log(item)
}
4.有一个参数，一个返回值
太low：
var f = (item) =>{
return item + 'wyf'
}
var res = f('wyf')
console.log(res) 结果wyfwyf
太low：
var f = item =>{
return item + 'wyf'
}
var res = f('wyf')
console.log(res) 结果wyfwyf
高端：
var f = item => item + 'wyf'
var res = f('wyf')
console.log(res) 结果wyfwyf
事件修饰符(了解)
| 事件修饰符 | 释义 |
|---|---|
| .stop | 只处理自己的事件，子控件冒泡的事件不处理（阻止事件冒泡） |
| .self | 只处理自己的事件，子控件冒泡的事件不处理 |
| .prevent | 阻止a链接的跳转 |
| .once | 事件只会触发一次（适用于抽奖页面） |
学过事件：click，change，input。。。
修饰click事件
<!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='handlekeyUp'
按键修饰符：只有某个按键被按下才触发 @keyup.enter @keyup.13
<!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>
按键event.codekey -->按键对应的数字 event.key -->按键英文字符
按键修饰符
如果传参的话
那要想拿到就得特指
表单控制
input ---> 变量类型是什么？
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>
