本文介绍了Vue中常用的指令如v-on用于事件绑定，v-model实现数据双向绑定，以及事件修饰符和表单修饰符的应用。通过一个信息登记表的小案例，详细解析了Vue在实际开发中的应用。
一、常用的指令
| v-html 、v-text | 用来进行数据绑定 |
|---|---|
| v-bind | 实现属性绑定 |
| ：class | 动态样式绑定(4种方式) |
| style | 动态绑定style的值是一个对象 |
| v-if | 节点的插入和删除 |
| v-show | 元素的显示和隐藏 |
| v-for | 用于对数组或对象进行遍历显示 |
| v-on | 绑定事件 |
| v-model | 表单元素数据绑定 |
1、v-on：绑定事件
- 使用
<标签 v-on:click="函数()"></标签>
简写
<标签 @click="函数()"></标签>
- 事件传参
<标签 v-on:click="函数(实参)"></标签>
new Vue({
el:"#app",
data:{},
methods:{
事件函数(形参){
}
}
})
2、this的使用
-
this指向的是vue实例
-
事件对象
<标签 @事件名="事件函数"></标签> //不需要传入实参
new Vue({
el:"#app",
data:{},
methods:{
事件函数(形参){ //没有传入实参，那么这个形参就是事件对象
}
}
})
- 传实参还要有事件对象
<标签 @事件名="事件函数(实参,$event)"></标签> //形参和实参位置要一一对应
new Vue({
el:"#app",
data:{},
methods:{
事件函数(形参,事件对象形参){
}
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./js/vue.js"></script>
<style>
.box{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div id="app">
<button v-on:click="fn()">点我</button>
<button v-on:click="fn">点我</button>
<button @click="fn()">点我</button>
<ul>
<li v-for="(item,index) in arr" :key="index">
{{item}} <button @click="del(index)"> 删除</button>
</li>
</ul>
<div class="box" @mousemove="move"></div>
<a href="http://www.baidu.com" @click="run('成都',$event)">百度</a>
</div>
</body>
<script>
var app=new Vue({
el:"#app",
data:{
msg:"it",
arr:["香蕉","葡萄","苹果"]
},
methods:{
fn(){
alert("好好")
},
del(ind){ //删除
// alert(ind)
// this指向的是vue实例
console.log(this.msg)
},
move(event){ //移动事件
// 如果函数没有传入实参，methods里面的事件函数定义的形参就是事件对象
console.log(event.offsetX)
},
run(city,event){ //阻止默认行为
event.preventDefault();
alert(1111,city)
}
}
})
var box=document.querySelector(".box");
box.onmousemove=function(event){
console.log(event.offsetX)
}
var a=document.querySelector("a")
a.onclick=function(event){
// 阻止元素的默认行为
event.preventDefault()
alert(1111);
}
</script>
</html>
3、v-model
- 作用：表单元素数据绑定
架构思想:MVVM
数据双向绑定：数据层改变，视图层跟着改变； 视图层改变，数据层跟着改变；
二、修饰符
- 什么是修饰符: 修饰我们事件和v-model的符号，简化我们的一些操作
<标签 @事件名.修饰符="事件函数"></标签名>
<input v-model.修饰符="变量"/>
1、事件修饰符
| 事件修饰符 | 含义 |
|---|---|
| .stop | 阻止事件冒泡 |
| .prevent | 阻止默认行为 |
| .self | 只当在 event.target 是当前元素自身时触发处理函数 |
| .once | 一次性事件绑定 |
2、键盘修饰符 （键盘事件）
- .enter .up .down .left .right
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./js/vue.js"></script>
<style>
.box{
width: 300px;
height: 300px;
background-color: pink;
}
.small{
width: 150px;
height: 150px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<input type="text" @keydown.enter="down"/>
<!-- 阻止默认行为 -->
<a href="http://www.baidu.com" @click.prevent="fn">百度</a>
<!-- 一次性绑定 -->
<button @click.once="pay">确认支付</button>
<div class="box" @click="fn1">
<!-- 阻止冒泡 -->
<div class="small" @click.stop="fn2"></div>
</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<div class="box" @click.self="fn1">
<!-- 阻止冒泡 -->
<div class="small" @click="fn2"></div>
</div>
<div class="box" @click="fn1">
<!-- 修饰符可以串联 -->
<a href="http://www.baidu.com" @click.stop.prevent="fn">百度</a>
</div>
</div>
</body>
<script>
var app=new Vue({
el:"#app",
data:{
},
methods:{
fn(){
alert(1111);
},
pay(){
alert("支付完成")
},
fn1(){
alert("大盒子box")
},
fn2(){
alert("小盒子small")
},
down(){
console.log("enter");
}
}
})
</script>
</html>
3、表单修饰符
| 表单修饰符 | 含义 |
|---|---|
| .lazy | 不会实时数据绑定，在changge事件中进行数据绑定 |
| .number | 将输入的内容数据类型转换为数值 |
| .trim | 过滤首尾空白字符 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model.lazy="username" />
{{username}}
年龄:<input type="text" v-model.number="age"/>
<input type="text" v-model.trim="str"/>
</div>
</body>
<script>
var app=new Vue({
el:"#app",
data:{
username:"",
age:0,
str:""
}
})
</script>
</html>
三、信息登记表Vue小案例
1、信息登记表思路
2、实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>信息表</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css">
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<div class="container">
<h3 class="text-center text-primary">信息登记表</h3>
<label for="username">姓名:</label>
<input type="text" id="username" v-model='name' class="form-control" placeholder="请输入姓名">
<label for="tel">账号:</label>
<input type="text" id="tel" v-model='tel' class="form-control" placeholder="请输入账号">
<label for="info">信息:</label>
<input type="text" id="info" v-model='info' class="form-control" placeholder="请输入信息">
<div class="text-center">
<button type="button" class="btn btn-primary" @click='add'>添加</button>
<button type="button" class="btn btn-info" @click='reset'>重置</button>
</div>
<h3 class="text-center text-primary">信息表</h3>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>账号</th>
<th>信息</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for='(item,i) in dataList'>
<td>{{i>8 ? i+1 :"0"+(i+1)}}</td>
<td>{{item.name}}</td>
<td>{{item.tel}}</td>
<td>{{item.info}}</td>
<td>
<button @click='del(i)' type="button" class="btn btn-danger">删除</button>
</td>
</tr>
<tr v-if='dataList.length==0'>
<td colspan="5">暂无数据</td>
</tr>
<tr v-if='dataList.length>0'>
<td colspan="5">
<button @click='delAll' type="button" class="btn btn-danger">全部删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
new Vue({//属性和方法
el: '#app',
data: {//属性
name: '',
tel: '',
info: '',
dataList: []
},
methods: {
//添加信息事件
add() {
this.dataList.push({
name: this.name,
tel: this.tel,
info: this.info
})
//输入结束之后 调用重置方法
this.reset()
console.log(this.dataList)
},
//重置事件
reset() {
this.name = ''
this.tel = ''
this.info = ''
},
//单条删除事件
del(n) {
this.dataList.splice(n, 1)
},
//全部条数删除事件
delAll() {
this.dataList=[]
}
}
})
</script>
</body>
</html>
扫一扫
325
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
