VUE基础(二)

6.事件修饰符

@事件.xxx
.stop.prevent.capture.self.once.passive





...
...

7.计算属性/数据

https://dwz.cn/A36xqN5e
computed
1.频繁使用的复杂公式
2.需要监控的——全局状态管理

computed: {
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
div内:{{ reversedMessage }}    无需加(),因为这里是作为属性

如果computed和data内重名,data优先级高于computed
基础例子中是只用到了computed的get,还有set方法:

        computed:{
                   name:{
                       get(){
                            return this.family+this.last;
                       },
                       set(newVal){
                            this.family=newVal.charAt(0);
                            this.last=newVal.substring(1);
                       }
                   }
               }
        //上面的newVal,就是name的值

8.监听

watch

watch:{
                    a(newVal,oldVal){
                        console.log(`a从:${oldVal}变成了:${newVal}`)
                    }
               }

你可能感兴趣的:(VUE基础(二))