Vue.js模板语法

青旅半醒 2022-05-20 07:35 142阅读 0赞

**模板语法**

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指令：

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

\#属性

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

这对布尔值的属性也有效——如果条件被求值为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上。让我们回顾下在前面博客里的例子：

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

\#参数

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

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

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

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

\#修饰符

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

**过滤器**

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

{
       { message | capitalize' }}
    
    
    <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的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记。缩写语法是完全可选的，随着你更深入地了解它们的作用，你会庆幸拥有它们。