Vue的watch属性
监听属性,检测data属性里数据的变化。具体代码:
new Vue({
el:'#app',
data:{
count:0
},
watch:{
count(){
console.log('count变成了'+count)
}
}
})
每次观测的数据发生变化时,就会调用一次函数。但是因为data属性里的数据可能会多次在不同地方被调用,所以可以通过watch属性在data属性里的数据发生改变时,知道影响了哪里。
Vue的complete属性
计算属性,定义一个变量,return出结果。只有data属性里的数据发生变化时才会再次进行计算,否则会一直使用缓存里的数据。
<body>
<div id="app">
<button @click='thisTime'>获取现在时间</button>
</div>
</body>
<script src="./vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
time: new Date()
},
methods: {
thisTime() {
alert(this.nowTime)
}
},
computed: {
nowTime() {
return '现在是' + this.time
}
}
})
</script>
每次点击按钮时都是第一次获取的时间,这是因为computed中的计算因子:‘现在是’和this.time都没有发生改变,所以这个方法只调用了第一次,其结果始终被缓存。计算属性中的nowTime的结果受一个或多个计算因子的影响,所以计算属性适合用于一个数据被多个数据影响。
事件修饰符
stop: 停止(阻止事件冒泡)
once: 只执行一次
prevent: 阻止默认事件
各个事件修饰符可以串联使用。
按键修饰符
keydown: 按下
keypress: 按住
keyup: 松开
具体键名: space 空格
esc 退出
delete 退格
tab
up 方向键上
down 方向键下
left 方向键左
right方向键右
系统修饰符
使用键盘事件
具体键名:
shift
Ctrl
alt
window