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> <!-- 内联语句 --> ...
随机推荐
- Mybatis+MySql 一个标签中执行多条sql语句
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/cxfly957/article/details/77896590 MySql默认是不支持这种骚操作的 ...
- Unable to connect to HBase using Phoenix JDBC Driver
Feb 01, 2017; 5:21pm Unable to connect to HBase using Phoenix JDBC Driver 9 posts Hi All, I am try ...
- Linux图形界面从登录列表中隐藏用户和开机自动登录
从GDM-GNOME显示管理器:“ GNOME显示管理器(GDM)是一个管理图形显示服务器并处理图形用户登录的程序.” 显示管理器为X Window System和Wayland用户提供图形登录提示. ...
- Java打印日历表
今天来吐槽一下Java的Calendar类的使用问题,反正我是弄了半天. 首先是,遇到一个问题,输入年份和月份,需要打印这个月的日历,网上有不少代码,但我用了几个感觉都不是很靠谱. 然后经过一番探索, ...
- 【JVM学习笔记二】垃圾收集器与内存分配策略
1. 概述 1) GC的历史比Java久远 2) GC需要完成的三件事: | 哪些内存需要回收 | 什么时候回收 | 如何回收 3) Java内存运行时区域各个部分: | Java虚拟机栈.计数器.本 ...
- pandas-18 reindex用法
pandas-18 reindex用法 pandas中的reindex方法可以为series和dataframe添加或者删除索引. 方法:serise.reindex().dataframe.rein ...
- 组件切换方式（Vue.js）
这里,我用一个注册登录两组件的切换实例来演示: 切换方式一 <!DOCTYPE html> <html lang="zh-CN"> <head> ...
- Vue组件开发分享
在开始本文之前,你可能需要先了解以下相关内容: Vue.js 一款高性能轻量化的MVVM框架 Webpack 前端模块化代码构建工具 Vue组件介绍 基于vue.js高效的双向数据绑定特性,让我们 ...
- springboot使用阿里fastjson来解析数据
1.spring boot默认使用的json解析框架是jackson,使用fastjson需要配置,首先引入fastjson依赖 pom.xml配置如下: <project xmlns=&quo ...
- git使用.gitignore文件忽略相关文件上传
在使用git时,有些文件是不需要上传到仓库中的,比如idea/eclipse相关的文件,编译后的文件(target目录)等. 可以使用.gitignore文件进行配置.在git本地仓库创建.gitig ...