vue中的事件,表单输入绑定,计算属性computed及监听属性watch
程序员文章站
2024-01-02 21:12:40
...
事件:
1.事件三要素:
事件目标
事件对象
事件处理程序
2.事件流
默认情况,先进行事件捕获(从外向内),再进行事件冒泡(从内向外)
3.事件绑定
app实例对象能够获取/操作data/methods中的变量
1.直接操作变量
v-on:click='num++' //num是data中的变量
2.调用函数
v-on:click='handler' //在handler声明时,可以写入形参event,即事件对象,
3.传递参数
常量: v-on:click='handler(1)'
变量:v-on:click='handler(a)'
事件对象:v-on:click='handler($event)' //$event:vue的内部属性
4.事件修饰符:
注:修饰符可以连用
.stop:停止事件冒泡
v-on:click.stop='handler'
.prevent:组织事件默认行为
实例: <form action="1.html" v-on:submit.prevent>
<h1>签到</h1>
<input type="number">
<button>submit</button>
</form>
.capture:在事件捕获阶段执行事件处理函数
.self:只当在event.target是当前元素时触发处理函数
.once:事件处理函数执行一次后解绑
.passive:滚动事件的默认行为(即滚动行为)将会立即触发,一般与scroll连用,能够提升移动端的性能
5.按键修饰符:
一般与keyup事件类型配合使用
.enter .right .delete....
6.鼠标修饰符:
.left .right .middle
7.表单输入绑定
v-model: 绑定给了input的value值
双向数据绑定
1.单行输入框: <input type="text" v-model='value'> value在data中声明
2.多行文本框:<textarea cols="30" rows="10" v-model='value'></textarea>
实例:
<b>{{checks}}</b>
<table>
<tr v-for='item in users'>
<td>
<input type="checkbox" :value='item.id' v-model='checks'>
</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.gender}}</td>
</tr>
</table>
修饰符:增加表单绑定能力
.lazy:不时时同步,在change时更新
.number:想要自动将用户输入值转换为数值类型,可给v-model添加number修饰符
.trim:自动过滤首位空字符
实例:
|<b>{{value}}</b>|
<input type="text" v-model.trim='value'>
8.计算属性:
computed:{
//多个计算属性
reverStr(){
return this.str.split('').reverse().join('')
}
}
与data同级别
希望一个变量经过某种计算然后输出,而不是直接输出
反转输出:<b>{{str.split('').reverse().join('')}}</b>
computed:
实例1:
html代码:
<input type="text" v-model='str'>
原值输出:<b>{{str}}</b><br>
反转输出:<b>{{str.split('').reverse().join('')}}</b><br>
反转输出2:<b>{{reverseStr}}</b>
js代码: computed:{
//存放计算属性
reverseStr(){
return this.str.split('').reverse().join('')
}
}
实例2:
html代码:
<table>
<tr v-for='item in newUsers'>
<b>{{checks}}</b>
<td>
<input type="checkbox" :value='item.id' v-model='checks'>
</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.gender}}</td>
<td>{{item.date}}</td>
</tr>
</table>
<button>批量删除</button>
js代码:
computed:{
//存放计算属性
newUsers(){
this.users.forEach(function(item){
item.date=new Date(item.date).toLocaleDateString();
})
return this.users;
}
}
7.监听属性:
与data同级别
当需要在数据变化时执行异步函数或开销较大的操作时,使用监听器是最有用的
watch:
1.默认只能监听栈区中的变量(基本数据类型)
实例:
js代码:
watch:{
//默认只能监听栈区中的变量
substr(newstr,oldstr){
alert(newstr,oldstr);
}
}
html代码:
{{substr.name}}
<input type="text" v-model='substr.name'>
2.当deep为true时表示深度监听
实例:
js代码:
watch:{
substr:{
//handler必须为handler
handler(newstr,oldstr){
alert(newstr,oldstr);
},
deep:true
}
}
html代码:
{{substr.name}}
<input type="text" v-model='substr.name'>