二、模版语法

二、模板语法

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

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

2.1、插值

（1）文本

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

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

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

（2） 原始 HTML（v-html）

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

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

<div id="app">
    <p>Using mustaches: {{ rawHtml }}</p>
    <p>Using v-html directive: <span v-html="rawHtml"></span></p>
</div>

<script>

    const Counter = {
        data() {
            return {
                rawHtml: "<a href=''>hello</a>"
            }
        }
    }

    vm = Vue.createApp(Counter).mount('#app')

</script>

（3）value 值（v-model）

<div id="app">
    <!-- 设置vue可以操作的html内容范围，值一般就是css的id选择器。 -->
    <p>{{ msg }}</p>
    <p><input type="text" v-model="msg"></p>
</div>

<script>

    const Counter = {
        data() {
            return {
                msg: "hello world"
            }
        }
    }

    vm = Vue.createApp(Counter).mount('#app')

</script>

（4）Attribute（v-bind）

Mustache 语法不能在 HTML attribute 中使用，然而，可以使用 v-bind 指令进行绑定

<div id="app">
    <p><a v-bind:href="link">{{site}}</a></p>
    <p><a :href="link">{{site}}</a></p>
    <p>
       网站名称 <input type="text" v-model="site">
       url地址 <input type="text" v-model="link">
    </p>
</div>

<script>

    const Counter = {
        data() {
            return {
                site: "百度",
                link: "http://www.baidu.com"
            }
        }
    }

    vm = Vue.createApp(Counter).mount('#app')

</script>

1、v-bind:属性名 简写格式 :属性名

2、指令的意思是：“将这个元素节点的 href attribute 和 Vue 实例的 link property 保持一致”。

（5）使用 JavaScript 表达式

迄今为止，在我们的模板中，我们一直都只绑定简单的 property 键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

<div id="app">
    <p> {{ number + 1 }}</p>
    <p> {{ ok ? 'YES' : 'NO' }}</p>
    <p> {{ msg.split('').reverse().join('') }}</p>
    <div :class="'list-' + id">{{id}}</div>
</div>

<script>

    const Counter = {
        data() {
            return {
                number:100,
                ok:true,
                msg: "hello world",
                id:3,
            }
        }
    }

    vm = Vue.createApp(Counter).mount('#app')

</script>

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

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

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

2.2、样式绑定（class与style）

2.2.1、class属性操作

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可（<div :class="c1 c2"></div>）。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

（1）对象语法

我们可以传给 :class (v-bind:class 的简写) 一个对象，以动态地切换 class：

<div :class="{ c1: isC1 }"></div>

上面的语法表示 c1 这个 class值 存在与否将取决于data数据 property isC1 的布尔值，true即存在，false不存在。

你可以在对象中传入更多字段来动态切换多个 class。此外，:class 指令也可以与普通的 class attribute 共存。当有如下模板：

<div
  class="static"
  :class="{ c1: isC1, c2: isC2 }"
></div>

和如下data：

data() {
  return {
    isC1: true,
    isC2: false
  }
}

渲染的结果为：

<div class="static c1"></div>

当 isC1 或者 isC2 变化时，class 列表将相应地更新。

绑定的数据对象不必内联定义在模板里：

<div :class="classObject"></div>

data() {
  return {
    classObject: {
      c1: false,
      c2: true
    }
  }
}

渲染的结果：

<div class="static c2"></div>

（2）数组语法

我们可以把一个数组传给 :class，以应用一个 class 列表：

<div :class="[activeClass, errorClass]"></div>

data() {
  return {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
}

渲染的结果为：

<div class="active text-danger"></div>

如果你想根据条件切换列表中的 class，可以使用三元表达式：

<div :class="[isActive ? activeClass : '', errorClass]"></div>

这样写将始终添加 errorClass，但是只有在 isActive 为 truthy[1] 时才添加 activeClass。

不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法：

<div :class="[{ active: isActive }, errorClass]"></div>

2.2.2、style属性操作

（1）对象语法

:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>