Vue绑定事件，双向数据绑定，只是循环没那么简单
v-on对象处理
<p @mouseover = "doTish" @mouseout = "doThat"> 对象形式 </p>
<p v-on="{ mouseover: doTish, mouseout: doThat }"> 对象形式 </p><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入Vue cdn 的网址-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app" >
<p v-on="{ mouseover: doTish, mouseout: doThat }">对象形式</p>
</div>
<script>
var vm = new Vue({
el:"#app",
methods:{
doTish(){
event.target.style.color = "red";
},
doThat(){
event.target.style.color = "#0f0";
},
},
})
</script>
</body>
</html>v-on:keyup监听按键触发常见的按键别名：
'.enter'
'.tab'
'.delete'(捕获“删除”和“退格”键)
'.esc'
'.space'
'.up'
'.down'
'.left'
'.right'按键序号网址查询:'http://www.cnblogs.com/wuhua1/p/6686237.html'
Vue.config.keyCodes.f1 = 112<!-- Ctrl Click -->
<div @click.ctrl="doSomething">Do something</div><!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入Vue cdn 的网址-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app" >
<!--鼠标点击 ctrl 才能触发-->
<p @click.ctrl.exact ="doTish">对象形式</p>
</div>
<script>
var vm = new Vue({
el:"#app",
methods:{
doTish(){
event.target.style.color = "red";
},
},
})
</script>
</body>
</html>事件修饰符
'.stop' -- 阻止事件冒泡
'.prevent' -- 阻止默认事件
'.capture' -- 添加事件侦听器时使用事件捕获模式
'.self' --只当事件在该元素本身（比如不是子元素）触发时触发回调
'.once' --事件只触发一次
'native' -- 给组件绑定点击事件阻止事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入Vue cdn 的网址-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
<style>
.inner{
width: 200px;
height: 200px;
background-color: darkseagreen;
}
</style>
</head>
<body>
<div class="inner" id="app" @click="divClick">
<input type="button" value="点击" @click.stop="inputClick">
</div>
<script>
var vm = new Vue({
el:'#app',
// data 负责输出理数据的
data:{
},
// methods 负责处理调用方法的
methods:{
divClick(){
console.log("最外层div")
},
inputClick(){
console.log("最内层div")
}
}
})
</script>
</body>
</html>实现捕获触发事件的机制 -- capture
冒泡是从向外依次触发，使用capture，就变成了从先显示外面，在显示里面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入Vue cdn 的网址-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
<style>
.inner{
width: 200px;
height: 200px;
background-color: darkseagreen;
}
</style>
</head>
<body>
<div class="inner" id="app" @click.capture="divClick">
<input type="button" value="点击" @click="inputClick">
</div>
<script>
var vm = new Vue({
el:'#app',
// data 负责输出理数据的
data:{},
// methods 负责处理调用方法的
methods:{
divClick(){
console.log("最外层div")
},
inputClick(){
console.log("最内层div")
}
}
})
</script>
</body>
</html>打印结果最外层div最内层div
只会阻止自己身上冒泡行为 -- self只会阻止自己身上冒泡行为 ,当有多层嵌套的时候，只会阻止有self 冒泡行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入Vue cdn 的网址-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
<style>
.inner{
width: 200px;
height: 200px;
background-color: darkseagreen;
}
</style>
</head>
<body>
<div id="app">
<div class="outer" @click="div2Handler">
<div class="inner" @click.self="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
</div>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {
div1Handler() {
console.log('这是触发了 inner div 的点击事件')
},
btnHandler() {
console.log('这是触发了 btn 按钮 的点击事件')
},
div2Handler() {
console.log('这是触发了 outer div 的点击事件')
}
}
});
</script>
</body>
</html>这是触发了 btn 按钮 的点击事件这是触发了 outer div 的点击事件
阻止默认事件 -- prevent1.例如a标签默认事件就是点击跳转页面，为了阻止a标签的默认事件触发我们绑定的事件，可以使用prevent2.图片的默认事件禁止拖拽，如果想给图片设置拖拽效果的话记得做阻止默认行为
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入Vue cdn 的网址-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app">
<a href="www.baidu.com" @click.prevent.once="linkClick">百度</a>
</div>
<script>
var vm = new Vue({
el:'#app',
// data 负责输出理数据的
data:{},
// methods 负责处理调用方法的
methods:{
linkClick:function () {
alert(1)
}
}
})
</script>
</body>
</html>只触发一次默认行为1.只触一次规定的默认行为2.下面的案例第二次点击就会跳转页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入Vue cdn 的网址-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app">
<a href="www.baidu.com" @click.prevent.once="linkClick">百度</a>
</div>
<script>
var vm = new Vue({
el:'#app',
// data 负责输出理数据的
data:{},
// methods 负责处理调用方法的
methods:{
linkClick:function () {
alert(1)
}
}
})
</script>
</body>
</html>阻止事件冒泡 -- stop
事件冒泡从里向外阻止事件冒泡使用stop
v-on -- 方法处理器和内联处理器两者区别写法上，带不带括号
没有括号不支持传参但只带event由于带括号支持传参，但必须$evnet 当参数传入才有evet事件
方法处理器内联处理器
v-model 双向数据绑定
修饰符<input type="text" v-model.lazy="name" />
.lazy :失去焦点同步一次
.number :格式化数字
.trim : 去除首尾空格checked -- 多选框(用数组接收)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入Vue cdn 的网址-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app">
爱好
<br>
足球<input name="text" v-model="msg" type="checkbox" value="foot">
篮球<input name="text" v-model="msg" type="checkbox" value="bask">
{{msg}}
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg:[]
},
});
</script>
</body>
</html>select --下拉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入Vue cdn 的网址-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app">
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
},
});
</script>
</body>
</html><input v-model.lazy ="msg" >
<input type="text" v-on:input="inputHandle" />v-for -- 循环
支持循环数组|对象|数字|字符串，Array | Object | number | string
数组使用
<p v-for="item,index in items">{{item}}--{{index}}</p>循环对象
<p v-for="(value,key,index) in items">{{value}}-{{key}}-{{index}}</p>
<p v-for="item in 3">{{item}}</p>对象重新渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入Vue cdn 的网址-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input v-model="msg.title" type="submit" @click="changeMsg">
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg:{},
},
methods:{
changeMsg(){
this.msg.title = "改变"
}
}
});
</script>
</body>
</html>怎么保证不在计划内的值也被重新渲染1.调用Vue的静态方法：set2.调用实例上的方法 ：$set3.给计划内的对象重新赋值：vm.object = {key:'新的'}4.添加指定属性重新构建赋值：Object.assign()
第一种解决方法 -- set/$set
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入Vue cdn 的网址-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input v-model="msg.title" type="submit" @click="changeMsg">
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg:{},
},
methods:{
changeMsg(){
Vue.set(this.msg, 'title', '新的' )
}
}
});
</script>
</body>
</html>$set ($set 是实例方法因此也是this在内部直接调用)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入Vue cdn 的网址-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input v-model="msg.title" type="submit" @click="changeMsg">
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg:{},
},
methods:{
changeMsg(){
this.$set(this.msg, 'title', '新的' )
}
}
});
</script>
</body>
</html>给计划内的对象重新赋值
vm.object = {key:'新的'}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入Vue cdn 的网址-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input v-model="msg.title" type="submit" @click="changeMsg">
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg:{},
},
methods:{
changeMsg(){
this.msg = {title:"新的"}
}
}
});
</script>
</body>
</html>Object.assign({},this.object,{key,value})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入Vue cdn 的网址-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input v-model="msg.title" type="submit" @click="changeMsg">
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg:{},
},
methods:{
changeMsg(){
this.msg = Object.assign({}, {
title: '新的',
})
}
}
});
</script>
</body>
</html>数组重新渲染
'push()'
'pop()'
'shift()'
'unshift()'
'splice()'
'sort()'
'reverse()'
filter(), concat() 和 slice() ,map()
依旧支持set/$set
splice是个好方法会常用解决vm.items[indexOfItem] = newValue不能被渲染的问题
使用方法set 是Vue静态方法，通过Vue调用使用Vue.set( array, indexOfItem, newValue)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入Vue cdn 的网址-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-for="i in msg">{{i}}</p>
<input v-model="pushArray">
<button @click="changeMsg">提交</button>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
pushArray:'',
msg:['我是', '测试', '数据'],
},
methods:{
changeMsg(){
Vue.set(this.msg, 0, this.pushArray);
}
}
});
</script>
</body>
</html>splice 是一个好方法
v-for 为什么要配合v-bind:key
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<label>Id:
<input type="text" v-model="id">
</label>
<label>Name:
<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="add">
</div>
<!-- 注意： v-for 循环的时候，key 属性只能使用 number或者string -->
<!-- 注意： key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值 -->
<!-- 在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值 -->
<p v-for="item in list" :key="item.id">
<input type="checkbox">{{item.id}} --- {{item.name}}
</p>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
list: [
{ id: 1, name: '李斯' },
{ id: 2, name: '嬴政' },
{ id: 3, name: '赵高' },
{ id: 4, name: '韩非' },
{ id: 5, name: '荀子' }
]
},
methods: {
add() { // 添加方法
this.list.unshift({ id: this.id, name: this.name })
}
}
});
</script>
</body>
</html>若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。
请点赞！因为你们的赞同/鼓励是我写作的最大动力！
欢迎关注达达的简书！
这是一个有质量，有态度的博客
Vue绑定事件，双向数据绑定，只是循环没那么简单的更多相关文章
- 2-4 Vue中的属性绑定和双向数据绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue学习之vue属性绑定和双向数据绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 解决vue 绑定事件会覆盖默认参数的问题
解决vue 绑定事件会覆盖默认参数的问题 在使用一些ui框架的时候,某些组件的框架中的事件所规定的参数不能满足实际开发的需要,但是直接传入参数会把默认的参数覆盖掉 解决方法:将参数放入箭头函数中,传递 ...
- vue中的双向数据绑定详解
前言 什么是数据双向绑定? vue是一个mvvm框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化.这也算是vue的精髓之处了.值得注意的是,我 ...
- Vue、AngularJS 双向数据绑定解剖
数据与视图的绑定与同步,最终体现在对数据的读写处理过程中,也就是 Object.defineProperty() 定义的数据 set.get 函数中.Vue 中对于的函数为 defineReactiv ...
- Vue中的双向数据绑定简单介绍
1. 文本框绑定v-module <div id="app"> <input type="text" v-model="msg&qu ...
- Vue父子组件双向数据绑定
[本文出自天外归云的博客园] 简介 Vue版本:2.9.6 Element版本:2.4.8 问题描述:子组件对Element中el-select进行封装,父组件中把选中的值selected和所有选项o ...
- angular 双向数据绑定与vue数据的双向数据绑定
二者都是 MVVM 模式开发的典型代表 angular 是通过脏检测实现,angular 会将 UI 事件,请求事件,settimeout 这类延迟的对象放入到事件监测的脏队列,当数据变化的时候,触发 ...
- Vue绑定事件
<!-- 方法处理器 --> <button v-on:click="doThis"></button> <!-- 内联语句 --> ...
随机推荐
- 3、Vue实例的属性
1.获取Vue实例的属性 2.data属性 每个Vue实例都会代理其data对象里所有的属性.如果实例创建之后添加或者更改属性,他不会触发视图更新. 这句话说了下面两件事情 1.每个Vue实例都会代理 ...
- 2019 滴滴java面试笔试总结 （含面试题解析）
本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.滴滴等公司offer,岗位是Java后端开发,因为发展原因最终选择去了滴滴,入职一年时间了,也成为了面试官, ...
- 坑人的Mysql5.7 （默认不支持Group By语句）（转）
部署项目时,项目启动完毕.点击有group by 查询语句时出现错误,界面中没有该有的数据.查询log日志发现错误 Expression #1 of SELECT list is not in GRO ...
- iframe中操作主体页面的元素，方法
在不使用三大框架的情况下,iframe的使用可以做到在页面中直接引入别的页面作为当前页面的一部分,但是在iframe的使用过程中存在一些相互之间的操作 例如在iframe中获取主页面的元素,使用主页面 ...
- 32、flex布局
html: <div class="parent"> <div class="son">1</div> <div cl ...
- CSS 精灵技术（sprite）
一.精灵技术产生的背景 图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户. 然而,一个网页中往往会应用很多小的背景图像作为修饰,当 ...
- HTML 结构标签（div+span）
一.div 标签 div 就是 division 的缩写 分割, 分区的意思 常见的用途是文档布局. 二.span 标签 span, 跨度,跨距:范围 <span> 元素可用于为部分文本设 ...
- DataPipeline CTO陈肃：构建批流一体数据融合平台的一致性语义保证
文 | 陈肃 DataPipelineCTO 交流微信 | datapipeline2018 本文完整PPT获取 | 关注公众号后,后台回复“陈肃” 首先,本文将从数据融合角度,谈一下DataPipe ...
- FFmpeg Windows下安装与测试
FFmpeg 简介 FFmpeg的名称来自MPEG视频编码标准,前面的"FF"代表"Fast Forward",FFmpeg是一套可以用来记录.转换数字音频.视 ...
- 浅谈Python设计模式 - 享元模式
声明:本系列文章主要参考<精通Python设计模式>一书,并且参考一些资料,结合自己的一些看法来总结而来. 享元模式: 享元模式是一种用于解决资源和性能压力时会使用到的设计模式,它的核心思 ...