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学习笔记】