VUE基础（二）

6.事件修饰符

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

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

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}`)
                    }
               }