Vue（二）Vue中输入框的相关事件整理
Vue中的输入框相关事件、事件参数、双向数据绑定（重点）——输入、单选、多选框等、动态样式相关
一、输入框相关事件
- focus：获得焦点 @focus
输入框聚集焦点时触发
就是当焦点转移到input 框上边的时候触发；- blur：失去焦点 @blur
输入框失去焦点时触发
输入框在输入完成、移到其他地方时进行验证时，需要用到该事件，用此事件进行绑定验证方法即可。- change：变更 @change
输入框里面内容发生改变且失去焦点时触发
- input：实时变化 @input
输入框里面内容发生改变（且不用失去焦点）时触发
跟随输入框输入内容实时变更数据
适用于实时查询，每输入一个字符都会触发该事件- keyup：按键抬起 @keyup
事件是在pc上需要点击回车键触发，而在手机上则是需要点击输入键盘上的确定键才可触发。
二、事件参数
2.1 上述这些与输入框相关的事件，都带有事件参数 event（简写成 e）
2.2 在使用输入框事件触发函数时要注意：（了解即可）
方法如果不写 () ,则默认参数是事件参数 ，
如果写了 ()，则默认的事件参数消失
关键词：Vue中提供了 $event 关键词，代表了事件参数
2.3 事件修饰符
在Vue中，作者很贴心地提供了事件修饰符，例如 @事件名.修饰符
eg：@keyup.13 或者 @keyup.enter（效果就是 过滤出keyCode==13的 回车按钮）
三、双向数据绑定（重点）
3.1 什么是双向数据绑定
双向数据绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。这也算是vue的精髓之处了。
双向数据绑定适合所有与用户交互的表单元素。
注意前提：双向数据绑定是 输入框 这种表单元素，才具有的特定属性。
如果希望在表单元素中自动获得页面中用户主动做的修改时，都要用双向绑定v-model。
<表单元素 v-model="变量">方向一：数据绑定到元素的属性上
方向二：DOM元素的属性变更时，更新绑定的数据
3.2 双向数据绑定的原理（面试高频）
双向数据绑定的目的是为了当输入框的值发生变化时，页面中数据的值随之而发生变化。而输入框中，值得变化是通过 input 事件来监听的；输入框的值是存储在事件参数 e.target.value中的。那么要实现双向数据绑定，就很简单了：
<body>
<div id="app">
<input type="text" :value='kw' @input='doInput'>
<div>kw:{{kw}}</div>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
kw: '喜羊羊'
}
},
methods: {
// 实时监听输入框的变化
doInput(e) {
console.log(e);
// 输入框的值存储在e.target.value中
console.log(e.target.value);
this.kw = e.target.value
}
},
})
</script>
</body>3.3 双向数据绑定的实现
由于双向数据绑定在开发过程中，十分常用，但是代码又非常复杂。
所以作者提供了 v-model 指令，可以快速实现双向数据绑定的效果。
<input type="text" v-model='kw'>v-model的值是 页面元素的属性名（通过这一行代码就能实现复杂的双向数据绑定，可见作者也是非常贴心了）
在Vue中，统一了表单元素所有的属性，都能够通过 v-model 对表单元素的属性进行设置。
3.4 勾选框的双向数据绑定
通过一个工作中常见的案例来说明在勾选框中是如何使用v-model进行双向数据绑定的
<body>
<div id="app">
<label for="">
<b>{{agree?'同意':'不同意'}}</b>
<input type="checkbox" v-model='agree'>
<span>我已阅读并同意用户注册协议</span>
</label>
<br>
<!-- 同意为true->按钮可用->不可用就是false -->
<button :disabled='!agree'>提交注册</button>
</div>
<script>
new Vue({
el: '#app',
data: {
agree: true
}
})
</script>
</body>3.5 多选框的双向数据绑定
多选框在使用时要注意两点：
1）因为是多选框，所以，数据的类型得是 数组，并且vue会自动检测数据类型
2）使用多选框必须加 value属性 它的值是后面的内容
<body>
<div id="app">
<div>草原上都有哪些羊 {{yang}}</div>
<label for="">
<!-- vue会自动检测数据类型，yang 是数组，就自动多选 -->
<input type="checkbox" value="喜羊羊" v-model='yang'>
<span>喜羊羊</span>
</label>
<label for="">
<input type="checkbox" value="美羊羊" v-model='yang'>
<span>美羊羊</span>
</label>
<label for="">
<input type="checkbox" value="懒羊羊" v-model='yang'>
<span>懒羊羊</span>
</label>
<label for="">
<input type="checkbox" value="沸羊羊" v-model='yang'>
<span>沸羊羊</span>
</label>
</div>
<script>
new Vue({
el: '#app',
data: {
yang: []
}
})
</script>
</body>3.6 下拉选框的双向数据绑定
下拉选框在双向数据绑定时注意事项：
1）v-model 要绑定到 select 标签上
2）同样要写value属性，value的值就是标签内容
<body>
<div id="app">
<div>灰太狼的座驾是{{car}}</div>
<select v-model='car'>
<option value="奔驰">奔驰</option>
<option value="宝马">宝马</option>
<option value="兰博基尼">兰博基尼</option>
<option value="QQ">QQ</option>
<option value="奥迪">奥迪</option>
</select>
</div>
<script>
new Vue({
el: "#app",
data: {
car: '奥迪'
}
})
</script>
</body>3.7 单选框的双向数据绑定
<body>
<div id="app">
<div>喜羊羊的性别是：{{gender}}</div>
<label for="">
<input type="radio" name="sex" value="男" v-model='gender'><span>女</span>
</label>
<label for="">
<input type="radio" name="sex" value="女" v-model='gender'><span>男</span>
</label>
</div>
<script>
new Vue({
el: "#app",
data: {
gender: 0
}
})
</script>
</body>总结：
双向数据绑定适合于表单元素，通过操作这些表单元素，他的值也会同步更新，使用的是 v-model
四、动态样式相关
vue实现了数据的响应式，那么在vue中，元素的css样式又是怎样实现这种响应式的呢？下面介绍几种操作css属性的方法。
4.1 内联样式
内联样式就是给元素添加动态style属性，通过事件函数的触发，改变style属性的值，从而动态实现css样式的变化
在使用内联样式时要注意：
1）添加动态style的方式是：给元素添加 :style='{属性名:值}'
注意： “ : ” 千万不能忘记； 引号里面是一个对象
2）在css中使用中划线 “-” 的属性名，要改成小驼峰或者用字符串包裹
3） 如果有固定不变的css属性，就写在不带:的style里；而变化的css属性写在带:的style里。运行时，两个style是合并发挥作用的。不会发生覆盖。
<body>
<div id="app">
<button @click='width+=20'>变大</button>
<button @click='borderRadius+=10'>变圆</button>
<button @click='width-=20'>变小</button>
<div id="box" :style='{width:width+"px",borderRadius:borderRadius+"px"}'></div>
</div>
<script>
new Vue({
el: '#app',
//凡是页面上要变动的，都存储在 data 中
data: {
width: 100,
borderRadius: 0
}
})
</script>
</body>4.2 class语法（这个比较常用）
在使用 class语法 时要注意：
1）class语法顾名思义，就是通过动态改变元素的属性名，从而给元素添加不同的样式。
2）动态class语法： :class="{类名: true/false}"
值为 true，就是 生效，值是 false，就是 无效。
3）如果有固定不变的class，应该放在不带:的class中，而变化的class则放在带:的class中，最终编译时，不带:的class会和带:的class合并为一个class共同起作用。
<body>
<div id="app">
<label for="">
<input type="checkbox" v-model='agree'>
<span>我已阅读并同意用户注册协议</span>
</label>
<br>
<div class="btn" :class="{enable:agree,disable:!agree}">提交注册</div>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
agree: true
}
})
</script>
</body>
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献3条内容
所有评论(0)