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-textv-htmlv-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-bindv-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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值