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> <!-- 内联语句 --> ...
随机推荐
- 解决IE下打印iframe时，页面比例变小的问题
$('#reportFrame')[0].contentWindow.printMyself();//主页面调用iframe里的打印方法 //reportFrame里的方法 function prin ...
- [Leetcode] Binary Tree Pruning
題目是說,如果左右子樹都不存在又自已為0,就去掉那個子樹(設為null) recursive後序,左子樹,右子樹,然後是根 自已同時又是別人的子樹,所以要告訢根自已是不是存在 從a開始,左右子樹都不存 ...
- 版本控制器：Git-的使用
版本控制器:Git # 达到多人协同开发的目的 安装 """ 1.下载对应版本:https://git-scm.com/download 2.安装git:在选取安装路径的 ...
- vue打包后页面显示空白但是不报错
在使用vue打包的时候页面显示空白,并且控制台不报错 设置vue-router的时候mode设置为history模式了,这种模式要有后台的配合,一般还是使用哈希模式就不会出现页面空白了.
- 在Node.js中使用ejsexcel输出EXCEL文件
1.背景 在Nodejs应用程序中输出Excel,第一印象想到的一般是node-xlsx,这类插件不仅需要我们通过JS写入数据,还需要通过JS进行EXCEL显示样式的管理. 这是个大问题,不仅代码冗余 ...
- 15 Android系统安全（简要）
Android的用户和第三方软件,Android组件和数据安全 手机root后的问题:1.系统不稳定,2.病毒入侵,3.数据泄露 Root原理: Root分两类:1.临时root,2.永久root R ...
- Golang 在 Mac、Linux、Windows 下如何交叉编译
转自 https://blog.csdn.net/panshiqu/article/details/53788067 Golang 支持交叉编译,在一个平台上生成另一个平台的可执行程序,最近使用了一下 ...
- k8s之StatefulSet介绍（六）
复制有状态的Pod replicaSet通过一个pod模版创建多个pod副本.这些副本除了它们的名字和IP地址不同外,没有别的差异.如果pod模版里描述了一个关联到特定持久卷声明的数据卷,那么Repl ...
- 【Spring Boot】Spring Boot之整合RabbitMQ并实现消息的发送和接收
一.项目配置 1)引入maven坐标 <!--amqp--> <dependency> <groupId>org.springframework.boot</ ...
- 浅谈原子操作、volatile、CPU执行顺序
浅谈原子操作.volatile.CPU执行顺序 在计算机发展的鸿蒙年代,程序都是顺序执行,编译器也只是简单地翻译指令,随着硬件和软件的飞速增长,原来的工具和硬件渐渐地力不从心,也逐渐涌现出各路大神在原 ...