Vue 模板语法

最新推荐文章于 2022-06-10 10:30:43 发布

lamp_yang_3533

最新推荐文章于 2022-06-10 10:30:43 发布

阅读量179

点赞数 1

分类专栏： Vue.js 文章标签： Vue 模板语法数据绑定过滤器

本文链接：https://blog.csdn.net/lamp_yang_3533/article/details/100628996

版权

Vue.js 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

简介

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML。

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

数据绑定

数据绑定也称作插值，主要分为以下几种形式：

文本
原始HTML
HTML属性
JavaScript 表达式

文本

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

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

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

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

<span v-once>这个将不会改变: {{ msg }}</span>

原始 HTML

双大括号会将数据解释为普通文本，而非 HTML 代码。

为了输出真正的 HTML，你需要使用 v-html 指令：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <div v-html="msg"></div>
    <div>{{msg}}</div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            msg: '<span style="color:blue">这是一个h1标签</span>'
        }
    })
</script>
</body>
</html>

页面显示为：

这是一个h1标签
<span style="color:blue">这是一个h1标签</span>

但你不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。

对于用户界面 (UI)，组件更适合作为可重用和可组合的基本单位。

注意： 你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户输入的内容使用 HTML 插值。

HTML 属性

HTML 属性的值应使用 v-bind 指令绑定，双大括号语法不能作用在 HTML 属性上。

<div v-bind:id="dynamicId"></div>

v-bind: 可以简写为 : , 即一个英文冒号。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
</head>
<style>
    .red{
        color: red;
    }
</style>
<body>

<div id="app">
    <h2 v-bind:id="vid" :class="vclass" :title="vtitle">属性绑定</h2>
    <!-- <h2 id="myid" class="red" title="vue 多属性绑定">属性绑定</h2> -->
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            vid:"myid",
            vclass: "red",
            vtitle:"vue 多属性绑定"
        }
    })
</script>

</body>
</html>

使用 JavaScript 表达式

对于所有的数据绑定，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 } }}

【模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。】

指令

指令（Directives）是带有 v- 前缀的特殊属性。

指令属性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

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

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

元素。

参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 属性：

<a v-bind:href="url">...</a>

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

另一个例子是 v-on 指令，它用于监听 DOM 事件：

<a v-on:click="doSomething">...</a>

在这里参数是监听的事件名。

修饰符

修饰符 (Modifiers) 是以英文半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault() 。

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

缩写

Vue.js 为 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.js 允许你自定义过滤器，过滤器应该被添加在 JavaScript 表达式的尾部，由管道符指示。

过滤器可用于一些常见的文本格式化。

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

自定义过滤器分为两种：

局部过滤器
全部过滤器

局部过滤器：通过构造器的 filters 选项来定义。

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

全局过滤器：在创建 Vue 实例之前，通过 Vue.filter() 来定义。

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

过滤器函数总是接收表达式的值 (之前的操作链的结果) 作为第一个参数。

过滤器可以串联：

{{ message | filterA | filterB }}

过滤器是 JavaScript 函数，因此可以接收参数。

{{ message | filterA('arg1', arg2) }}

这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。

lamp_yang_3533

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 模板语法

简介Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML。在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。数据绑定数据绑定也称作插值，主要分为以下几种形式：文本原始...
复制链接

扫一扫