目录
v-for的循环方式
数组/字典/字符串/数字
<div id="app">
<p v-for="(item,index) in l1">{{index}}---{{item}}</p>
<!-- index是循环遍历次数默认从0开始，item是值-->
<p v-for="(value,key) in d1">{{key}}:{{value}}</p>
<!-- 这样可以循环遍历展示字典的key和value-->
<p v-for="(value) in d1">{{value}}</p>
<!-- 如果只有一个变量默认显示的是字典的值-->
<p v-for=" (item,index) in 8">数字：{{index}}:{{item}}</p>
<!-- 也可以直接设置循环几次，值默认从1开始，索引默认从0开始-->
<p v-for=" (item,index) in s1">数字：{{index}}:{{item}}</p>
<!-- 也可以对字符串进行循环遍历-->
</div>
<script>
var l2 = [2, 3, 4]
new Vue({
el: '#app',
data: {
name: 'moon',
l1: [1, 2, 3],
d1: {'name': 'moon', 'age': 18, l2},
s1: 'holle'
// 字典中也可以直接带上数组
}})
</script>
原生js的循环方式
1.循环列表 根据索引循环 2.用in循环 3.of循环 4.数组内置方法 forEach循环
<script>
for (i = 0; i < 5; i++) {
// for（起始条件；终止条件；循环中的操作）
console.log(i)
}
// 1.循环列表
var l1 = ['11', '22', '33']
for (i = 0; i < l1.length; i++) {
// for（起始条件；终止条件；循环中的操作）
console.log(l1[i])
// 根据索引循环取列表中的值
}
// 2.用in循环 默认只能拿到索引
var l2 = ['33', '44', '55']
for (item in l2) {
console.log(l2[item])
// item=0,1,2
}
// 3.of循环 这样就可以直接拿到里面的值
var l3 = ['66', '77', '88']
for (i of l3){
console.log(i)
// i = '66', '77', '88'
}
// 4.数组内置方法循环 forEach循环
var l4 = ['aa', 'bb', 'cc']
l4.forEach(function (item) {
console.log(item)
})
</script>
v-for中key值方法的解释
# vue的v-for写在标签上，在标签上加一个key，用属性指令绑定一个变量，key的值每次都不一样，这样可以加速虚拟dom的替换，从而提高循环效率，key值必须唯一
<div v-for="item in 8" :key="item">{{item}}</div>
# 这样可以使循环出来的每一个标签都是唯一的，
# 需要给对象里面的每一项都绑定上一个唯一的标识
# 这个时候就可以用到我们的这个 key 了
vue中数组和对象的检测更新
遇到数据变了页面没有变的情况需要用Vue.set
通过事件给页面数据发送变化 例如修改或新增数据 ，修改数据页面可以时时展示，
新增数据 需要使用Vue.set来新增才可以时时获取
<script>
var vm = new Vue({
el: '#app',
data: {
info: ['name','moon', 'age',]
},
methods: {
handleAdd() {
// this.info['hobby'] = '篮球'
// 直接增加值 页面是不会时时变化的
// this.info['name'] = 'nbmoon'
// 修改值页面是可以时时变化的
Vue.set(this.info,'6','篮球')
// this.info是字典那就是 key，value
// this.info如果是数组 索引位置，value，索引位置有值就更改 无则新增
// 对于需要新增的数据 使用Vue.set方法进行新增 可以时时变化
}
}})
</script>
input事件
# input 的事件：
click 当输入框被点击时 触发的事件
input 当输入框进行输入的时候 触发的事件
change 当元素的值发生改变时 触发的事件
blur 当输入框失去焦点的时候 触发的事件
focus 当获得焦点，触发事件 不要搭配alert弹窗使用 会无限循环触发
<div id="app">
点击事件<input type="text" @click="handleClick">
聚焦事件<input type="text" @focus="handleFocus">
<!-- 聚焦事件是只要点击了输入框就会立刻触发-->
失去焦点事件<input type="text" @blur="handleBlur">
input事件<input type="text" @input="handleInput">
<!-- input事件是要在输入框里输入内容就会立刻触发-->
变化事件<input type="text" @change="handleChange">
<!-- input事件是要在输入框失去焦点后里面内容有变化才会触发-->
</div>
v-model双向数据绑定
将input内的值和外面的值做双向绑定 有任何更改都会同时变化
<body>
<div id="app">
<input type="text" v-model="name">---{{name}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name:'moon'
},
})
</script>
过滤案例
<div id="app">
请输入搜索内容：<input type="text" v-model="myType" @input="search">{{myType}}
<ul>
<li v-for="i in newDatelist">{{i}}</li>
<!--循环展示关键词 -->
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
myType: '',
dateList: ['a', 'aa', 'vvs', 'asd', 'weq', 'sxc', 'asd', 'wqe', 'sadc', 'c', 'asd'],
<!-- 关键词列表 -->
newDatelist: ['a', 'aa', 'vvs', 'asd', 'weq', 'sxc', 'asd', 'wqe', 'sadc', 'c', 'asd'],
<!-- 过滤后列表 -->
},
methods: {
search() {
this.newDatelist = this.dateList.filter(
<!--数组自带方法.filter加匿名函数，结果为ture就保留，结果为false就过滤掉，然后赋予给新的列表展示到前端-->
item => item.indexOf(this.myType) >= 0
)}
}})
</script>
思路:
1.对输入框输入值和变量进行双相绑定 时时接收输入框数据，并对输入框绑定input事件
2.只要输入框有输入则触发input事件
3.创建2个关键词列表数据相同，一个用来展示，一个用来过滤
4.对用于过滤的列表进行过滤方法，过滤方法内部会对每一个数据进行判断，是否和输入数据有相同的部分，有则保留，无则去除，保留后的值赋予给展示列表
5.这样前端就实现了时时输入 时时过滤
箭头函数
箭头函数主要作用：可以当该函数运用父级函数内的this，解决了函数套函数this指向问题
eg:
var vm = new Vue({
el: '#app',
data: {
myType: '',
dateList: ['a', 'aa', 'vvs', 'asd', 'weq', 'sxc', 'asd', 'wqe', 'sadc', 'c', 'asd'],
newDatelist: ['a', 'aa', 'vvs', 'asd', 'weq', 'sxc', 'asd', 'wqe', 'sadc', 'c', 'asd'],
},
methods: {
search() {
# 创建函数
this.newDatelist = this.dateList.filter(
# 函数内部又创建了匿名函数
item => item.indexOf(this.myType) >= 0
)}
}
item => item.indexOf(this.myType) >= 0
# 参数 => 运行结果
# 由于使用了箭头函数，这里就可以直接使用this了，这里的this相当于父级里面的
事件修饰符
@click.stop="handleLi" 用于修饰事件
| 事件修饰符 | 释义 |
|---|---|
| .stop | 只处理自己的事件，子控件冒泡的事件不处理（阻止事件冒泡） |
| .self | 只处理自己的事件，子控件冒泡的事件不处理 |
| .prevent | 阻止a链接的跳转 |
| .once | 事件只会触发一次（适用于抽奖页面） |
<!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>
按键修饰符
通过按键来触发函数的执行
<input type="text" v-model="test" @keyup.enter="handleKey1">
# 通过enter键来触发handleKey1这个函数
<input type="text" v-model="test" @keyup="handleKey">
# 任意按键触发函数
handleKey(event) {
# 按键函数可以带参数，默认按键对象
if (event.keyCode === 13) {}
}
# 可以通过 event.keyCode来获取用户按键的 键数值
# 可以通过 event.key来获取用户按的什么键
Input表单控制
username:<input type="text" v-model="username">
password:<input type="password" v-model="password">
男:<input type="radio" v-model="gender" value="男">
女:<input type="radio" v-model="gender" value="女">
记住密码:<input type="checkbox" v-model="remember">
<p>爱好：
篮球<input type="checkbox" v-model="hobby" value="篮球">
足球<input type="checkbox" v-model="hobby" value="足球">
双色球<input type="checkbox" v-model="hobby" value="双色球">
</p>
# input type="radio" 单选 需要设定一个值 双向绑定
<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>