Vue - 3 事件处理、表单输入绑定
目录
Vue - 3 事件处理、表单输入绑定
1.JS循环的几种方式
1.v-for可以循环的变量
①数组
（1）循环数组
<div v-for="num in l">{{num}}</div>
（2）循环数组带索引
(num,index) in l
<h2>【数组】的循环:带索引</h2>
<div v-for="(num,index) in l">索引【{{index}}】---数组：{{num}}</div>
②对象
（1）循环对象
默认循环结果是值value
<div v-for="value in msg">对象循环的结果是value：{{value}}</div>
（2）循环对象带key值
<div v-for="(value,key) in msg">【key】：{{key}}，【value】：{{value}}</div>
③字符串
（1）循环字符串
字符串中的空格会被自动去掉
// s1: "这是一个 字符串！！",
<div v-for="item in s1">
<p v-if="item!=' '">{{item}}</p>
<br v-else>
</div>
（2）循环字符串带索引
<div v-for="(item,index) in s1">【索引】：{{index}} -- 【字符】：{{item}}</div>
④数字
（1）循环数字
<div v-for="num in 8">{{num}}</div>
（2）循环数字带索引
<div v-for="(num,index) in 8">【索引】：{{index}}--【数字】{{num}}</div>
2.JS的循环
JS的循环是基于索引的循环，而python没有基于索引的循环，python都是基于迭代的循环
①JS的循环
for (i = 0; i < 10; i++) {
console.log(i)
}
②基于索引的循环
var a = [1, 3, 6, 3, 4]
for (i = 0; i < a.length; i++) {
console.log(a[i])
}
③基于迭代的循环(js的in循环)
js的in循环与vue的v-for的in循环有区别，
-
js的in循环，中i是数组a的索引
-
v-for的in循环中，i是value
for(i in a ) {
console.log(a[i]) // i是索引
}
④基于迭代的循环(js的of循环)
js的of循环中，i为value值
for(i of a ) {
console.log(i) // i是值
}
⑤数组的循环 forEach
forEach是js中仅限于数组的方法，可以循环得到数据值
a.forEach(function (value){
console.log(value)
})
⑥jquery的循环 $.each
在JQuery中也有$.each来进行循环，可以获得数组a的索引和value
$.each(a,function (index,value){
console.log('索引值',index)
console.log(value)
})
python都是基于迭代的循环，没有基于索引的循环
2.key值的解释
当我们使用vue的v-for指令循环渲染标签时候，在每次循环中，item表示当前元素的值，index表示当前元素在数组中的索引。通过给每个循环项添加一个唯一的key属性(这个key值必须唯一)，Vue可以加速虚拟dom的替换，从而更有效地管理列表的更新和渲染
<h2>vue的v-for循环中添加key可以提高循环效率</h2>
<div v-for="(item,index) in a" :key="index">{{item}}</div>
当使用item作为key值时，渲染的效率低，并且渲染出的元素值可能会出错
3.数组和对象的检测与更新
在Vue中，修改了数组或则对象中的数据，但是页面没有及时更新，这通常是因为Vue无法检测到数据的变化。
Vue会在实例化组件时，对数据进行响应式处理，但是比如：设置一个数组的所以或者给对象新增属性等，Vue无法自动检测到数据的变化。
可以通过Vue提供的一些方法来更新数组和对象中的数据，让Vue能够检测到数据的变化，而更新界面
（1）数组
更新
// 通过 $set 方法修改数组中的某个元素
this.$set(this.items, index, newValue);
新增一个元素
// 通过 $set 方法向数组中添加一个新的元素
this.$set(this.items, this.items.length, newValue);
（2）对象
新增
给对象新增一个属性
// 通过 $set 方法新增一个属性
this.$set(this.obj, 'newProp', 123);
修改
// 直接修改对象中某个属性的值
this.obj.prop = 'new value';
4.input事件处理
| 事件 | 触发条件 |
|---|---|
| input | 当输入框进行输入的时候 |
| change | 当元素的值发生改变时 |
| blur | 当输入框失去焦点的时候 |
| focus | 当获得焦点 |
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- jquery 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<!-- Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- vue 文件 -->
<script src="./js/vue.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
</head>
<body>
<div id="app">
<div class="container">
<div class="text-center">
<h2>click点击事件</h2>
<input type="text" @click="clickEvent">
<h2>input输入事件</h2>
<input type="text" @input="inputEvent">
<h2>change改变事件</h2>
<input type="text" @change="changeEvent" value="aaa">
<h2>focus获得焦点</h2>
<input type="text" @focus="focusEvent">
<h2>blur失去焦点事件</h2>
<input type="text" @blur="blurEvent">
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
info: {name: 'duo', age: 111}
},
methods: {
clickEvent() {
console.log('click点击事件')
},
inputEvent() {
console.log('input输入事件')
},
changeEvent() {
console.log('change改变事件')
},
blurEvent() {
console.log('blur失去焦点事件')
},
focusEvent() {
console.log('focus获得焦点')
},
}
})
</script>
</html>
5.v-model双向数据绑定
Vue的 v-model 指令提供了双向绑定的功能，key在表单和组件中使用。对于原生表单元素，v-model 绑定的是 value 属性和 input 事件。
当使用属性绑定:value='变量'时，当input框发生变化，页面不会改变，使用v-model双向数据绑定时，页面会及时更新渲染
（1）单项数据绑定 :value=‘变量’
input框内的内容变化，页面不会及时更新
（2）双向数据绑定 v-model
input框内的内容变化，页面会更新
<body>
<div id="app">
<div class="container">
<div class="text-center">
<h2>value属性指令：无法及时更新</h2>
<input type="text" :value="name"> 【{{name}}】
<h2>v-model属性指令：更新</h2>
<input type="text" v-model="age"> 【{{age}}】
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name:'',
age:'',
info: {name: 'duo', age: 111}
},
})
</script>
6.过滤
（1）数组的过滤方法
数组的过滤方法filter()，返回一个包含了通过测试的新数组【只有数组有过滤方法】
var dataList = ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
var newDataList = dataList.filter(function (item) {
return true // return true表示这个值保留,false 表示这个值不要
})
console.log(newDataList)
（2）字符串的indexOf方法
判断子字符串是否在当前字符串中，如果在返回子字符在字符串中的索引，不在返回-1
var a = 'this is phone'
var a1 = 'is '
var a2 = 'a'
var i = a.indexOf(a1)
console.log(i)
var m = a.indexOf(a2)
console.log(m)
-----
结果 i ：2
结果 m ：2
（3）箭头函数(匿名函数)
箭头函数的特点：
-
箭头函数，无参数无返回值，不需要使用
function关键字，也可以省略return关键字。 -
js中函数中套函数，this的指向有问题，在箭头函数中，
this关键字指向的是定义函数时所在的作用域，而不是函数被调用时所在的作用域。这意味着箭头函数没有自己的this，可以更方便地访问父级作用域的this。
// 1.没有参数、无返回值
var f = () => {
console.log('没有参数和返回值')
}
// 2.有参数，没有返回值的箭头函数，括号可以去掉
var f1 = item => {
console.log('item', item)
}
// 3.多个参数，没有返回值的箭头函数，括号不能去掉
var f2 = (item, key) => {
console.log('item', item)
console.log('key', key)
}
// 4.有一个参数，一个返回值
var f3 = (item) => {
return item + 10
}
var f4 = item => item + 10
（4）过滤功能
<div id="app">
<div class="container">
<div class="text-center">
<h2>过滤演示</h2>
<label for="test">搜索内容:</label>
<input type="text" id="test" v-model="myText" @input="inputEvent">
<ul>
<li v-for="item in newDataList">{{item}}</li>
</ul>
</div>
</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:{
inputEvent(){
this.newDataList= this.dataList.filter(item=>item.indexOf(this.myText)>=0)
}
}
})
</scrip
7.事件修饰符
| 事件修饰符 | 释义 |
|---|---|
| .stop | 只处理自己的事件，子控件冒泡的事件不处理（阻止事件冒泡） |
| .self | 只处理自己的事件，子控件冒泡的事件不处理 |
| .prevent | 阻止a链接的跳转 |
| .once | 事件只会触发一次（适用于抽奖页面） |
<div id="app">
<div class="container">
<div >
<h3>事件修饰符stop，子控件不再冒泡给父控件</h3>
<ul @click="handleUl">
<li @click.stop="handleLi">111</li>
<li>222</li>
</ul>
<h3>事件修饰符self:只处理自己的事件，子控件的冒泡不处理</h3>
<ul @click.self="handleUl">
<li @click="handleLi">111</li>
<li>222</li>
</ul>
<h3>prevent阻止a的跳转</h3>
<a href="http://www.baidu.com" @click.prevent="handlePrevent">百度一下</a>
<h3>once只响应一次</h3>
<button @click.once="handleOnce">只能响应一次</button>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
handleLi() {
console.log('li被点击了')
},
handleUl() {
console.log('ul被点击了')
},
handlePrevent() {
console.log('a标签被点击了')
},
handleOnce() {
console.log('once被点击了')
},
}
})
</script>
8.按键修饰符
（1）按键事件
在Vue中，可以使用v-on指令来绑定各种事件，包括按键事件。按键事件是指在按下或释放键盘按键时触发的事件。Vue支持以下几个按键事件：
- keydown：按下键盘上的任何键时触发。
- keyup：释放键盘上的任何键时触发。
- keypress：按下字符键时触发（即非功能键）。
（2）按键修饰符
在Vue中，按键修饰符是用来捕获键盘事件并在特定按键按下时触发相应的方法的。按键修饰符是通过在v-on指令后面使用"."后跟按键名称来指定的。
如果要在按下enter键时触发一个方法，可以使用以下代码
<input v-on:keyup.enter="submit">
下面是Vue支持的其他按键修饰符：
- .enter
- .tab
- .delete (捕获“删除”和“退格”键)
- .esc
- .space
- .up
- .down
- .left
- .right
如果需要在多个按键按下时触发方法，可以使用按键修饰符的组合方式。例如：
<input v-on:keyup.ctrl.alt.67="copy">
案例
<div id="app">
<div class="container">
<div >
<h3>按键修饰符</h3>
<input type="text" v-model="myText" @keyup="handleKeyUp"> {{myText}}
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
myText:'',
},
methods: {
handleKeyUp(event) {
console.log('按键释放')
console.log('key',event.key)
console.log('keyCode',event.keyCode)
},
}
})
</script>
9.表单控制
在表单中，input框中的变量类型可以是【text】文本类型，【radio】单选，【checkbox】单选或多选
通过v-model的数据双向绑定，当表单元素的值发生变化时，组件实例中相应的数据也会更新
- radio单选时，多个radio绑定同一个变量，在数据对象中对应的是空字符串，选中某个则可拿到对应的数据对象的value值
- checkbox单选时，单个复选框，绑定到布尔值
- checkbox多选时，多个复选框，绑定到同一个数组：
<div id="app">
<div class="container">
<div>
<h3>表单</h3>
<p>用户名<input type="text" v-model="username"></p>
<p>性别
男:<input type="radio" v-model="gender" value="男">
女:<input type="radio" v-model="gender" value="女">
</p>
<p>在线：
<input type="checkbox" v-model="online" value="在线">
</p>
<p>设备
电脑<input type="checkbox" v-model="equipment" value="电脑">
手机<input type="checkbox" v-model="equipment" value="手机">
手表<input type="checkbox" v-model="equipment" value="手表">
</p>
<button @click="handleClick">打印信息</button>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
username: '',
gender:'',
equipment:[],
online:false
},
methods: {
handleClick() {
console.log(this.username,
this.gender,this.online,this.equipment
)
},
}
})
</script>
