Vue模板语法《插值，指令，缩写》--【Vue入门】

最新推荐文章于 2024-05-08 10:00:07 发布

小菜鸡互啄

最新推荐文章于 2024-05-08 10:00:07 发布

阅读量433

点赞数

分类专栏： Vue 文章标签： vue java javascript js

本文链接：https://blog.csdn.net/qq_43910194/article/details/109551500

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

前言
一、插值
二、指令
三、缩写

前言

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

<!--*                        _ooOoo_
*                           o8888888o
*                           88" . "88
*                           (| -_- |)
*                            O\ = /O
*                        ____/`---'\____
*                      .   ' \\| |// `.
*                       / \\||| : |||// \
*                     / _||||| -:- |||||- \
*                       | | \\\ - /// | |
*                     | \_| ''\---/'' | |
*                      \ .-\__ `-` ___/-. /
*                   ___`. .' /--.--\ `. . __
*                ."" '< `.___\_<|>_/___.' >'"".
*               | | : `- \`.;`\ _ /`;.`/ - ` : | |
*                 \ \ `-. \_ __\ /__ _/ .-` / /
*         ======`-.____`-.___\_____/___.-`____.-'======
*                            `=---='
*
*         .............................................
*                  佛祖镇楼                  BUG滚蛋
*          佛曰:
*                  写字楼里写字间，写字间里程序员；
*                  程序人员写程序，又拿程序换酒钱。
*                  酒醒只在网上坐，酒醉还来网下眠；
*                  酒醉酒醒日复日，网上网下年复年。
*                  但愿老死电脑间，不愿鞠躬老板前；
*                  奔驰宝马贵者趣，公交自行程序员。
*                  别人笑我忒疯癫，我笑自己命太贱；
*                  不见满街漂亮妹，哪个归得程序员？
*-->

一、插值

1.文本

数据绑定最常见的形式就是使用“Mustache”语法（双大括号）的文本插值：

<h3>Message:{{ msg }}</h3>

Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：

<h3 v-once>Message：{{ msg }}</h3>

实例代码

<!--内容：Vue模板语法
    时间：2020/11/17
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VueTemplate</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<!--插入文本-->
<div id="app1">
    <h3>Message：{{msg}}</h3>
<!--    这个不会改变-->
    <h3 v-once>Message：{{msg}}</h3>
</div>


<script type="text/javascript">
    var Vu = new Vue({
        el:'#app1',
        data:{
            msg:"将显示这个文本"
        }
    })
</script>
</body>
</html>

在这里插入图片描述

2.原始HTML

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html。
注：动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

<div id="test">
<p>不能正常显示Html：{{rawhtml}}</p>
    <p>正常显示Html：<p v-html="rawhtml"></p></p>
</div>

实例代码

<!--内容：Vue模板语法
    时间：2020/11/17
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VueTemplate</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="test">
<p>不能正常显示Html：{{rawhtml}}</p>
    <p>正常显示Html：<p v-html="rawhtml"></p></p>
</div>
<script type="text/javascript">
    var vu = new Vue({
        el:'#test',
        data:{
            rawhtml:"<h2>显示这个东西</h2>"
        }
    })
</script>
</body>
</html>

在这里插入图片描述

3.HTML的Attribute

Mustache语法不能直接用于Html的Attribute（属性）上，如果需要填入自己定义的属性就需要使用v-bind
实例代码：

<!--内容：Vue模板语法
    时间：2020/11/17
-->
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>VueTemplate</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="test">

<p v-bind:style="color">利用Vue控制Html属性</p>

</div>
<script type="text/javascript">
    var vu = new Vue({
        el:'#test',
        data:{
            color:"color: #f30909"
        }
    })
</script>
</body>
</html>

在这里插入图片描述

4.使用javaScript表达式

其实在Vue里面，我们不仅可以使用文本绑定输出，还可以在绑定数据上面进行操作。Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

二、指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。回顾我们在介绍中看到的例子：

<p v-if="seen">现在你看到我了</p>

这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除

元素。
动态参数

从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：

<a v-bind:[attributeName]="url"> ... </a>

这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data property attributeName，其值为 “href”，那么这个绑定将等价于 v-bind:href。

同样地，你可以使用动态参数为一个动态的事件名绑定处理函数：

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

在这个示例中，当 eventName 的值为 “focus” 时，v-on:[eventName] 将等价于 v-on:focus。

对动态参数的值的约束
动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。

对动态参数表达式的约束
动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的。例如：

<a v-bind:['foo' + bar]="value"> ... </a>

变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。

在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写：

<!--
在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。
除非在实例中有一个名为“someattr”的 property，否则代码不会工作。
-->
<a v-bind:[someAttr]="value"> ... </a>

修饰符
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit">...</form>

在接下来对 v-on 和 v-for 等功能的探索中，你会看到修饰符的其它例子。

三、缩写

两个缩写：v-bind，v-on

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

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

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

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>