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>
Vue样式绑定、事件绑定的更多相关文章
- vue中滚动事件绑定的函数无法调用问题
问题描述: 一个包含下拉加载的页面,刷新当前页然后滚动页面,能够正常触发滚动事件并调用回调函数,但是如果是进了某一个页面然后再进的该页面,滚动事件能够触发, 但是回调函数在滚动的时候只能被调用一次. ...
- Vue.js04：vue样式-通过属性绑定方式为元素设置class类样式
<!-- 传统写法 --> <h1 class="red thin">这是一个h1标签</h1> <!-- 第一种使用方式,直接传递一个数 ...
- vue之click事件绑定
1.@click不光可以绑定方法,也可以就地修改data里的数据 代码示例代码如下: 2.@click绑定多个操作的时候用:隔开 代码示例代码如下: <el-table><el-ta ...
- Vue 属性绑定v-bing 事件绑定v-on
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 微信小程序中的事件绑定
前言: 微信小程序中的事件绑定和Vue中的事件绑定其实有很多的相似之处,所以如果有过Vue相关的经验,学起来的话还是比较容易的. js代码: // 页面级的js文件必须调用Page函数来注册页面, / ...
- 微信小程序学习笔记二 数据绑定 + 事件绑定
微信小程序学习笔记二 1. 小程序特点概述 没有DOM 组件化开发: 具备特定功能效果的代码集合 体积小, 单个压缩包体积不能大于2M, 否则无法上线 小程序的四个重要的文件 *js *.wxml - ...
- 微信小程序(三)-事件绑定
小程序事件绑定 https://developers.weixin.qq.com/miniprogram/dev/framework/view/two-way-bindings.html 1.数据 / ...
- JS 中的事件绑定、事件监听、事件委托
事件绑定 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有 ...
- 每日分享！～ JavaScript中面试基础--1，数组检测的方式 2.传统事件绑定和W3C标准绑定事件的区别～
javaScript 那些方式中检测数据类型 typeof typeof isNaN // 结果是function 检测数组的几种方式 instanceof arr instanceof Array( ...
- JS 事件绑定、事件监听、事件委托详细介绍
原:http://www.jb51.net/article/93752.htm 在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代 ...
随机推荐
- 通过Jenkins调用自动部署war包及jar包到服务器上的Shell脚本
1)部署war包#!/bin/bashif [ id>0];then echo"stopproject" kill −9 idelse echo "project ...
- 重写strcpy函数，以实现strcpy的功能
char * strcpyTest(char *dst,const char *src);Action(){ char *ptr=(char*)malloc(100); char a[]={" ...
- python 之正则表达式
一.正则表达式 首先,我们需要感性的了解下什么是正则表达式,简单的是说“正则表达式”就是一个“表达式”,更准确定义是:“用一个简洁的方法来实现对“一组字符串”的表达式. 最终目的就是实现“一行胜千言” ...
- AutoHotKey设置ide的光标功能键
CapsLock:: SetCapsLockState,off ;锁定为小写 CapsLock & d:: flag_C=1 ;小写d代替control键,实现跨词移动CapsLock &am ...
- ReferenceError: internalBinding is not defined
ReferenceError: internalBinding is not defined at internal/util/inspect.js:31:15 at req_ (D:\workspa ...
- Beta冲刺（周五）
这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass1 这个作业要求在哪里 https://edu.cnblo ...
- spring-data-JPA源码解读
spring-data-JPA源码部分有两个很重要的部分:1.识别repositories接口 2.将接口添加代理实现类并托管spring管理 JpaRepositoriesRegistrar 目的是 ...
- 【转】瓜娃（guava）的API快速熟悉使用
http://www.cnblogs.com/snidget/archive/2013/02/05/2893344.html 1,大纲 让我们来熟悉瓜娃,并体验下它的一些API,分成如下几个部分: I ...
- jQ实现JSON.stringify(obj)方法
jQstringify是使用jQuery实现的JSON.stringify(obj)方法 代码如下:<script type="text/javascript" src=&q ...
- 《毛毛虫团队》第九次团队作业：BETA冲刺与团队项目验收
一:实验名称:Beta冲刺与验收准备 二:实验目的与要求 (1)掌握软件黑盒测试技术: (2)学会编制软件项目总结PPT.项目验收报告: (3)掌握软件项目验收内容,验收流程. 三.实验内容与步骤 任 ...