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