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.trim v-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>
