事件修飾符

　　在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation()是非常常見的需求。盡管我們可以在 methods 中輕松實現這點，但更好的方式是：methods 只有純粹的數據邏輯，而不是去處理 DOM 事件細節。在Vue中，事件修飾符處理了許多DOM事件的細節，讓我們不再需要花大量的時間去處理這些煩惱的事情，而能有更多的精力專註於程序的邏輯處理。在Vue中事件修飾符主要有：

• .stop：等同於JavaScript中的event.stopPropagation()，防止事件冒泡
• .prevent：等同於JavaScript中的event.preventDefault()
  ，防止執行預設的行為（如果事件可取消，則取消該事件，而不停止事件的進一步傳播）
• .capture：與事件冒泡的方向相反，事件捕獲由外到內
• .self：只會觸發自己範圍內的事件，不包含子元素
• .once：只會觸發一次

.stop：

        <div class="inner" @click="div">
            <!-- .stop阻止所有冒泡 -->
            <input type="button" value="挫他" @click.stop="input">
        </div>
          methods: {
                div() {
                    console.log("A")
                },
                input() {
                    console.log("B")
                }
            }

　　在沒有使用.stop的時候,點擊div的區域會在控制臺輸出A，點擊按鈕的時候會出現B和A（會從內到外觸發）。當我們加上.stop的時候相當於在方法中調用了event.stopPropagation()，這樣在點擊子事件的時候不會觸發父節點事件。

.prevent

<a href="http://www.baidu.com" @click.prevent="Label">有問題去百度</a>
methods: {
                Label() {
                    console.log("觸發a標簽的點擊事件")
                }
            }

　在沒有使用.prevent的時候，點擊a標簽的時候，會先在控制輸出console,然後調轉到百度網頁，使用.prevent的時候相當於調用了event.preventDefault()只會輸出console並不會跳裝網頁

.capture

        <!-- .capture 捕獲事件，從外到裏執行事件-->
        <div class="inner" @click.capture="div">
            <input type="button" value="挫他" @click="input">
        </div>
 methods: {
                div() {
                    console.log("A")
                },
                input() {
                    console.log("B")
                }
            }

　　在沒有使用.capture的時候點擊input控制臺輸出的是B和A，使用.capture的時候點擊input控制臺輸出的是A和B。.capture的作用是點擊子節點事件的時候，會從父節點依次向當前子節點事件執行

.self

      <div class="outer" @click="div">
            <div class="inner" @click.self="div1">
                <input type="button" value="戳他" @click="input">
            </div>
        </div>

  methods: {
                div() {
                    console.log("A")
                },
                input() {
                    console.log("C")
                },
                div1() {
                    console.log("B")
                }
            }

　.self只會觸發自己範圍內的事件，不會包含子元素，點擊div1的時候只會出現B和A，不會出現子節點事件。點擊按鈕的時候只會出現C和A,不會出現B事件

.once

 <input type="button" value="戳他" @click.once="input">

 methods: {
                input() {
                    console.log("A")
                }
            }

　　使用.once修飾的只會執行一次，點擊多次控制臺也只會輸出第一次點擊的A

Vue事件修飾符的學習