Vue學習筆記(二) 模板語法

時間 2019-11-12

標籤 vue 學習筆記模板語法简体版

原文原文鏈接

Vue 使用基於 HTML 的模板語法，容許開發者將 DOM 綁定到底層 Vue 實例的數據javascript

而在底層實現上，Vue 將模板編譯成虛擬 DOM 渲染函數html

結合響應系統，Vue 能夠計算出最少須要從新渲染多少組件，把 DOM 操做減到最少vue

一、插值

（1）普通文本java

使用 v-text 指令，更新元素的 textContent

<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <p v-text="message"></p>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                message: "Hello Vue"
            }
        })
    </script>
</body>

</html>

使用 Mustache 語法（雙大括號語法），更新部分的 textContent

<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <p>Hello {{message}}</p>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                message: "Vue"
            }
        })
    </script>
</body>

</html>

（2）原始 HTMLnpm

因爲雙大括號會將數據解釋爲普通文本，所以爲了輸出 HTML，能夠使用 v-html 指令瀏覽器

<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <p v-html="message"></p>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                message: "<h1>Hello Vue</h1>"
            }
        })
    </script>
</body>

</html>

（3）HTML 屬性app

因爲雙大括號不能做用在 HMTL 屬性上，所以能夠使用 v-bind 指令函數

<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <button v-bind:disabled="isButtonDisabled">Hello Vue</button>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                isButtonDisabled: true
            }
        })
    </script>
</body>

</html>

（4）JavaScript 表達式學習

在雙大括號中能夠使用徹底的 JavaScript 表達式，可是 只能包含單個表達式url

<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        {{ message.split('').reverse().join('') }}
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'HELLO'
            }
        })
    </script>
</body>

</html>

二、指令

指令是帶有 v- 前綴的特殊特性，當表達式的值發生改變時，會將其產生的影響做用於 DOM

上面所使用的 v-text，v-html 和 v-bind 都是指令，讓咱們來從新回顧一下：

<!-- 使用 v-text -->
<p v-text="message"></p>

<!-- 使用 v-html -->
<p v-html="message"></p>

<!-- 使用 v-bind -->
<button v-bind:disabled="isButtonDisabled">Button</button>

（1）參數

一個指令能夠沒有參數（例如上面的 v-html），也能夠帶有參數（例如上面的 v-bind:disabled）

disabled 是 v-bind 指令的參數，v-bind 指令將 disabled 屬性的值和 isButtonDisabled 表達式的值聯繫起來

（2）動態參數

此外，能夠用方括號括起來的 JavaScript 表達式做爲一個指令的動態參數，例如：

<a v-on:[eventName]="doSomething"> ... </a>

在這裏，eventName 會做爲一個 JavaScript 表達式動態求值，這樣咱們就能夠爲一個動態的事件名綁定處理函數

例如，當 eventName 的值爲 "focus" 時，v-on:[eventName] 將等價於 v-on:focus

使用動態參數有下面幾個須要注意的地方：

動態參數預期獲得一個字符串，異常狀況下獲得一個 null 用於顯示移除綁定，其它非字符串類型會觸發一個警告
在動態參數表達式中，空格和引號放在 HTML 屬性中是無效的
在動態參數表達式中，大寫字母放在 HTML 屬性中可能會被瀏覽器自動轉換成小寫

（3）縮寫

Vue 爲 v-bind 和 v-on 兩個經常使用的屬性提供了縮寫

v-bind

<!-- 完整語法 -->
<a v-bind:href="url">...</a>

<!-- 縮寫 -->
<a :href="url">...</a>

v-on

<!-- 完整語法 -->
<a v-on:click="doSomething">...</a>

<!-- 縮寫 -->
<a @click="doSomething">...</a>

【閱讀更多 Vue 系列文章，請看 Vue學習筆記】

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。