键盘事件
-
vue中常用的按键别名
-
回车=>enter
-
删除=>delete(捕获的删除键和退格键)
-
退出=> esc
-
空格 => space
-
换行 => tab(tab键要和keydown使用,不能与keyup使用,tab键有自身的功能故特殊)
-
上 =>up
-
下 => down
-
左 => left
-
右 => right
-
另外的特殊的修饰键(ctrl、alt、shift、meta)
keyup:按下修饰键的同时,按下其他键,释放其他键,事件才被触发
keydown使用:正常触发事件
html
<body>
<div>
//keyup.enter是按下回车在控制台才输出结果
<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
</div>
</body>
<script>
new Vue({
el:'#root',
data: {
name: '时空'
},
methods: {
showInfo(e) {
//13是回车键的编码,e代表event
//if(e.keyCode != 13)
//return console.log(e.target.value)
//查询按键的编码
console.log(e.keyCode)
//按下回车将输入框的数据进行输出
console.log(e.target.value)
}
}
})
</script>
计算属性
-
computed计算属性和methods的区别
计算属性在调用多个fullName时,get只执行一次,剩下的多次fullName是从缓存中获取
methods调用一次,方法实现一次。没有缓存
-
如果修改缓存中的值,但缓存仍在存在。也就是缓存中的值和想修改的值不一致。针对此类问题引出,get的调用时机,
1.初读取fullName时,get被调用
2.所依赖的数据发生改变,也就是firsName和lastName的值被修改
html
<body>
<div>
姓: <input type="text" v-model="firsName"><br/>
名:<input type="text" v-model="lastName"><br/>
全名: <span>{{fullName}}</span>
// <span>{{fullName}}</span>
// <span>{{fullName}}</span>
// <span>{{fullName}}</span>
</div>
</body>
<script>
const vm = new Vue({
el: '#app',
data:{
firsName: '张',
lastName: '三',
},
computed: {
fullName: {
//当获取fullName时,在计算属性中访问data的firsName和lastName,get方法会被调用。fullName和data的属性都可以在vm中找到。故用this。获取firsName和lastName
get(){
// console.log('get',this)
return this.firsName + '-' + this.lastName
}
//set方法当fullName被修改的时候被调用
set(value){
// console.log('set',value)
//split方法把要修改的值,拆分成数组
const arr = value.split('-')
this.firName = arr[0]
this.lastName = arr[1]
}
}
}
})
</script>
计算属性的缩写
-
只有当不需要set方法时,才能使用计算属性的缩写
```html
computed: {
fullName: {
get(){
return this.firsName + '-' + this.lastName
}
}
//演变一
computed: {
//function(){}看成时get方法
fullName: function(){
return this.firsName + '-' + this.lastName
}
}
//演变二
computed: {
//这里不是函数模板的{{}}里面不能写fullNaLL()
fullName(){
return this.firsName + '-' + this.lastName
}
}
```