Vue 的指令和數據與事件的綁定

前言

最近在學習vue，涉及到一些基礎的知識點，在此處記錄一下，有什麼不對的地方歡迎批評指正。

Vue (讀音 /vjuː/，類似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計爲可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠爲複雜的單頁應用提供驅動。

正如vue官網所說，vue是一個漸進式框架，那麼什麼是一個漸進式框架呢？

漸進式框架就是既可以當成小的插件，也可當成庫使用，也可以當成一個框架使用。

插件：一個非常小的功能或者模塊
庫：一系列插件的集合
框架：可以完成大型完整項目

Vue 的魅力

<div id="app">
    <h1>{{ message }}</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            message: 'Hello World'
        }
    })
</script>

Vue 的魅力之處就是不用操作DOM也可以進行修改頁面的內容。

我們直接通過控制檯修改 Vue 中的 data 值，頁面也會隨之改變。

Vue 的指令

在MV*（MVC，MVVM）框架中，vue的指令以v-開頭，angular的指令以ng-開頭，在react中可以自定義，指令卸載標籤的屬性中，不同的指令完成不同的功能。

v-pre 跳過Vue渲染

Vue 的頁面是經過兩次渲染的，第一次有瀏覽器進行渲染，Vue進行接管後進行第二此渲染，v-pre 指令就是讓Vue對其不進行二次渲染。

<div id="app">
    <h1 v-pre>{{ message }}</h1>
</div>

<script>
    let app = new Vue({
        el: '#app',
        data: {
            message: 'Hello World'
        }
    })
</script>

v-cloak 跳過頁面渲染

我們知道在vue中，頁面的渲染是有兩次的，使用 v-cloak 指令可以跳過頁面的渲染。

<style>
    [v-cloak] {
        display: none;
    }
</style>
<div id="app">
    <h1 v-cloak>{{ message }}</h1>
</div>

<script>
    let app = new Vue({
        el: '#app',
        data: {
            message: 'Hello World'
        }
    })
</script>

v-once 僅渲染一次

使用v-once指令後，無論頁面vue值如何改變，頁面也不會再次渲染。

<div id="app">
    <h1 v-once>{{ message }}</h1>
</div>

<script>
    let app = new Vue({
        el: '#app',
        data: {
            message: 'Hello World'
        }
    })
</script>

v-html 渲染HTML文檔

和innerHTML效果類似，v-html指令需要賦值。

<div id="app">
    <h1 v-html="message"></h1>
</div>

<script>
    let app = new Vue({
        el: '#app',
        data: {
            message: '<h1>Hello World</h1>'
        }
    })
</script>

v-text 渲染HTML文檔

和innerText效果類似，v-text指令需要賦值。

<div id="app">
    <h1 v-text="message"></h1>
</div>

<script>
    let app = new Vue({
        el: '#app',
        data: {
            message: '<h1>Hello World</h1>'
        }
    })
</script>

v-if 控制元素（如果）

當v-if的值爲true是，則當前元素將要渲染。

<div id="app">
    <h1 v-if="isShow">{{ message }}</h1>
</div>

<script>
    let app = new Vue({
        el: '#app',
        data: {
            message: 'Hello World',
            isShow: true
        }
    })
</script>

v-else 控制元素（反之）

v-else與v-if必須爲一組，且中間不允許出現其他元素。

<div id="app">
    <h1 v-if="isShow">{{ message }}</h1>
    <h1 v-else>{{ messages }}</h1>
</div>

<script>
    let app = new Vue({
        el: '#app',
        data: {
            message: 'Hello World',
            messages: 'Hello Vue',
            isShow: false
        }
    })
</script>

v-else-if 控制元素（分支）

和v-else一樣，v-else-if會創建更多的分支，與v-if必須爲一組，且是連續的。

<div id="app">
    <h1 v-if="isShow">{{ message }}</h1>
    <h1 v-else-if>{{ messages }}</h1>
</div>

<script>
    let app = new Vue({
        el: '#app',
        data: {
            message: 'Hello World',
            messages: 'Hello Vue',
            isShow: false
        }
    })
</script>

v-show 顯示元素

v-show 指令控制元素顯示隱藏，和v-if不同的是v-if控制元素是否存在，v-show控制元素的display:none，同時v-show不支持template標籤。

<div id="app">
    <h1 v-show="isShow">{{ message }}</h1>
</div>

<script>
    let app = new Vue({
        el: '#app',
        data: {
            message: 'Hello World',
            messages: 'Hello Vue',
            isShow: false
        }
    })
</script>

v-for 循環

將數據與元素循環綁定，數據可以爲數組，也可以是對象；

v-for="(item,index) in arr"

v-for="(value,key) in obj"

<div id="app">
    <div v-for="item in listarr" :class="item" :key="item" style="width: 100px;height: 100px;"></div>
    <div v-for="(value,key) in listarr" :key="key">{{key}}:{{value}}</div>
</div>

<script>
    let app = new Vue({
        el: '#app',
        data: {
            listarr: ['red', 'blue', 'yellow'],
            listobj: {
                name: 'rabbit',
                age: 20
            }
        }
    })
</script>

屬性的綁定

需要通過vue渲染的屬性得添加標識符v-bind:，可簡寫爲 : 。

可以單個寫入也可以用數組的形式寫入，還可以是對象的形式。

<style>
    .blue {
        color: blue;
    }
    
    .fontSize {
        font-size: 26px;
    }
    
</style>
<div id="app">
    <h1 v-bind:class="color" class="fontSize">{{ message }}</h1>
    <h1 v-bind:class="[color, fontSize]">{{ message }}</h1>
    <h1 v-bind:class="{IsColor:color, IsSize: fontSize}">{{ message }}</h1>
</div>

<script>
    let app = new Vue({
        el: '#app',
        data: {
            message: 'Hello World',
            color: 'blue',
            fontSize: 'fontSize'
        }
    })
</script>

事件的綁定

和屬性的綁定一樣，我們通常使用v-on:事件名來綁定事件，也可以使用@符號來代替。

<div id="app">
    <button v-on:click="ChangeColor('red')">red</button>
    <button @click="ChangeColor('blue')">blue</button>
    <button @click="ChangeColor('yellow')">yellow</button>
    <div style="width: 100px;height: 100px;" :class="color"></div>
</div>

<script>
    let app = new Vue({
        el: '#app',
        data: {
            color: 'red',
        },
        methods: {
            ChangeColor(color) {
                this.color = color
            }
        }
    })
</script>