Vue 03
Vue
js的几种循环方式
v-for 可以循环的变量
v-for 可以循环的有：
数组，对象，字符串，数字
循环各类数据类型的区别
数组：
<div v-for="(item,index) in l">第 {{index + 1}}个，值是：{{item}}</div>
循环数组可以循环两个，一个是数组的值，一个是数组中数据的索引。循环数组的时候，数据值在前面，索引值在后面
总结：
- items：要迭代的数组
item：存储数组元素的变量名
index：迭代到的当前元素索引，从0开始。
对象：
<div v-for="(item,key) in info">key值是：{{key}}-----{{item}}</div>
v-for="(value,key,index) in object"
循环对象，第一个参数是值，第二个值是对象的键。
循环对象的时候是数据值在前面，建再后面。
总结：
- value，对象的值
key， 对象的键
index, 索引，从0开始
字符串：
<div v-for="(item,index) in s">
<p v-if="item!=' '">{{item}}---->索引是：{{index}}</p>
<br v-else>
</div>
循环字符串是将字符串一个个字符串拿出来，就算是空格也是会算在其中，但是在界面上空格虽然占据了，一个标签但是由于标签的特性，没有显示出来，所以就在上面的例子中，加了一个if判断和br 标签进行分别。
循环的参数第一个是值，第二个是索引，索引的范围是连空格都都会算在其中。
数字:
<div v-for="(item,index) in 8">{{item}}----索引是：{{index}}</div>
循环数字，不需要像python一样需要加上range，直接就能循环，循环的两个值，第一个是循环出来的值，第二是索引。
js的循环方式
- 在js中的循环都是基于索引的循环，python中都是基于迭代的循环
第一种基于索引的循环
var a = [4, 5, 6, 7]
for (i = 0; i < a.length; i++) {
console.log(i) # 打印的是索引
// console.log(a[i]) # 这里打印的是值
}
第二种js基于循环
拿到的是索引，跟vue的v-for区分
var a = [4, 5, 6, 7]
for(i in a){
console.log(i) //索引
console.log(a[i]) // 值
}
第三种 es6 语法 for 循环
var a = [4, 5, 6, 7]
for (item of a) {
console.log(item) // 值
}
第四中 数组的方法， forEach 循环
var a=[4,5,6,7]
a.forEach(function (item) {
console.log('----',item)
})
第五种 jQuery的循环 ，循环数组，对象
var a = [4, 5, 6, 7]
$.each(a, function (index, item) {
console.log(index) //索引
console.log(item) // 值
})
key值的解释
** :key 一般配合v-for一起使用. 用来在特定情况下, 保证被遍历的数组中的元素的顺序.**
vue de v-for 指令写在标签上，在标签上加上一个key，用属性指令绑定一个变量，key的值每次都不一样，这样可以加速虚拟DOM的替换，从而提高循环的效率，而且key的值必须是唯一
例：
<div v-for="item in 8" :key="item">{{item}}</div>
说明：
当我们运行上面的选这个标签，会在界面上寻安然出标签中的值，但是当我们在标签中插入一个值，那后台就会在调用执行DOM，再次执行循环，并且将数据加入到，渲染的标签页面上，但是当我们在标签中加上绑定的key值，就只会在原来的基础上加上这个标签数据，所以绑定的key一般使用的都是数据的索引值。
以后我们在写标签的时候尽量还是加上key
<div id="app">
<button @click="add">添加</button>
<ul>
<li v-for="name in list">
<input type="checkbox"> {{name}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
list: ["孙悟空", "猪八戒", "沙和尚"]
},
methods: {
add() {
//注意这里是unshift,向数组的头部添加一个元素
this.list.unshift("唐僧");
}
}
});
</script>
解决方案：
<div id="app">
<button @click="add">添加</button>
<ul>
<!-- 添加:key即可. 注意,key中的值必须是唯一且不会改变的值-->
<li v-for="name in list" :key="name">
<input type="checkbox"> {{name}}
</li>
</ul>
</div>
数组，对象的检测和更新
在运行HTML页面的时候，我们进行一些数据的修改，但是会发现，后台的数据已经被修改掉了，但是页面却没有实时渲染出来，我们可以使用下面的方法将设置一下即可：
Vue.set(this.info, 'hobby', '篮球')
<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 当获的焦点的时候，触发
<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>
v-model 的双向数据绑定
概述：
- Vue的双向绑定的实现：数据发生变化，页面就会自动刷新，页面发生变化的时候，数据也会跟着自动发生变化
注意：
- 双像绑定，只能绑定文本框，单选按钮，复选框，文本域，下拉列表。。
<div id="app">
用户名: <input type="text" v-model="username"/>
<h1>单向数据绑定</h1>
名字： <input type="text" :value="name">---->{{name}}--->单向数据绑定
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
//该属性值和文本框的value属性值,保持一致
username:""
}
});
</script>
事件修饰符
Vue.js 为v-on 提供了事件修饰符来处理DOM事件细节。
可以通过点（.）表示的指令后缀来调用修饰符。
.stop- 阻止冒泡.prevent- 阻止默认事件，（阻止a链接的跳转，可以自定义跳转）.capture- 阻止捕获.self- 只监听触发该元素的事件.once- 只触发一次，.left- 左键事件.right- 右键事件.middle- 中间滚轮事件
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>
<a href="http://www.baidu.com" @click.prevent="handleA"></a
location.href = 'http://www.cnblogs.com'
按键修饰符
# 按键事件 ：当按了某个键盘的键，就会触发函数的执行
@key='handlekeyUp'
# 按键修饰符：只有在按下某个按键按下才会触发
Vue允许为v-on在监听键盘事件时添加按键修饰符：
# 只有在 keyCode 是 13 时调用 vm.submit()
<input v-on:keyup.13="submit">
# 记住所有的keyCode还是比较困难的，所以还能使用其他的方法：
<!-- 缩写语法 -->
<input @keyup.enter="submit">
例子：
<p><!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
表单控制
input表单中有这门几种变量类型：
text ，radio（单选），CheckBox（单选和多选）
在使用表单控制件元素可以使用v-model创建双向数据绑定，不管单选还是输入的数据，亦或者多选的数据，在进行选定多的时候，v-model会根据控件类型自动选取正确的方法来更新元素。
<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>
过滤案例
使用场景：
- 可以在进行数据搜索的时候使用
<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() {
this.newDataList = this.dataList.filter(
item => item.indexOf(this.myText) >= 0
) }, }})
补充点：
数组的过滤方法
var dataList = ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
var newDataList = dataList.filter(function (item) {
return false //return true表示这个值保留,false 表示这个值不要
})
console.log(newDataList)
字符串的indexOf方法
判断子字符串是否在当前字符串中,如果在返回的是索引，如果不在返回-1
var s = 'lqz is handsome'
var s1 = 'qqq'
var i = s.indexOf(s1)
console.log(i)
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'
}
5.简写方式
var f = item => item + '小明'
var res = f('小红')
console.log(res)
浙公网安备 33010602011771号