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的事件机制,例如,事件绑定.事件监听.事件委托(事件代 ...
随机推荐
- Json字符串与js数组互相转换
1.Json数据格式的字符串转换成js数组: JSON.parse(str); // str 字符串格式 2.js数组转换成Json数据格式字符串: var myJSONText = JSON.s ...
- hihoCoder #1165 : 益智游戏 (挑战赛11 B题)
题意:在一个序列中找到两个数a和b,使得a*b的因子个数最多,输出最多的因子个数. 思路:数据较多,处理会很慢.对序列中每个数字进行质数分解求因子个数,然后按照因子个数降序排列,对前50个因子最多的数 ...
- ThinkPHP笔记——开启debug调试模式
debug+trace模式可以查看开发过程中TP的错误信息,可以更好地帮助开发者debug.但是debug模式的开启还不是简单的在配置文件中中设置就可以的,经过查资料摸索,找到一种有效的方法. 首先在 ...
- 一步一步教你用IntelliJ IDEA 搭建SSM框架（1）
1.基本概念 SSM框架指:Spring MVC + Spring + MyBatis Spring MVC是一种web层mvc框架,用于替代servlet,处理|响应请求,获取表单参数,表单校验等 ...
- superset docker 部署
公众号原文有更多效果图哦 一.使用自己的数据库 1. 拉取项目 // 创建目录用于存放项目 mkdir -p /mnt/superset cd /mnt/superset git clone http ...
- java中求几个字符串的最大公共子串 使用了比较器Comparator
package com.swift; import java.util.ArrayList; import java.util.Collections; import java.util.Compar ...
- C# 使用Epplus导出Excel [4]：合并指定行
C# 使用Epplus导出Excel [1]:导出固定列数据 C# 使用Epplus导出Excel [2]:导出动态列数据 C# 使用Epplus导出Excel [3]:合并列连续相同数据 C# 使用 ...
- webpack开始一个项目的步骤
这几天在学习Vue 用到了webpack打包工具 开始一个项目的时候 需要配置很多项 刚开始写的时候 配置文件总是缺什么再去配置什么 创建项目就用了半个小时 后来觉得应该有个步骤 这样 ...
- 【dp】守望者的逃离
妙 题目描述 恶魔猎手尤迪安野心勃勃,他背着了暗夜精灵,率领深藏在海底的娜迦族企图叛变.守望者在与尤迪安的交锋中遭遇了围杀,被困在一个荒芜的大岛上.为了杀死守望者,尤迪安开始对这个荒岛施咒,这座岛很快 ...
- 每天一个linux命令(13)：less命令
less 工具也是对文件或其它输出进行分页显示的工具,应该说是linux正统查看文件内容的工具,功能极其强大.less 的用法比起 more 更加的有弹性.在 more 的时候,我们并没有办法向前面翻 ...