Vue.js 的指令與事件

1、指令與事件

        指令（Directives）是 Vue.js 模板中最多見的一項功能，它帶有前綴 v- ，好比 v-if、v-html、v-pre 等。指令的主要指責就是當其表達式的值改變時，相應地將某些行爲應用到 DOM 上，以 v-if 爲例：

<div id="app">
    <p v-if="show">顯示這段文本</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            show: ture
        }
    })
</script>

        當數據 show 的值爲 true 時，p 元素會被插入，爲 false 時則會被移除。數據驅動 DOM 是 Vue.js 的核心理念，不到萬不得已時不要主動操做 DOM ，只須要維護好數據，DOM 的事 Vue 會幫你優雅的處理。

        Vue.js 內置了不少指令，幫助咱們快速完成常見的 DOM 的操做，好比循環渲染、顯示與隱藏等。好比，v-bind 和 v-on 。

        v-bind 的基本用途是動態更新 HTML 元素上的屬性，好比 id，class 等。例如：

<div id="app">
    <a v-bind:href="url">連接</a>
    <img v-bind:src="imgUrl">
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            url: 'https://www.github.com',
            imgUrl: '/img.jpg'
        }
    })
</script>

        上述例子中的連接地址與圖片的地址都與數據進行了綁定，當經過各類方式改變數據時，連接和圖片都會自動更新。

        另外一個很是重要的指令就是 v-on ，它用來綁定事件監聽器，這樣咱們就能夠作一些交互了。例如：

<div id="app">
    <p v-if="show">Vue v-if指令</p>
    <button v-on:click="handleClose">隱藏/顯示</button>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            show: true
        },
        methods: {
            handleClose: function () {
                this.show = false;
            }
        }
    })
</script>

        在 button 按鈕上，使用 v-on:click 給該元素綁定了一個點擊事件，在普通元素上，v-on 能夠監聽原生的 DOM 事件，除了 click 外，還有 dblclick、keyup、mousemove 等。表達式能夠是一個方法名，這些方法都寫在 Vue 實例的 methods 屬性內，而且是函數的形式，函數內的 this 指向的是當前 Vue 實例自己，所以能夠直接使用 this.XXX 的形式來訪問或修改數據，如示例中的 this.show = false；把數據 show 修改成了 false，因此點擊按鈕時，文本 p 元素就被移除了。

        表達式除了方法名，也能夠直接是一個內聯語句，上例也能夠改寫爲：

<div id="app">
        <p v-if="show">Vue v-if指令</p>
        <button v-on:click="show = false">隱藏/顯示</button>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                show: true
            }
        })
    </script>

        若是綁定的事件要處理複雜的業務邏輯，仍是在 methods 裏聲明一個方法，這樣而可讀性更強也好維護。Vue.js 將 methods 裏的方法也代理了，因此也能夠像訪問 Vue 數據那樣來調用方法：

<div id="app">
    <p v-if="show">Vue v-if指令</p>
    <button v-on:click="handleClose">隱藏/顯示</button>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            show: true
        },
        methods: {
            handleClose: function () {
                this.close();
            },
            close: function () {
                this.show = false;
            }
        }
    })
</script>

        在 handleClose 方法內，直接經過 this.clolse() 調用了 close() 函數，也能夠在 Vue 實例外部調用：

 

<script>
    var app = new Vue({
        el: '#app',
        data: {
            show: true
        },
        methods: {
          init: function (text) {
              console.log(text);
          }
        },
        mounted: function () {
            this.init('在初始化調用');      // 在初始化時調用
        }
    });

    app.init('在 Vue 實例外部調用');        // 在 Vue 實例外部調用

</script>

2、語法糖

        語法糖是指在不影響功能的狀況下，添加某種方法實現一樣的效果，從而方便程序開發。

        Vue.js 的 v-bind 和 v-on 指令都提供了語法糖，也能夠說時縮寫，好比 v-bind，能夠省略 v-bind，直接寫一個冒號 「 : 」  ：

<a v-bind:href="url">連接</a>
    <img v-bind:src="/imgUrl">
    <!-- 縮寫爲 -->
    <a :href="url">連接</a>
    <img :src="imgUrl">

        v-on 能夠直接用 「 @ 」 來縮寫：

<button v-on:click="handleClose">隱藏/顯示</button>
    <!-- 縮寫爲 -->
    <button @:click="handleClose">隱藏/顯示</button>

        使用語法糖能夠簡化代碼的書寫。