事件处理
v-on: 事件绑定 @
<div id="app">
<!--<button v-on:click="f">登录</button>-->
<button @click="f1">登录1</button> <br>
<button @click="f2()">登录2</button><br>
<hr>
<button @click="f3">登录3</button> <br>
<button @click="f4()">登录4</button><br>
<hr>
<button @click="f5">登录5</button> <br>
<button @click="f6(1,2)">登录6</button><br>
<hr>
<button @click="f7(6,8,$event)" id="btn">登录7</button><br>
<hr>
<div class="plane">
<h3>标题<span @click="isShow = !isShow">{{isShow ? "收起" : "展开"}}</span></h3>
<div v-show="isShow" style="width: 200px; height: 200px;background: red">这是一个盒子</div>
</div>
<a href="" @click.prevent="f8">百度一下~</a>
</div>
<script>
/*document.getElementById("btn").onclick = function(){ 无效了
console.log("哈哈哈")
}*/
let vm = new Vue({
el:"#app",
data:{
isShow:true
},
methods:{
f1(){ console.log("f1点击了...") },
f2(){ console.log("f2点击了...") },
f3(e){ console.log("f3点击了...:",e) },
f4(e){ console.log("f4点击了...:",e) },
// f5调用时,没有加(),函数定义处的第1个参数代表事件对象
f5(a,b){ console.log("f5点击了...:",a,b) },
f6(a,b){ console.log("f6点击了...:",a,b) },
f7(a,b,e){ console.log("f7点击了...:",a,b,e) },
f8(){ console.log("a标签的点击事件") }
}
})
</script>
通过v-on指令实现事件绑定,简写
<button v-on:click="f">登录</button>
<button @click="f">登录</button>
vue中的其他简写
- v-text --> {{ }}
- v-bid --> :
对于绑定事件的监听器可以加(),也可以不加():
<button @click="f1">登录1</button> <br>
<button @click="f2()">登录2</button>
如何得到事件对象:
<button @click="f3">登录3</button> <br>
//f3不加() 方法中第1个参数就代表事件对象
<button @click="f4()">登录4</button><br>
// 绑定时如果加了() 方法定义处第1个参数就不代表事件对象
参数传递
<button @click="f5">登录5</button> <br> 不加() 不能传递数据
<button @click="f6(1,2)">登录6</button><br> 加(),可以传递数据
需要事件对象,还需要传递参数
<button @click="f7(6,8,$event)">登录7</button><br>
f7(a,b,e){ console.log("f7点击了...:",a,b,e) }
监听器
- 如果监听器比较简单,写在行内
- 如果监听器复杂,直接封装一个函数,写在methods中的
- 如果写了vue事件,那前面的dom0,dom2 事件就会失效
事件类型
- 鼠标事件,click,dblclick,mouseover,mouseout,mouseenter,mouseleave,mousedown,mousemove,mouseup
- 键盘事件,keydown,keypress,keyup,
- ui事件,scroll,resize,load,unload
- 焦点事件,focus,blur
- 表单事件,change,submit
事件处理函数的两种基本用法
- 如果代码比较简单,直接把监听器写在行内
- 如果代码比较复杂:在methods中新加一个方法,然后在v-on中调用
事件对象
- 获取鼠标的位置 e.pageX, e.clientX
- 获取是哪个键被按下 e.keyCode
vue中使用事件修饰符阻止默认事件:
<a href="" @click.prevent="f8">百度一下~</a>
事件修饰符
让 a 不要跳转代码:
- e.preventDefautl()
- @click.prevent = "函数"
如你不需要回调函数,则可以更简洁的写成
常用的事件修饰符如下:
- stop:阻止冒泡
- prevent:阻止默认事件
- capture:冒泡改为捕获
- self:只处理发生在自己身上的事件,不理会冒泡或者捕获
- once:只执行一次
表单处理
只有表单元素,才会使用双向数据绑定 v-model 表单元素。
<div id="app">
<form action=""> //文本框 input : text
<p><label for="">姓名:</label><input type="text" v-model="info.name"></p>
<p>
性别: //单选框,name要相同,v-model要相同
<input type="radio" name="sex" v-model="info.sex" value="男"> 男
<input type="radio" name="sex" v-model="info.sex" value="女"> 女
</p> //单个复选框
<p><input type="checkbox" v-model="info.isAgree">同意</p>
<p>
爱好: //多个复选框
<input type="checkbox" value="book" v-model="info.favoriate"> 看书
<input type="checkbox" value="sleep" v-model="info.favoriate"> 睡觉
<input type="checkbox" value="coding" v-model="info.favoriate"> 打代码
</p>
<p>
学历:
<select name="" id="" v-model="info.edu">
<option value="yjz">研究生</option>
<option value="bk">本科</option>
<option value="zk">专科</option>
<option value="gz">高中</option>
</select>
</p>
<hr>
<p>收集的数据是:</p>
{{info}}
</form>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
info:{
name:"wangcai",
sex:"男", //设置的初值,要与value值相对应
isAgree:false,
favoriate:['book'],
edu:"bk"
}
}
})
</script>
单选框
- 多个input:radio 的name要相同。这样才是单选
- 多个input:radio 的v-model要相同.
- 你设置的初值,必须要与input:radio中的value值相对应。
- 在页面显示出来的内容 ,并不会影响数据的绑定效果。
复选框
-
只有一个复选框。用来表示 “同意”与否。表示单选,通常使用布尔值来表示。 <input type=“checkbox”
v-model=”agree” -
多个复选框。表示在多个选择项中选择某一个,或者是几个。表示多选,通常使用数组来表示
value值必须要设置,这个值才是你选中某个复选框之后获取到的值。 它绑定到的数据项,必须是一个数组:因为是多选,需要数组保存值。 如果设置初值,则在数据项中直接给出即可
下拉列表
Select
Option
v-model的修饰符
- lazy:在文本框失去焦点后去更新数据。
正常情况下,数据的双向绑定后,你通过文本去输入信息,这个变化的信息会时时地反馈到数据中去。如果加了lazy后,则是在文本框失去焦点后,再去更新数据。 - number:从字符串中获取数字
在输入框中获取数值 - trim:删除文本框中的前后的空格
格式:v-model.修饰符=””
图书管理
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
margin: auto;
width: 530px;
text-align: center;
}
.box table{
border-top: 1px solid skyblue;
width: 100%;
border-collapse: collapse;
}
.box th, td{
padding: 10px;
border: 1px solid skyblue;
height: 20px;
line-height: 20px;
}
.box th{
background-color: gold;
}
.box .book{
padding-bottom: 10px;
padding-top: 10px;
background-color: papayawhip;
}
</style>
</head>
<body>
<div id="app">
<div class="box">
<div>
<h1>小小图书管理</h1>
<div class="book">
<div>
<label for="id">编号:</label>
<input type="text" id="id" v-model="id">
<label for="name">名称:</label>
<input type="text" id="name" v-model="name">
<button @click="addAndEdit">提交</button>
</div>
</div>
</div>
<br>
<table>
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in books">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.data}}</td>
<td>
<a href="" @click.prevent="toEdit(item.id)">编辑</a>
<span>|</span>
<a href="" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
flag:false,
id:"",
name:"",
books:[
{ id:1,name:"AAA",date:"" },
{ id:2,name:"BBB",date:"" },
{ id:3,name:"CCC",date:"" },
{ id:4,name:"DDD",date:"" },
]
},
methods:{
addAndEdit(){
//添加还是删除
if(this.flag){
this.books.some(item=>{
if(item.id === this.id){
item.name = this.name;
return true;
}
})
this.flag = false;
}else{
let book = {};
book.id = this.id;
book.name = this.name;
book.date = "";
this.books.push(book)
} //清空输入框内容
this.id = "";
this.name = "";
},
toEdit(id){
this.flag = true;
let book = this.books.filter(function (item) {
return item.id == id;
})
//数据回显
this.id = book[0].id;
this.name = book[0].name;
},
del(id){ // findIndex 返回满足条件的第一个索引
var index = this.books.findIndex(item=>{
return item.id == id;
})
this.books.splice(index,1)
} //splice 删除数组说的元素,index是开始索引,1是删除的个数
}
})
</script>
</body>