Vue.js模板语法

Posted 2021-05-01 WEB前端开发社区

模板语法

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

在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合相应系统，在应用状态改变时，Vue能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。

如果你熟悉虚拟DOM并且偏爱javascript的原始力量，你也可以不用模板，直接写渲染（render）函数，使用可选的JSX语法。

插值

#文本

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

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

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

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

<span v-once> This will never change:{{msg}} </span>

#纯HTML

双大括号会将数据解释为纯文本，而非HTML。为了输出真正的HTML，你需要使用v-html指令：

<div v-html="rawHtml"><div>

被插入的内容都会被当做HTML——数据绑定会被忽略。

#属性

Mustache不能在HTML属性中使用，应使用v-bind指令：

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

这对布尔值的属性也有效——如果条件被求值为false的话该属性会被移除：

<button v-bind:disable="dynamicCondition">Button</button>

#使用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} }}

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

 

指令

指令（Directives）是带有v- 前缀的特殊属性。指令是职责就是当其表达式的值改变时相应地将某些行为应用到DOM上。让我们回顾下在前面博客里的例子：

<p v-if="seen">Now you see me</p>

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

#参数

一些指令能接受一个参数，在指令后以冒号指明。例如，v-bind 指令被用来响应地更新HTML属性：

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

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

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

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

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

#修饰符

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

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

过滤器

Vue.js允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache插值和v-bind表达式。另外，过滤器应该被添加在JavaScript表达式的尾部，有“管道”符指示：

<!-- in mustache -->{{ message | capitalize' }}<!-- in v-bind --><div v-bind:id="rawId | formId"></div>

过滤器函数总接受表达式的值作为第一个参数。

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

过滤器可以串联：

{{ message | filterA | filterB }}

因为过滤器是JavaScript函数，因此可以接受参数：

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

这里，字符串‘arg1’将传给过滤器作为第二个参数，arg2表达式的值将被求值然后传给过滤器作为第三个参数。

缩写

v- 前缀在模板中是作为一个标示Vue特殊属性的明显标示。当你使用Vue.js为现有的标示添加动态行为时，它会很有用，但对于一些经常使用的指令来说有点繁琐。同时，当搭建Vue.js管理所有模板的SPA时，v- 前缀也变得没那么重要了。因此，Vue.js为两个最为常用的指令提供了特别的编写：

# v-bind 缩写：

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

# v-on 缩写：

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

它们可能看起来与普通的HTML略有不同，但：和@ 对于属性名来说都是合法字符，在所有支持Vue.js的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记。缩写语法是完全可选的，随着你更深入地了解它们的作用，你会庆幸拥有它们。