Vue学习笔记(二) 模板语法

Vue 使用基于 HTML 的模板语法，允许开发者将 DOM 绑定到底层 Vue 实例的数据

而在底层实现上，Vue 将模板编译成虚拟 DOM 渲染函数

结合响应系统，Vue 可以计算出最少需要重新渲染多少组件，把 DOM 操作减到最少

1、插值

（1）普通文本

使用 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）原始 HTML

由于双大括号会将数据解释为普通文本，因此为了输出 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 属性

由于双大括号不能作用在 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 表达式，但是 只能包含单个表达式

<!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>

2、指令

指令是带有 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 指令的参数，该指令将 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>