2.1数据代理
通过一个对象代理另一个对象中的属性的操作(读 / 写 ):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Object.defineproperty</title>
</head>
<body>
<script type="text/javascript">
let number = 18
let person = {
name:'Aq',
gender:'man'
}
Object.defineProperty(person,'age',{
// value:number,
// enumerable:true,//控制属性是否可以枚举
// writable:true,//控制属性是否可以修改
// configurable:true,//控制属性是否可以删除
//当有人访问age属性时,调用此方法并返回number
get() {
return number;
},
//当有人修改age属性时,调用此方法,且会收到具体修改的值
set(v) {
number = v
}
})
console.log(person)
</script>
</body>
</html>
这就是数据代理的一个简单例子,我们利用Object.defineProperty来修改了其中number的值。
Vue中的数据代理:
由Vue也就是vm来进行代理,当访问到vm中的属性时,调用getter去date也就是model中获取相应的值;当修改vm中的属性时,调用setter去修改data的值。
在vm中的data数据放在_data中;
2.2事件:
1.使用v-on:xxx 或 @xxx 来绑定事件,xxx是事件名;
2.事件的回调需要配置在methods对象中,最终会在vm上;
3.在methods中配置的函数,不要用箭头函数;
4.methods中配置的函数,都是被Vue所管理的函数,this指向的是vm 或 组件实例对象;
5.@click=“demo” 与 @click=“demo($event)” 效果一致,但后者可以传参。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>hello,{{name}}</h2>
<button v-on:click="showInfo1">click me</button>
<button @click="showInfo2($event,66)">click me too</button>
</div>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
name:'vue2'
},
methods:{
showInfo1(event){
console.log(event.target.innerText)
alert("hello,my friend!")
},
showInfo2(event,number){
console.log(event.target.innerText)
console.log(number)
console.log(event)
alert("hello,my friend!")
},
}
})
</script>
</body>
</html>
Vue中的事件修饰符:
1.Prevent:阻止默认事件;
2.Stop:阻止事件冒泡;
3.Once:事件只触发一次;
4.Capture:使用事件的捕获模式;
5.Self:只有event.target是当前操作的元素才能触发事件;
6.Passive:事件的默认行为立刻执行,无需等待事件回调执行完毕。
事件修饰符可以连续使用,
如:@click.stop.once
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件修饰符</title>
<script type="text/javascript" src="../js/vue.js"></script>
<style>
*{
margin-top: 20px;
}
.box1{
padding: 5px;
background-color: cadetblue;
}
.box2{
padding: 5px;
background-color: deepskyblue;
}
.list{
width: 200px;
height: 200px;
background-color: deepskyblue;
overflow: auto;
}
li{
height: 100px;
}
</style>
</head>
<body>
<div id="root">
<h2>hello,{{name}}</h2>
<!-- 1.Prevent:阻止默认事件;-->
<a href="http://www.baidu.com" @click.prevent="showInfo1">click me get information</a>
<!-- 2.Stop:阻止事件冒泡;-->
<div @click="showInfo1">
<button @click.stop="showInfo1">click me</button>
</div>
<!-- 3.Once:事件只触发一次;-->
<button @click.once="showInfo1">click me</button>
<!-- 4.Capture:使用事件的捕获模式;-->
<div class="box1" @click.capture="showmsg(1)">
div1
<div class="box2" @click="showmsg(2)">
div2
</div>
</div>
<!-- 5.Self:只有event.target是当前操作的元素才能触发事件;-->
<div class="box1" @click.self="showInfo1">
<button @click="showInfo1">click me</button>
</div>
<!-- 6.Passive:事件的默认行为立刻执行,无需等待事件回调执行完毕。-->
<ul @wheel.passive="demo" class="list">
<!-- <ul @scroll="demo" class="list">-->
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
name:'vue2'
},
methods:{
showInfo1(event){
console.log(event.target.innerText)
alert("hello,my friend!")
},
showInfo2(event,number){
console.log(event.target.innerText)
console.log(number)
console.log(event)
alert("hello,my friend!")
},
showmsg(number){
alert(number)
},
demo(){
console.log("@")
}
}
})
</script>
</body>
</html>
键盘事件:
1.Vue中常用的按键别名:
回车 =》 enter
删除 =》 delete
退出 =》 esc
空格 =》 space
换行 =》 tab
上 =》up
下 =》dowm
左 =》left
右 =》right
2.Vue未提供的按键,可以使用按键原始的key值去绑定,要注意格式为kebab-case; 如:Enter-13;
3.系统修饰键:ctrl,alt,shift,meta(windows键)
(1)配合keyup使用,按下修饰键的同时,再按下其他键,随后释放其他键,事件才会触发。
(2)配合keydown使用,正常触发事件
4.可以使用keyCode去指定具体的按键
5.Vue.config.keyCodes.自定义键名 = 键码 可以定制按键别名
6.可以用这种写法 @Keyup.ctrl.y 相当于同时按下ctrl和y时会触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>hello,{{name}}</h2>
<input type="text" placeholder="click enter to input" @keyup.enter="showInfo">
<input type="text" placeholder="click enter to input" @keydown.tab="showInfo">
<input type="text" placeholder="click enter to input" @keyup.ctrl="showInfo">
<input type="text" placeholder="click enter to input" @keyup.huiche="showInfo">
</div>
<script type="text/javascript">
Vue.config.keyCodes.huiche = 13
const vm = new Vue({
el:'#root',
data:{
name:'vue2'
},
methods:{
showInfo(e){
console.log(e.target.value)
}
}
})
</script>
</body>
</html>
2.3 计算属性:
1.定义:要用的属性不存在,要通过已有的属性计算得到;
2.原理: 底层是使用Object.defineproperty的getter和setter;
3.get函数的执行时机:
(1)当第一次读取时要计算;
(2)当依赖数据出现改动时要计算;
4.优势:与methods实现相比,内部有缓存机制,效率更高;
5.备注:
(1)计算属性和data一样最终会出现在vm上;
(2)如果计算属性要修改,必须去set方法中去做相应的修改,且set方法中要使得依赖数据的内容发生改变;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
FirstName:<input type="text" v-model="firstName"> <br><br>
LastName:<input type="text" v-model:value="lastName"> <br><br>
<p>FullName:<span>{{fullName}}</span></p>
<p>FullName:<span>{{fullName}}</span></p>
<p>FullName:<span>{{fullName}}</span></p>
<p>FullName:<span>{{fullName}}</span></p>
<p>FullName:<span>{{fullName}}</span></p>
</div>
<script type="text/javascript">
Vue.config.productionTip=false
const vm = new Vue({
el:'#root',
data:{
firstName:'Excaliba',
lastName:'Joy'
},
computed:{
fullName:{
get(){
return this.firstName+"-"+this.lastName;
},
set(value){
const arr = value.split("-")
this.firstName = arr[0]
this.lastName = arr[1]
}
}
}
})
</script>
</body>
</html>
当计算属性只需读取而不用修改时,可以用简单写法:
computed:{
fullName:function () { //getter
return this.firstName+"-"+this.lastName
}
}