事件处理
v-on： 事件绑定 @
<div id="app">
<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>
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(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:"男",
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){
var index = this.books.findIndex(item=>{
return item.id == id;
})
this.books.splice(index,1)
}
}
})
</script>
</body>
