学Vue的第二天

159 阅读1分钟

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