1.事件操作
Vue中获取事件对象
普通的事件函数,在调用的时候人如果没有任何参数的情况下,事件处理函数的第一个形式参数默认接收事件对象的注入,即:事件函数的第一个参数就是事件对象
<div id='app'>
<input @keyup='getKey' type='text'/>
</div>
...
<script>
...
methods: {
getKey(e) {
console.log(e.keyCode)
}
}
...
</script>
Vue事件函数中接收参数
Vue给附带事件参数的事件函数,提供了显式的事件对象: $event
<div id='app'>
<button @keyup='del($event,12)'>删除</button>
</div>
...
<script>
...
methods: {
del(e,id) {
console.log(e)
console.log(id)
}
}
...
</script>
Vue中操作事件对象
.stop 阻止事件冒泡
用法:@事件对象.stop=‘事件处理函数’
<div id='app'>
<div @click='outer'>
<div @click='middle'>
<!--阻止事件冒泡-->
<div @click.stop='inner'>
</div>
</div>
</div>
.prevent 阻止事件默认行为
用法:@事件对象.prevent=‘事件处理函数’
<div id='app'>
<div @click='outer'>
<div @click='middle'>
<!--阻止事件默认行为-->
<a @click.prevent='inner'>
</div>
</div>
</div>
.capture 将事件触发为捕获机制触发
用法:@事件对象.capture=‘事件处理函数’
<div id='app'>
<!--改变事件触发机制-->
<div @click.capture='outer'>
<div @click='middle'>
<div @click='inner'>
</div>
</div>
</div>
.self 绑定在节点上的事件,只能由自身触发(不能被捕获或者冒泡触发)
用法:@事件对象.self=‘事件处理函数’
<div id='app'>
<div @click='outer'>
<!--让事件只能由自身触发-->
<div @click.self='middle'>
<div @click='inner'>
</div>
</div>
</div>
注: .self修饰符,只让当前元素的事件由自身触发,不会影响内部元素的冒泡
.self可以和其他修饰符一起组合使用
<!--阻止事件冒泡的同时让事件只由自身触发-->
<div @click.self.stop='middle'></div>
.once 让绑定在节点上的事件只生效一次
用法:@事件对象.once=‘事件处理函数’
<button @click.once='onceGetMsg'>只生效一次的点击效果</button>
按键修饰符 (将键盘按键功能绑定到对应的事件上)
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
自定义按键
Vue.config.keyCodes.a = 65
<!--同时按下enter 和 ctrl触发事件-->
<input type='text' @keyup.enter.ctrl='getDate'>
<!--同时按下ctrl 和 自定义keyCodes为65的按键(a) 触发事件-->
<input type='text' @keyup.ctrl.a='getDate'>
2.表单操作
数据双向绑定
数据双向绑定:描述了数据在实例中和视图进行了双向绑定,实例中的数据更新会影响视图中数据的展示,视图中的数据更新会同步到实例中
表单数据绑定
数据双向绑定(MVVM)主要体验在表单数据中,通过v-model指令进行数据绑定操作
<div id='app'>
<input type='text' v-model.trim='msg'>
<h2>{{msg}}</h2>
</div>
....
<script>
...
data:{
msg:''
}
...
</script>
表单修饰符
.trim:用于剔除表单元素中输出数据的两侧无效空格
.number:用于将表单中输入的数据转换成数值
.lazy:用于让表单中的数据同步延迟到失去焦点
vm.$set() 和Vue.set()
通常情况下,数据的双向绑定,是底层监听了数据的操作函数,一旦操作函数发生调用就会重新渲染界面展示,但是操作数据时(数组、对象)包含查询语法的数据更新,并不会引数据的重新渲染
Vue中提供了实例函数$set()和全局函数Vue.set()用于查询语法中数据的主动更新
vm.$set(目标对象,属性,值)
Vue.set(目标对象,属性,值)
<body>
<div id="app">
<button @click="arrAdd">数组中添加数据</button>
<ul>
<li v-for="n in names" :key="n">{{n}}</li>
</ul>
</div>
<script src="./vue.js"></script>
<script>
...
data: {
names: ["zhangsan", "lisi", "wangwu", "zhaolliu"],
},
methods: {
arrAdd() {
// this.names.push("xuqi") // 调用数组函数添加数据
// this.names[4] = "wangba" // 通过索引添加数据
// Vue提供了自己的实例函数$set,用于通过索引直接添加数据
this.$set(this.names, 4, "xuqi")
// Vue提供了通用函数set,用于通过索引直接添加数据
Vue.set(this.names, 5, "wangba")
console.log(this.names)
},
}
...
</script>
数据劫持(重点)
Vue2.x版本中,底层通过原生对象Object.defineProperty()完成数据的声明,将这样的声明方式称为数据劫持,被劫持的数据进行查询和编辑时是可以被监听的
// 声明一个变量:通过数据劫持的方式进行声明
// ① 数据存储容器
let temp= "zhangsan"
// ② 数据监听对象
Object.defineProperty(window, "myName", {
get() { // 监听读取数据
console.log("get函数调用了")
return temp
},
set(value) {
console.log("set函数调用了")
temp = value
}
})
案例:通过数据劫持实现双向数据绑定
<div id="app"></div>
<input type="text">
<script>
let app = document.getElementById('app')
let inp = document.querySelector('input')
let temp = '初始数据'
Object.defineProperty(window,'content',{
get() {
return temp
},
set(val) {
temp = val
render(content)
}
})
function render(html) {
app.innerHTML = html
}
render(content)
inp.oninput = function(){
content= this.value
render(content)
}
</script>
自定义Vue框架
Vue语法基础
Vue功能进阶
Vue组件基础
Vue脚手架
Vue组件化开发(进阶)
VueRouter