Vue基礎以內部指令（下）

v-on綁定事件監聽器

直接擼代碼：

<div id="app">
  <h2>計數器</h2>
  number：{{number}}
  <button v-on:click="add">+</button>
  <button @click="subtract">-</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app', // app是Vue實例的掛在對象
        data: {
          number: 0
        },
        methods: {
          add () {
            this.number ++
          },
          subtract () {
            this.number --
          }
        }
    })
</script>

@click等同於v-on:click，是Vue的語法糖，在methods內定義好方法，v-on指令監聽DOM事件來觸發一些javascript代碼。

除了綁定click以外，咱們還能夠綁定其它事件，好比鍵盤迴車事件v-on:keyup.enter,更多事件請點擊查看

面試考點：Vue事件修飾符的做用

<div id="app">
  <div @click="grandfather">
    <div @click="father">
      <div @click="son">me</div>
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app', // app是Vue實例的掛在對象
        data: {
        },
        methods: {
          grandfather () {
            console.log('grandfather')
          },
          father () {
            console.log('father')
          },
          son () {
            console.log('son')
          },
        }
    })
</script>

事件流圖(來自百度)：

上面一段代碼，什麼修飾符都不添加時，點擊「me」，依次打印son、father、grandfather

• .stop

阻止冒泡,操做子元素不會觸發父元素同類事件

<div @click.stop="grandfather">
  <div @click.stop="father">
    <div @click.stop="son">me</div>
  </div>
</div>

此時，只會觸發子元素事件

• .capture

添加事件偵查時使用事件捕獲模式，從外到內依次捕獲

<div @click.capture="grandfather">
  <div @click.capture="father">
    <div @click.capture="son">me</div>
  </div>
</div>

依次打印grandfather、father、son

• .prevent

取消默認事件

<a href="www.baidu.com" @click.prevent="">百度</a>

連接不跳轉

• .self

只在添加事件的元素自身觸發

• .once

事件只觸發一次

其餘指令

v-pre（不須要表達式）

在模板中跳過vue的編譯，直接輸出原始值。就是在標籤中加入v-pre就不會輸出vue中的data值了

<div id="app" v-pre>
    <h1>{{message}}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app', // app是Vue實例的掛在對象
        data: {
          message: 'Hello world'
        }
    })
</script>

v-cloak（不須要表達式）

爲了解決當網速較慢時，Vue.js文件沒有被加載完時頁面上數據綁定的閃現問題。
例如：

<h1>{{message}}</h1>

會閃現{{message}}

利用v-cloak指令使頁面在Vue渲染完指定的整個DOM後才進行顯示，而且v-cloak會在Vue實例結束編譯後從綁定的DOM上移除，結合CSS能夠解決這個問題。

[v-cloak] {
  display: none;
}

v-once（不須要表達式）

這個指令在實際開發中用的不是不少，做用是使定義它的元素或組件只渲染一次，包括元素或組件的全部子節點。渲染一次後不會隨數據變化，能夠視爲靜態。

<div id="app" v-once>
    <input type="text" v-model="message">
    <h1>{{message}}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app', // app是Vue實例的掛在對象
        data: {
            message: "Hello world" // 字面量
        }
    })
</script>

以上是本期所有內容，欲知後事如何，請聽下回分解<(￣︶￣)↗[GO!]