事件处理
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>
2296
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
