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的事件机制,例如,事件绑定.事件监听.事件委托(事件代 ...
随机推荐
- js读取excel数据后的时间格式转换
使用xlsx.full.min.js 获取excel的日期数据为:37858: 拿到的整数值是日期距离1900年1月1日的天数,这时需要写一个函数转换: function formatDate(num ...
- iOS Programming Autorotation, Popover Controllers, and Modal View Controllers
iOS Programming Autorotation, Popover Controllers, and Modal View Controllers 自动旋转,Popover 控制器,Moda ...
- Java中方法的继承以及父类未被子类覆盖的方法调用的问题
在看java继承这一块的时候发现了一个问题,即父类未被子类覆盖的方法是如何调用的? 是子类拥有了父类的该方法只是没有显示表示,还是子类调用了父类的该方法. 为此做了一下验证 代码如下: public ...
- 对卷积(convolution)的理解
参考文章 https://www.jianshu.com/p/daaaeb718aed https://blog.csdn.net/bitcarmanlee/article/details/54729 ...
- javaScript的注释、变量和基本数据类型
上一级写了javaScript是用来操作文档对象元素的,这一次带大家看看javaScriput的注释.变量和基本数据类型. 1.注释:注释是什么呢?注释其实就是阻止浏览器解析某一行或者多行代码或描述的 ...
- JavaScript模板引擎的使用
为了将数据库中的一组记录转换成HTML输出到界面上,大家都采用哪些做法呢? 在WebForm时代我们经常使用datagrid.repeater,当MVC问世后我们开始直接在视图上编写C#循环语句,而现 ...
- UVALive 3938 Ray, Pass me the dishes! （动态最大连续和）
题意:求一个动态区间的最大连续和. 静态版本的O(n)算法显示不适用了,但是可以用线段树分治,因为一个连续和要在两边的区间,要么跨越两边,对于一个结点维护最大前缀和,后缀和,子区间连续和. 题目要求输 ...
- 手写IOC框架
1.IOC框架的设计思路 ① 哪些类需要我们的容器进行管理 ②完成对象的别名和对应实例的映射装配 ③完成运行期对象所需要的依赖对象的依赖
- Mybatis学习记录(1)
1.Mybatis介绍 Mybatis是apache的一个开源项目iBatis,Mybatis是一个优秀的持久层框架,他对jdbc的操作数据库的过程进行封装,使开发者只需要关注sql本身,不需 ...
- C#数组排序方法
在C#中常用的数组排序的方法有:选择排序法.冒泡排序法.插入排序法和希尔排序法等. 一.选择排序法 using System;using System.Collections.Generic;usin ...