Vue样式绑定、事件绑定
1.样式绑定
1.1class类标签绑定
<p :class="对象"><p :class="数组">
<p :class="{类名:true/false, 类名:true/false}">
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue class标签绑定操作</title>
<style>
.item {
width: 600px;
padding: 10px;
border: 1px solid #ccc;
}
.current {
border-color:red;
}
.active {
border-color:green;
}
</style>
</head>
<body>
<div id="app">
<h1>样式操作</h1>
<hr>
<!--calss第一种绑定 :class='对象' -->
<p class="item" :class="cname"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente alias autem a velit neque dolore blanditiis cumque enim provident, expedita, non debitis, fugiat atque at doloribus distinctio vero repellendus maxime.</p>
<!--就类似于 ：class="{current:cname}" 里面都是对象-->
<!-- <p class="item" :class="{current:cname}"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente alias autem a velit neque dolore blanditiis cumque enim provident, expedita, non debitis, fugiat atque at doloribus distinctio vero repellendus maxime.</p> -->
<!--calss第二种绑定:class="{类名:true/false, 类名:true/false}">-->
<p class="item" :class="{current:isCurrent, active:true, link:true, 'li-item':true}"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente alias autem a velit neque dolore blanditiis cumque enim provident, expedita, non debitis, fugiat atque at doloribus distinctio vero repellendus maxime.</p>
<!--可以统一将对象用一个属性，直接调用属性去完成对样式的修改-->
<p :class="classObj">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor provident officia facilis ipsam nisi doloribus earum ratione dolorem, minus, suscipit, magnam beatae. Magni dolor similique, a molestias neque officiis animi?</p>
<!--class第三种绑定 :class="数组"-->
<p :class="classList">Lorem ipsum dolor sit amet.</p>
</div>
<script src="../dist/js/vue.js"></script>
<script>
new Vue({
el:'#app',
data: {
cname:'curret', //<p class="item" :class="cname">
// cname:true, //<p class="item" :class="{current:cname}">
isCurrent: false,
classObj: {item:true, link:true,active:true},
classList: ['link', 'item'] //数组
}
});
</script>
</body>
</html>
1.2 style样式绑定
<p :style="{color:'值', background:'值'}"><p :style="[{}, {}, {}]">
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Style样式绑定</title>
<style>
p {
border:1px solid #ccc;
width: 700px;
padding:20px;
}
</style>
</head>
<body>
<div id="app">
<h1>Style绑定</h1>
<p :style="styleValue">Lorem ipsum dolor sit amet.</p>
<!--<p :style="{color:'值', background:'值'}">-->
<p :style="{color:'purple', background:'pink'}">Lorem ipsum dolor sit amet.</p>
<p :style="styleObj">Lorem ipsum dolor sit amet.</p>
<!--<p :style="[{对象1}, {对象2}, {}]">-->
<p :style="[styleObj, {borderWidth:'2px'}]">Lorem ipsum dolor sit amet.</p>
</div>
<script src="../dist/js/vue.js"></script>
<script>
new Vue({
el:'#app',
data: {
styleValue: 'color:red;background:green',
styleObj: {color:'pink',background:'#ccc', transform:'translate(0, 0)'}
}
});
</script>
</body>
</html>
2 事件
2.1 事件绑定
<p @事件名="方法"> 简写的方式<p v-on:事件名="方法">
方法加 () 的问题
<p @事件名="方法(1,1,2,3,$event)">
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 事件</title>
<link rel="stylesheet" href="../dist/css/bootstrap.css">
</head>
<body>
<div id="app" class="container">
<div class="page-header">
<h1>Vue 事件</h1>
</div>
<div class="row">
<div class="col-md-12">
<button @click="counter ++" class="btn btn-default"> +1 </button>
<button @click="addCounter(1)" class="btn btn-default"> +1 </button>
<button @click="addCounter(10)" class="btn btn-default"> +10 </button>
<hr>
<p class="info">
{{counter}}
</p>
<hr>
<div class="alert alert-info" @mousemove="onMoveFn">
Lorem ipsum dolor sit amet.
</div>
<!--绑定对象同时后面还可以加参数-->
<div class="alert alert-danger" @mousemove="onMoveFn($event, 100)">
验证鼠标绑定事件.
</div>
</div>
</div>
</div>
<script src="../dist/js/vue.js"></script>
<script>
new Vue({
el:'#app',
data: {
counter:0
},
methods: {
addCounter(num=1) {
this.counter += num;
},
onMoveFn(ev, num) {
console.log(ev.target) //获取鼠标移动到哪个事件<div class="alert alert-info">...</div>
console.log(ev) //MouseEvent{}
console.log(num) //100
//ev 是获取的event 对象
console.log(ev.pageX, ev.pageY) //获取点击事件的位置坐标
},
}
})
</script>
</body>
</html>
2.2 事件修饰符
.stop 阻止事件冒泡.prevent 阻止默认动作
.capture 捕获阶段触发事件
.once 只绑定一次
.self 只有本身才触发
.passive 优化移动端的scroll事件
<p @click.stop="">
<p @click.stop.prevent="">
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 事件</title>
<link rel="stylesheet" href="../dist/css/bootstrap.css">
<style>
.box {
width:200px;
height:200px;
border:1px solid red;
}
.inner {
width:100px;
height:100px;
margin:50px;
background: pink
}
</style>
</head>
<body>
<div id="app" class="container">
<div class="page-header">
<h1>Vue 事件修饰符 键盘修饰符</h1>
</div>
<div class="row">
<div class="col-md-12">
<div class="box" @click.self="boxFn"> <!--@click.self 意思是只有点自己才执行-->
<!--捕获：有外向内-->
<!--冒泡：由内向外-->
<div class="inner" @click.stop="innerFn"></div> <!--有效的阻止了事件冒泡,指定了点击内部时只有内部的触发冒泡，父类的不触发-->
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-6">
<input type="text" class="form-control" @keyup.65="onkeyupFn"> <!--捕获点击A键-->
<input type="text" class="form-control" @keyup.enter="onkeyupFn"> <!--捕获点击enter键-->
<input type="text" class="form-control" @keyup.ctrl.65="onkeyupFn"> <!--捕获点击Ctrl+A键-->
</div>
</div>
</div>
<script src="../dist/js/vue.js"></script>
<script>
new Vue({
el:'#app',
methods: {
boxFn(){
console.log('box');
},
innerFn(){
console.log('inner');
//event.stopPropagation();
},
onkeyupFn(event) {
console.log('按了 '+event.keyCode+' 按键')
}
}
})
</script>
</body>
</html>
2.3 键盘修饰符
.enter.space
.tab
.up
.left
.right
.down
.delete
.数字 (ascii )
2.4 系统按键修饰符
.ctrl.alt
.shift
.meta
<input @keyup.ctrl.enter> 按住ctrl再按回车
3 表单
文本input:text textarea v-model
checkbox 单个（绑定到布尔值）
true-value false-value true/false
checkbox 多个复选框（绑定到同一个数组中）
单选按钮（绑定value对象的字符串）
input:redio v-model value值
select选择框 option的value值 多选 multiple, 数组
v-model.trimv-model.number 把值转为 number 类型
v-model.lazy
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>表单数据绑定</title>
<style>
p {
border: 1px solid #ccc;
width: 600px;
padding: 20px;
}
</style>
</head>
<body>
<div id="app">
<h1>表单数据绑定</h1>
<hr>
<input type="text" v-model="message">
<br>
<textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>
<br>
<h3>单个复选框(绑定到布尔值checkVa101 即下面checkKVal01:true)</h3>
<!--type:checkbox v-model:指定一个-->
<input type="checkbox" v-model="checkVal01" true-value="yes" false-value="no">全选
<br>
<h3>多个复选框(绑定到同一数组loveList 即下面loveList:['lanball'])</h3>
<input type="checkbox" value="lanball" v-model="loveList">篮球
<input type="checkbox" value="zuball" v-model="loveList">足球
<input type="checkbox" value="bangball" v-model="loveList">棒球
<input type="checkbox" value="paiball" v-model="loveList">排球
<h3>单选按钮(绑定value对象的字符串 即下面sex:'male',)</h3>
<input type="radio" v-model="sex" value="male"> 男
<input type="radio" v-model="sex" value="female"> 女
<h3>选择框（绑定对应所选的值 即下面address:'上海'）</h3>
<select v-model="address">
<option value="上海">上海</option>
<option value="北京">北京</option>
<option value="深圳">深圳</option>
<option value="广州">广州</option>
</select>
<h3>修饰符number\lazy</h3>
<!--.number将输入的信息转为数字类型-->
<!--.lazy失去焦点 内容变化-->
<!--.trim取出两端的空格-->
<input type="text" v-model.number.lazy="num">
<p> {{num}} </p>
<p> {{address}} </p>
<p> {{sex}} </p>
<p> {{loveList}} </p>
<p>{{checkVal01}}</p>
<p>{{ message }}</p>
<p>{{ message }}</p>
</div>
<script src="../dist/js/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data:{
message:'同志',
checkVal01: true,
loveList:['bangball'], //多个复选框要绑定到同一个数组中(括号里面可以写默认选中的值)
sex:'male',
address:'广州',
num:0
}
})
</script>
</body>
</html>
aaaaaaaaaaaaaa
获取表单input里面的数据信息
<input v-model="formData.username"><input v-model="formData.pwd">
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>获取input表单数据信息</title>
<link rel="stylesheet" href="../dist/css/bootstrap.css">
<style>
</style>
</head>
<body>
<div id="app">
<div class="container">
<div class="page-header">
<h1>表单提交</h1>
</div>
<div class="row">
<div class="col-md-6">
<!--设置@submit.prevent=''，限制表单提交-->
<form @submit.prevent="">
<div class="form-group">
<!--label中的for绑定input中的id值，可以实现点击'用户名'的时候也可以获取input的焦点-->
<label for="textInput">用户名</label>
<input id="textInput" type="text" class="form-control" v-model="loginData.username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="#">密码</label>
<input type="password" class="form-control" v-model="loginData.pwd">
</div>
<div class="checkbox">
<label for="#">
<!--loginData.remember:true默认是选中，''默认是空-->
<input type="checkbox" v-model="loginData.remember"> 记住密码
</label>
</div>
<!--button绑定了login（）方法，点击之后后台可以获取所有表单的值-->
<button class="btn btn-success btn-block" @click="login()">登 录</button>
</form>
</div>
</div>
</div>
</div>
<script src="../dist/js/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data: {
loginData: {
username:'',
pwd:'',
remember:'', //单选框默认状态是没选
}
},
methods: {
login() {
//获取所有表单的值
console.log(this.loginData)
}
}
})
</script>
</body>
</html>
以上是 Vue样式绑定、事件绑定 的全部内容， 来源链接： utcz.com/z/377477.html
